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

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

<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つのテンプレート内で同じスタイル名を使える

<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 という名前をスタイルが定義されている）

<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 属性でスタイルを設定する

<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 は複数指定可能です。