GWT ToggleButton avec le modèle UiBinder ne fonctionne pas

Question

J'ai le modèle UiBinder suivant pour un module simple. Mais quand je l'exécute, il ne stylise pas les boutons à bascule comme prévu. Par exemple la couleur, les bordures, le remplissage ou les marges ne semblent pas changer quand je déplace la souris au-dessus des boutons. Est-ce que je manque quelque chose de simple?

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

    <ui:style> 

.demo-ToggleButton 
{ 
    border      : 1px solid; 
    cursor      : hand; 
    cursor      : pointer; 
    margin      : 3px 1px; 
    padding      : 1px 10px; 
} 
.demo-ToggleButton-up-hovering 
{ 
    padding      : 0px 9px; 
    color      : #555; 
    border-top     : 4px solid; 
    border-left     : 4px solid; 
    border-right    : 4px solid; 
    border-bottom    : 4px solid; 
} 
.demo-ToggleButton-down, .demo-ToggleButton-down-hovering 
{ 
    padding      : 4px 9px; 
    border-top     : 4px solid; 
    border-left     : 4px solid; 
    border-right    : 4px solid; 
    border-bottom    : 4px solid; 
} 

     .eastPanel { 
      background-color: #F60; 
     } 

     .leftBar { 
      margin-left: 10px; 
      margin-top: 4px; 
      margin-right: 10px; 
      margin-bottom: 4px; 
      height: 100%; 
      border: 2px; 
     } 

     .leftButton { 

     } 

     .contentArea { 
      margin-left: 0px; 
      margin-top: 4px; 
      margin-right: 4px; 
      margin-bottom: 4px; 
      height: 100%; 
      width: 99%; 
     } 

     .northPanel { 
      background-color: #39F; 
     } 

     .southPanel { 
      background-color: #99C; 
     } 

     .centerPanel { 
      background-color: #FFC; 
     } 

     .messageLabel { 
      margin-left: 10px; 
     } 
    </ui:style> 


    <g:DockLayoutPanel unit='EM'> 

     <g:north size='2'> 
      <g:FlowPanel> 
       <g:Label>This is the NORTH panel</g:Label> 
      </g:FlowPanel> 
     </g:north> 



     <g:west size='10'> 
      <g:FlowPanel styleName="{style.leftBar}" width=""> 

<g:PushButton ui:field='dashboardButton' enabled='true' styleName="{style.demo-ToggleButton}"> 

    <g:upFace styleName="{style.demo-ToggleButton}">Dashboard</g:upFace> 
    <g:upHoveringFace styleName="{style.demo-ToggleButton-up-hovering}">sss</g:upHoveringFace> 
    <g:downFace styleName="{style.demo-ToggleButton-down}"/> 
    <g:downHoveringFace styleName="{style.demo-ToggleButton-down-hovering}"/> 

</g:PushButton> 


       <g:ToggleButton ui:field='projectsButton' styleName="{style.demo-ToggleButton}">Projects</g:ToggleButton> 
       <g:ToggleButton ui:field='activitiesButton' styleName="{style.demo-ToggleButton}">Activities</g:ToggleButton> 
       <g:ToggleButton ui:field='goalsButton' styleName="{style.demo-ToggleButton}">Goals</g:ToggleButton> 
       <g:ToggleButton ui:field='tagsButton' styleName="{style.demo-ToggleButton}">Tags</g:ToggleButton> 
      </g:FlowPanel> 
     </g:west> 


     <g:center> 

      <g:DockLayoutPanel unit='EM'> 

       <g:center> 
        <g:SimplePanel ui:field='contentPanel' /> 
       </g:center> 

       <g:south size='2'> 
        <g:VerticalPanel> 
         <g:Label styleName="{style.messageLabel}">message area</g:Label> 
        </g:VerticalPanel> 
       </g:south> 

      </g:DockLayoutPanel> 
     </g:center> 

    </g:DockLayoutPanel> 


</ui:UiBinder> 

Answer 1

Lors d'un changement de l'état ou en vol stationnaire un bouton à bascule, GWT ajouter des styles secondaires à l'élément. Ces styles sont standard, et même si vous substituez le style principal (comme vous l'avez fait avec demo-ToggleButton), GWT utilisera toujours les mêmes styles secondaires.

Vous verriez quelque chose comme ceci:

<div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up-hovering"> 

Notez que même si vous utilisez votre propre style primaire, vous verrez toujours ajouter GWT .gwt-ToggleButton-up planant ... il ne connaîtraient pas de maintenir votre « démonstration » préfixe:

<div tabindex="0" class="demo-ToggleButton gwt-ToggleButton-up-hovering"> 

donc, dans votre section de style de l'interface utilisateur Binder, vous devez ajouter les styles suivants:

@external gwt-ToggleButton-up, gwt-ToggleButton-down, gwt-ToggleButton-up-hovering, gwt-ToggleButton-down-hovering; 
.gwt-ToggleButton-up { } 
.gwt-ToggleButton-down { } 
.gwt-ToggleButton-up-hovering { } 
.gwt-ToggleButton-down-hovering { } 

Assurez-vous de les déclarer comme "externes" comme indiqué ci-dessus, ce qui les empêchera d'être obfusqués par le compilateur GWT. Cela devrait vous permettre de remplacer les styles GWT par défaut.

Answer 2

Lorsque vous essayez de passer outre .gwt styles de UiBinder la solution la plus simple est d'écrire:

<g:whateverWidget stylePrimaryName='{desiredStyle}'></g:whateverWidget> 

Cela indique GWT que ce nouveau style que vous spécifiez est le style premier et principal d'être regardé et pas le style .gwt qui est par défaut le principal et le plus important.