Cambia stile UiBinder in un altro stile UiBinder Programmaticamente

Question

Esempio semplice. Ho 2 stili dichiarati nel 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> 

Ho anche un'etichetta che viene applicata anche uno di loro.

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

All'interno UiBinder, c'è un modo che sarei stato in grado di andare sulla programatically passare lo stile allo stile errore? È bello poter organizzare il mio CSS proprio lì nel widget, e non ho trovato un altro buon modo di organizzarlo.

Se quello che sto chiedendo non è possibile, come dovrei organizzare il mio CSS in gwt, in modo da non finire con un enorme pool di stili, ed è anche facile, e utilizzabile? Immagino che ci sia un modo intelligente per usare un ClientBundle per questo, ma non l'ho capito. Penso anche che sarebbe più comodo essere in grado di fare il suddetto modo semplicemente mantenendo tutto in UiBinder senza intaccare un altro file. Ad ogni modo, per favore aiutami prima che questo sfugga di mano!

Answer 1

Sì, devi farlo nel tuo codice dietro il file. Una descrizione può essere trovata qui: Programmatic access to inline Styles.

Ecco un esempio:

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()); 
     } 
    } 
} 

Se si fa clic su questo pulsante, si può vedere il suo stile cambia in base alle la tua definizione CSS nel tuo file UiBinder. (In questo caso passare da nero a grigio un visto in versi)