UIBinderの記述例

UIBinderのXML記述サンプル

UIBinderについては、まだ情報が不足していますから下記にメモ書き程度に書いていきます。

テキストエリア

ボタン

リストボックス

visibleItemCount→1:コンボボックス、2以上:リストボックスの表示数

<g:ListBox ui:field='listBox' visibleItemCount='1'/>

リストボックスの内容はJavaで動的に生成（addItemメソッド）すればよい。

ラジオボタン

• FormPanelの子要素として存在しないといけないようです。
• ラジオボタンのグループはnameで指定します。
• Javaからアクセスするためには、ui:fieldを指定します。
• Java側からは、ラジオボタンの選択部分はgetValue()で入手することになります。

       <g:FormPanel ui:field="form">

<g:VerticalPanel>

<g:RadioButton ui:field="aaa" name="fruit">apple</g:RadioButton>

<g:RadioButton name="fruit">banana</g:RadioButton>

</g:VerticalPanel>

</g:FormPanel>

FlexTable

ウェブアプリケーションでは、画面レイアウトにうまくテーブルを利用するのがコツです。GWTでは、FlexTableという使いやすいテーブルのウィジェットがありますので、これを使いこなしましょう。テーブルの上には、テキストの他、ウィジェットも載せることができます。

UIBinder

<g:FlexTable>ui:field="tbl"</g:FlexTable>

Javaコード

@UiField

FlexTable tbl;

tbl.setText(0,0,"あああああ");

tbl.setText(0,1,"いいいいい");

タブパネル

下記のように書けばよいですが、見た目がシンプルですのでスタイルシートなどでレイアウトを変更することが必要です。下記の例では、各タブにHTML要素を埋め込んでいますが、べつに普通にWidgetを埋め込むのもオッケイです。

<g:TabLayoutPanel ui:field="tabPanel" barUnit="PX" barHeight="60" width="300px" height="150px">

        <g:tab>

            <g:header>UiBinder Tab 1</g:header>

            <g:HTML>tab </g:HTML>

        </g:tab>

        <g:tab>

            <g:header>UiBinder Tab 2</g:header>

            <g:HTML>tab 2</g:HTML>

        </g:tab>

        <g:tab>

            <g:header>UiBinder Tab 3</g:header>

            <g:HTML>tab 3</g:HTML>

        </g:tab>

    </g:TabLayoutPanel>