以編程方式將UiBinder樣式更改爲另一個UiBinder樣式

Question

簡單示例。我在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> 

我也有一個標籤，其中一個標籤也應用了。

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

在UiBinder中，有沒有一種方法可以用編程方式將樣式切換爲錯誤樣式？很高興能夠在窗口小部件中組織我的CSS，而且我還沒有找到另一種組織它的好方法。

如果我提出的問題是不可能的，我應該如何組織我的gwt中的CSS，以便最終不會產生巨大的風格，而且也很容易並且可用？我想有一個聰明的方法來爲此使用ClientBundle，但我還沒有弄明白。我也認爲只要將所有內容保存在UiBinder中而不會與其他文件混淆，就可以更方便地完成上述操作。無論哪種方式，請在出現失控之前幫助我！

Answer 1

是的，你必須在你的代碼背後做文件。可以在這裏找到描述： Programmatic access to inline Styles。

下面是一個例子：

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

如果你點擊這個按鈕，就可以看到變化的根據它的風格你的UiBinder文件中的CSS定義。 （在這種情況下，從黑色轉爲簽證詩）