GWT UiBinder estilo CSS

Question

declaro algunos colores para el borde de un panel VerticalLayout, como en:

<ui:style> 
    .onMouseOverBorderColor {border-color: red; border-style: outset} 
    .onMouseOutBorderColor {border-color: black; border-style: outset} 
</ui:style> 

entonces quiero cambiar el color del borde del panel de acuerdo con la posición del ratón, y yo añadir al constructor de mi widget lo siguiente:

clickable.addMouseOverHandler(new MouseOverHandler() { 

     @Override 
     public void onMouseOver(MouseOverEvent event) { 
      GWT.log("mouse over"); 
      border.setStyleName("onMouseOverBorderColor"); 
     } 

    }); 
    clickable.addMouseOutHandler(new MouseOutHandler() { 

     @Override 
     public void onMouseOut(MouseOutEvent event) { 
      GWT.log("mouse out"); 
      border.setStyleName("onMouseOutBorderColor"); 
     } 

    }); 

Pero ... ¡no pasa nada! ¿Qué hice mal?

Código después de la sugerencia (que no funciona):

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

    <ui:style> 
     .fontStyleTitle {font-weight: bold }   
     .border {border-color: black; border-style: outset} 
    .border:hover {border-color: red; border-style: outset} 
    </ui:style> 

    <g:FocusPanel ui:field="clickable"> 
      <g:VerticalPanel ui:field="border" borderWidth="1" styleName="style.border"> 
       <g:Image ui:field="myImage"/> 
       <g:Label ui:field="myTitle" horizontalAlignment="ALIGN_CENTER" styleName="{style.fontStyleTitle}"/> 
      </g:VerticalPanel>   
    </g:FocusPanel> 

</ui:UiBinder> 

y la clase java:

public UiWidget(String path, String theTitle) { 
     initWidget(uiBinder.createAndBindUi(this)); 
     GWT.log(URL_PREFIX+path); 
     myImage.setUrl(URL_PREFIX+path); 
     myTitle.setText(theTitle); 
     myImage.setSize(IMG_WIDTH, IMG_HEIGHT); 
     /* 
     clickable.addMouseOverHandler(new MouseOverHandler() { 

      @Override 
      public void onMouseOver(MouseOverEvent event) { 
       GWT.log("mouse over"); 
      } 

     }); 
     clickable.addMouseOutHandler(new MouseOutHandler() { 

      @Override 
      public void onMouseOut(MouseOutEvent event) { 
       GWT.log("mouse out"); 
      } 
*/ 
} 

Answer 1

No se puede hacer referencia a la styleName css como este. En su ejemplo, el nombre de estilo en <ui:style> solo se puede usar como tal en el archivo de la carpeta ui porque está ofuscado por GWT. Deberías poner el estilo en un CSSResource. Y coloque el estilo en un archivo css en lugar del archivo uibinder y configure el nombre de estilo del recurso css en lugar de la cadena simple.

Pero si sólo desea cambiar un poco de CSS también se podría utilizar el selector de vuelo estacionario sin ningún código necesario:

<ui:style> 
    .border {border-color: black; border-style: outset} 
    .border:hover {border-color: red; border-style: outset} 
</ui:style> 

y establecer el estilo de borde en usted widget en el archivo UiBinder como un atributo: styleName="{style.border}"

Answer 2

Por defecto, todos los estilos declarados en un UiBinder están ofuscados.

Significa que su estilo 'onMouseOverBorderColor' se convertirá probablemente en algo así como 'GLX0QCICAR'.

Pero cuando en su código Java que hace:

border.setStyleName("onMouseOverBorderColor"); 

el elemento de frontera realmente tendrá el estilo 'onMouseOverBorderColor'.

SO2 soluciones:

Use externos para no ofuscar los nombres de estilo:

<ui:style> 
    @external onMouseOverBorderColor onMouseOutBorderColor; 
    .onMouseOverBorderColor {border-color: red; border-style: outset} 
    .onMouseOutBorderColor {border-color: black; border-style: outset} 
</ui:style> 

Use los estilo ofuscado en el código JAVA:

<ui:style type="your.package.name.UiWidget.MyStyle"> 
    .onMouseOverBorderColor {border-color: red; border-style: outset} 
    .onMouseOutBorderColor {border-color: black; border-style: outset} 
</ui:style> 

public class UiWidget { 
    ... 
    public interface MyStyle extends CssResource { 
     String onMouseOverBorderColor(); 
     String onMouseOutBorderColor(); 
    } 

    @UiField 
    protected MyStyle style; 

    public UiWidget(String path, String theTitle) { 
     ... 
     clickable.addMouseOverHandler(new MouseOverHandler() { 
      @Override 
      public void onMouseOver(MouseOverEvent event) { 
       border.setStyleName(style.onMouseOverBorderColor); 
      } 
     }); 
     ... 
    } 
}