GWT UiBinder で定義したスタイルをコードからアクセスする

例えば、コードから動的に Panel や Grid に子要素を追加する場合、子要素に適用するスタイルを UiBinder 側に定義しておくと管理が楽になります。
この場合、Java コードから UiBinder に定義したスタイルにアクセスする必要があります。


例として、UiBinder で enabled, disabled というスタイルを定義したとします。

<<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

  <ui:style type='com.my.app.MyFoo.MyStyle'>
    .redBox { background-color:pink; border: 1px solid red; }

    .enabled { color:black; }
    .disabled { color:gray; }
  </ui:style>

  <div class='{style.redBox} {style.enabled}'>I'm a red box widget.</div>

</ui:UiBinder>

ここで定義したスタイルに Java コードからアクセスするには、


　1. UiBinder の エレメントに type 属性で owner class のインタフェースを指定

　2. owner class でインタフェースを定義します。このインタフェースには UiBinder で定義したスタイル名のメソッドを持たせる
　　メソッドの戻り値は文字列で、この文字列がスタイル名を表す

　3. @UiField アノテーションを付けて、インタフェースクラスの style という名前を変数を定義

　4. style 変数を使って、メソッドを呼び出してスタイル名を取得し、addClassName() や removeClassName(), setStyleName() の引数に指定

public class MyFoo extends Widget {

  interface MyStyle extends CssResource {
    String enabled();
    String disabled();
  }

  @UiField MyStyle style;

  /* ... */

  void setEnabled(boolean enabled) {
    getElement().addClassName(enabled ? style.enabled() : style.disabled());
    getElement().removeClassName(enabled ? style.disabled() : style.enabled());
  }
}