Le style d'une GWT Bouton avec CSS

Option 1: ne Pas à l'aide de thèmes à tous les

Si vous n'avez pas besoin de les styles par défaut, et veulent généralement à donner à la page de votre propre style, puis il est plus facile de complètement omettre le <inherits> déclaration pour les thèmes. GWT fonctionne très bien sans l'aide d'un thème.

^{(Note: Si vous avez toujours besoin de l' (image) ressources dans le thème, mais sans injection de la feuille de style CSS dans la page, vous pouvez hériter com.google.gwt.user.theme.clean.CleanResources au lieu de com.google.gwt.user.theme.clean.Clean. De cette façon, ils seront toujours automatiquement copié dans votre guerre de dossier.)}

Option 2: Sélectivement la désactivation de la thématisation pour les boutons

Si, toutefois, vous devez généralement utiliser un thème, et seulement besoin de donner quelques boutons de votre propre style, puis une solution simple est d'appeler

button.removeStyleName("gwt-Button");

^{Remarque: au Lieu de removeStyleName() vous pouvez également utiliser setStyleName("my-Button").}

Pour plus de commodité (et pour une utilisation plus facile dans UiBinder), vous pouvez tirer votre propre classe comme

package org.mypackage;

public class MyStyleButton extends Button {
    public MyStyleButton(final String html) {
        super(html);
        removeStyleName("gwt-Button");
    }

    /* ... override all the other Button constructors similarly ... */
}

Qui peuvent ensuite être importés et utilisés dans UiBinder comme

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:my='urn:import:org.mypackage'>

    ...

       <my:MyStyleButton>...

Option 3: changer le gwt-Bouton attributs de classe

Si vous voulez garder le thème regarder des boutons, et de ne modifier que quelques-uns des attributs de style, puis il est également possible de remplacer certains attributs dans le style prédéfini classes avec !important (comme suggéré par @bouhmid_tun). Mais attention: La liste des attributs pourrait changer dans l'avenir. Voici tous les prédéfinis des classes de style pour .gwt-Button de GWT 2.4.0 pour votre confort:

.gwt-Button {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size:small;
  background: url("images/hborder.png") repeat-x 0px -2077px;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
 -moz-border-radius: 3px;
}
.gwt-Button:active {
  border: 1px inset #ccc;
}
.gwt-Button:hover {
  border-color: #939393;
}
.gwt-Button[disabled] {
  cursor: default;
  color: #888;
}
.gwt-Button[disabled]:hover {
  border: 1px outset #ccc;
}