Cambiar estilo UiBinder a otro estilo UiBinder Programativamente

Question

Ejemplo simple. Tengo 2 estilos declarados en UiBinder:

<ui:style> 
    .success { 
     font-size: 13px; 
     margin: 15px; 
     font-weight: bold; 
     display: inline; 
     padding: 3px 7px; 
     background: #FFF1A8; 
    } 
    .error { 
     font-size: 13px; 
     margin: 15px; 
     font-weight: bold; 
     display: inline; 
     padding: 3px 7px; 
     background: #990000; 
     color: #fff; 
    } 
</ui:style> 

también tengo una etiqueta que uno de ellos se aplica también.

<g:Label ui:field="statusLabel" styleName='{style.success}' /> 

Dentro UiBinder, ¿hay alguna manera de que yo sería capaz de ir sobre programáticamente cambiar el estilo al estilo de error? Es agradable poder organizar mi CSS allí mismo en el widget, y no he encontrado otra buena manera de organizarlo.

Si lo que estoy preguntando no es posible, ¿cómo debería estar organizando mi CSS en gwt, para que no termine con un grupo de estilos gigante, y también sea fácil y utilizable? Me imagino que hay una manera inteligente de usar un ClientBundle para esto, pero no lo he descubierto. También creo que sería más conveniente poder hacer lo mencionado anteriormente simplemente manteniendo todo en UiBinder sin meterse con otro archivo. De cualquier manera, ¡ayúdenme antes de que esto se salga de control!

Answer 1

Sí, tienes que hacerlo en tu código detrás del archivo. Una descripción se puede encontrar aquí: Programmatic access to inline Styles.

Aquí se muestra un ejemplo:

testBinder.ui.xml

<!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 type='XXXXXXXXXXX.client.testBinder.MyStyle'> 
     .enabled { 
      color: black; 
     } 

     .disabled { 
      color: gray; 
     } 
    </ui:style> 
    <g:HTMLPanel> 
     <g:Button ui:field="button" text="ChangeButton" styleName="{style.enabled}" /> 

    </g:HTMLPanel> 
</ui:UiBinder> 

testBinder.java

package XXXXXXXXXXX.client; 

import com.google.gwt.core.client.GWT; 
import com.google.gwt.resources.client.CssResource; 
import com.google.gwt.uibinder.client.UiBinder; 
import com.google.gwt.user.client.ui.Composite; 
import com.google.gwt.user.client.ui.Widget; 
import com.google.gwt.uibinder.client.UiField; 
import com.google.gwt.user.client.ui.Button; 
import com.google.gwt.uibinder.client.UiHandler; 
import com.google.gwt.event.dom.client.ClickEvent; 

public class testBinder extends Composite { 

    private static testBinderUiBinder uiBinder = GWT 
      .create(testBinderUiBinder.class); 
    @UiField 
    Button button; 

    @UiField 
    MyStyle style; 

    interface MyStyle extends CssResource { 
     String enabled(); 

     String disabled(); 
    } 

    interface testBinderUiBinder extends UiBinder<Widget, testBinder> { 
    } 

    public testBinder() { 
     initWidget(uiBinder.createAndBindUi(this)); 
    } 

    boolean enabled = true; 

    @UiHandler("button") 
    void onButtonClick(ClickEvent event) { 
     if(enabled){ 
      enabled = false; 
      button.setStyleName(style.disabled()); 
     } 
     else{ 
      enabled = true; 
      button.setStyleName(style.enabled()); 
     } 
    } 
} 

Si hace clic en este botón, se puede ver el estilo que de acuerdo con el cambio de su definición CSS en su archivo UiBinder. (En este caso, cambiar de negro a gris un verso de visa)