GWT Css Style設定(UiBinder)

UiBinder　XMLファイルにCSS設定方法を紹介します。

何の理論説明より簡単なソースのほうは分かりやすいと思いますので、一緒に見てみましょう。

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
        .important {
            font-weight: bold;
        }
    </ui:style>
    <ui:style field="OtherCss">
        .important {
            color: red;
        }
    </ui:style>
    <g:HTMLPanel>
        Hello,
        <g:Button styleName="{style.important}" ui:field="button" />
        <g:Button styleName="{OtherCss.important}" ui:field="button2">Button2</g:Button>
    </g:HTMLPanel>
</ui:UiBinder>

このサンプルではCSSセクションを二つ定義しています、【field】名称を付けて複数のCSSセクションを定義することが可能です。使い方も簡単です、【field】名称を付けて済めます。

なお、CSS明細コードを外部ファイルに移して、UiBinderXMLに参照するだけ例を紹介します。
<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>

【src】プロパティを利用して外部CSSファイルを参照する可能です、CSSの使い方はまったく同じです。

最後、もう一つの仕様コツを紹介します。まず下記のソースを見てください。（CSSの使い方をご注意ください）
  <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>

このサンプルでは【styleName】と【addStyleName】プロパティを利用しています。
【styleName】は既存のCSS設定を上書きして設定するのです。
【addStyleName】は既存のCSS設定を保留して、新しいCSS属性を追加するのです。
よく使われる機能なので、皆さん覚えといてください。

じゃ、今後UiBinderデザイナーを開発しようとするつもりです、個人時間次第です…