Dans GWT, comment remplacer le CSS de DisclosurePanel en utilisant <ui:style> ou ClientBundle

Question

J'ai une classe qui étend Composite et contient un DisclosurePanel au niveau supérieur du fichier UiBinder associé.

Dans DisclosurePanel, le HTML ressemble à ceci:

<table class="gwt-DisclosurePanel gwt-DisclosurePanel-closed> 
    <tr> 
    <td> 
     <a href="javascript:void(0);" style="display: block;" class="header"> 
     <div class=""> <!-- an HTMLPanel I've shoved in to a <gwt:customHeader> block --> 
      ... 
     </div> 
     </a> 
... 

Dans mon fichier UiBinder je peux utiliser addStyleNames = "{style ???.}" Et le style des choses, comme je peux le style de la DisclosurePanel lui-même et je peux le style de mon HTMLPanel intérieur de la, mais je ne peux pas le style de la

<a> 

sauf en faisant ceci:

disclosurePanel.getHeader().getParent().getElement().getStyle().setTextDecoration(TextDecoration.NONE); 
disclosurePanel.getHeader().getParent().getElement().getStyle().setColor("black"); 

dans le code, mais c'est moche et le style est maintenant à deux endroits, le code et le fichier UiBinder.

La raison pour laquelle je fais cela est de se débarrasser du soulignement et de la couleur bleue qui l'a par défaut. Une autre alternative est de faire quelque chose comme ceci:

.gwt-DisclosurePanel a { 
    text-decoration: none; 
    text: black; 
} 

mais je aurais besoin de faire référence à ce fichier CSS de ma page d'accueil (client.html) ou de référence à partir du fichier gwt.xml, mais ces deux façons de faire les choses sont obsolètes.

Comment est-ce que je fais mieux, ou n'est-ce pas possible?

Answer 1

Hmmm ... sera ensureInjected() faire ce que je veux ? Puis-je définir juste un CssResource et un ClientBundle qui fait référence que CssResource puis appelez ensureInjected sur la CssResource et il injectera tous les CSS, même si je ai pas mentionné toutes les méthodes sur mon sous-interface CssResource ?

Oui et non - vous auriez à disable CSS obfuscation (<set-configuration-property name="CssResource.style" value="pretty" /> - avertissement, qui est mondiale, donc probablement pas ce que vous voulez) pour que cela fonctionne. Mais si vous faites référence à ces noms de classe que de vos modèles de UiBinder en tant que tels, vous devriez être bien:

<!-- Insert usual UiBinder stuff here --> 
<ui:with field='res' type='com.example.client.resource.SomeCoolBundle'/> 
<!-- SomeCoolBundle has a CssResource defined and available via style() --> 

<div class='{res.style.lbox}'></div> 

Rappelez-vous simplement pour marquer les classes GWT comme @external dans votre fichier CSS ou bien vous ne serez pas en mesure de les remplacer (car ils vont se brouillées):

@external .gwt-TextBox, .gwt-PasswordTextBox, .gwt-Button, .gwt-CheckBox; 

Si cela ne répond pas à vos besoins (ou est à la lourdeur), par tous les moyens font usage un de ces « désapprouvée » méthodes (pas vraiment).

Answer 2

Je voudrais déclarer mon style dans UIBinder, puis ajouter CssResource dans mon code java.

En UiBinder:

<ui:style field="dPanelStyle" type="com.*.client.*.JavaFile.DisclosurePanelStyle"> 
     .main { 
      padding-top:10px; 
      padding-left:10px; 
      width:492px; 
     } 
     .open { 
     } 
     .closed { 
     } 
     .header, 
     .header a, 
     .header td { 
      text-decoration: none; 
      color: black; 
      cursor: pointer; 
      cursor: hand; 
      font-weight: bold; 
      background-color:#A2DCE8; 
     } 
     .content { 
      border-left: 0px solid white; 
      padding: 0px 0px 0px 8px; 
      margin-left: 0px; 
     }   
    </ui:style> 

    <g:HTMLPanel> 
     <g:DisclosurePanel ui:field="dPanel" styleName="{dPanelStyle.main}"> 
     </g:DisclosurePanel> 
    </g:HTMLPanel> 

En JavaFile.java:

public interface DisclosurePanelStyle extends CssResource { 
    String main(); 
    String header(); 
    String content(); 
} 

@UiField DisclosurePanelStyle dPanelStyle; 
@UiField DisclosurePanel dPanel ; 

public JavaFile() { 
    initWidget(uiBinder.createAndBindUi(this)); 

    dPanel.getHeader().setStyleName(dPanelStyle.header()); 
    dPanel.getContent().setStyleName(dPanelStyle.content()); 
}