UiBinderスタイルを別のUiBinderスタイルにプログラムで変更する

Question

簡単な例。私はUiBinderで宣言された2つのスタイルを持っています：

<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> 

また、そのうちの1つも適用されているラベルがあります。

<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定義。 （このケースでは、黒からグレーとビザの切り替え）