UiBinderにてCSSの設定をする

ウェブアプリケーションでは、ページのデザインにCSSを利用するのは常識なわけで、UiBinderでも当然利用することができます。

view plainprint?

1. <ui:style>  
2.         .important {  
3.             font-weight: bold;  
4.         }  
5. </ui:style>  
6.  <g:button stylename="{style.important}" ui:field="button"> </g:button>  

        .important {
            font-weight: bold;
        }

  

基本的な記述方法は上記のようになります。呼び出し方に注意してください。また、設定するCSSはfield属性を設定することで、呼び出しのクラス名を変更することができます。以下は、MyStyleという名前を独自に付けています。

view plainprint?

1. <ui:style field="MyStyle">  
2.         .important {  
3.             font-weight: bold;  
4.         }  
5. </ui:style>  
6.  <g:button stylename="{MyStyle.important}" ui:field="button"> </g:button>  

        .important {
            font-weight: bold;
        }

  

CSSの思想はデザインと画面設計を分離させることですから、UIBinderでも従来同様、CSSのスタイル情報を独立させて外部ファイルとして呼び出すことも可能です。src属性を利用します。もちろん、fieldの指定も可能です。

view plainprint?

1. <ui:style src="My.css" field="MyStyle">  
2. </ui:style>  
3.  <g:button stylename="{MyStyle.important}" ui:field="button"> </g:button>