GWT UiBinder でスタイルを設定する

UiBinder では、 エレメント内でスタイル(CSS)を設定することができます。

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>  
2.   <ui:style>  
3.     .pretty { background-color: Skyblue; }  
4.   </ui:style>  
5.   
6.   <div class='{style.pretty}'>  
7.     Hello, <span ui:field='nameSpan'/>.  
8.   </div>  
9. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <ui:style>
    .pretty { background-color: Skyblue; }
  </ui:style>

  <div class='{style.pretty}'>
    Hello, <span ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

注意: <ui:style> はルートエレメントの直接の子要素でなければなりません。

ClientBundle に沿って CssResource インタフェースが生成されます。


利点
　・スペルミスなどをコンパイル時に見つけられる
　・CSS名が難読化されるため、他の CSS ブロックとスタイル名の衝突を防げる
　 - グローバルな CSS namespace はもういらない！

　・1つのテンプレート内で同じスタイル名を使える

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>  
2.   <ui:style>  
3.     .pretty { background-color: Skyblue; }  
4.   </ui:style>  
5.   
6.   <ui:style field='otherStyle'>  
7.     .pretty { background-color: Orange; }  
8.   </ui:style>  
9.   
10.   <div class='{style.pretty}'>  
11.     Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.  
12.   </div>  
13. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <ui:style>
    .pretty { background-color: Skyblue; }
  </ui:style>

  <ui:style field='otherStyle'>
    .pretty { background-color: Orange; }
  </ui:style>

  <div class='{style.pretty}'>
    Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

　・src 属性で外部のCSSファイルを取り込むことも可能
（MyUi.css, MyUiOtherStyle.css には pretty という名前をスタイルが定義されている）

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>  
2.   <ui:style src="MyUi.css" />  
3.   <ui:style field='otherStyle' src="MyUiOtherStyle.css">  
4.   
5.   <div class='{style.pretty}'>  
6.     Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.  
7.   </div>  
8. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <ui:style src="MyUi.css" />
  <ui:style field='otherStyle' src="MyUiOtherStyle.css">

  <div class='{style.pretty}'>
    Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

　・styleName 属性、もしくは addStyleNames 属性でスタイルを設定する

view plainprint?

1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'  
2.       xmlns:g='urn:import:com.google.gwt.user.client.ui'>  
3.   <ui:style>  
4.     .hot { color: magenta; }  
5.     .pretty { background-color: Skyblue; }  
6.   </ui:style>  
7.   
8.   <g:PushButton styleName='{style.pretty}'>This button doesn't look like one</g:PushButton>  
9.   <g:PushButton addStyleNames='{style.pretty} {style.hot}'>Push my hot button!</g:PushButton>  
10. </ui:UiBinder>  

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
      xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style>
    .hot { color: magenta; }
    .pretty { background-color: Skyblue; }
  </ui:style>

  <g:PushButton styleName='{style.pretty}'>This button doesn't look like one</g:PushButton>
  <g:PushButton addStyleNames='{style.pretty} {style.hot}'>Push my hot button!</g:PushButton>
</ui:UiBinder>

addStyleNames は複数指定可能です。