2011年4月8日金曜日

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

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


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

  1. <<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>  
  2.   
  3.   <ui:style type='com.my.app.MyFoo.MyStyle'>  
  4.     .redBox { background-color:pink; border: 1px solid red; }  
  5.   
  6.     .enabled { color:black; }  
  7.     .disabled { color:gray; }  
  8.   </ui:style>  
  9.   
  10.   <div class='{style.redBox} {style.enabled}'>I'm a red box widget.</div>  
  11.   
  12. </ui:UiBinder>  


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


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

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

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

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

  1. public class MyFoo extends Widget {  
  2.   
  3.   interface MyStyle extends CssResource {  
  4.     String enabled();  
  5.     String disabled();  
  6.   }  
  7.   
  8.   @UiField MyStyle style;  
  9.   
  10.   /* ... */  
  11.   
  12.   void setEnabled(boolean enabled) {  
  13.     getElement().addClassName(enabled ? style.enabled() : style.disabled());  
  14.     getElement().removeClassName(enabled ? style.disabled() : style.enabled());  
  15.   }  
  16. }  



 

0 件のコメント:

コメントを投稿