bufferings

GWT2.0 の UiBinder　で　HorizontalPanel　に　Alignment　を指定する方法

GWT | 21:30 |

UiBinder ナニコレ

GWT2.0 から UiBinder という機能があって。

Xml でレイアウトを決めることができる。

GWT1.7 までは Swing のようにレイアウトを Java で書いてたんだけど。

僕はそれが気に入っていて。「UiBinder？ナニソレ？別に。」だった。

でも色々な方が「UiBinder いいよ」というので

頑張ってドキュメント読んで使ってみた。(GWT2.0のドキュメントは英語しかない)

結果。

「UiBinder？ナニコレ？スゴイ！」

今までゴリゴリと書いてたレイアウト用のコードがなくなるということは。

こういうことだったのか！すごい。そして自分の想像力のなさに切なくなり。orz

他にもイベントハンドラーの登録、 CSS クラスのオブジェクト化、リソースバンドル等。

今思えば退屈なコードの繰り返しだった部分を吸い込んでくれるのだ。

コードがスッキリ。ビバドライ！

Declarative Layout with UiBinder - Google Web Toolkit — Google Developers

UiBinder の Attribute と Setter

UiBinder の Xml の属性には Widget の Setter を指定することができる。

例えば Widget に setTitle という属性がある場合は

<g:Label title="つーるちっぷだよ">ラベルだよ</g:Label>

な感じで指定することができる。

もちろん自分で適当に作った Widget クラスの Setter も大丈夫。

HorizontalPanel の Alignment

そんなわけで便利な Attribute なのだが。

XML Attribute に指定できるのって文字列だよね？

HorizontalPanel には setHorizontalAlignment という Setter があるけど。

このパラメータは文字列じゃなくて HorizontalAlignmentConstant クラスのインスタンスなのだ。

さらに HorizontalPanel には setCellHorizontalAlignment というメソッドもあるけど。

このパラメータには HorizontalAlignmentConstant に加えて、子 Widget も渡さないといけない。

なので UiBinder から HorizontalPanel に horizontalAlignment を指定するのは無理だよなぁ・・・。

と諦めてた。

ということで

右下寄せにしたい場合は、結局こんな風に ui:field を親子に指定して。

  <g:HorizontalPanel ui:field="headerPanel">
    <g:HTMLPanel ui:field="linkPanel">
      <a
        href="http://code.google.com/p/ktrwjr/"
        target="_blank"
        style="font-size: 80%; padding-right: 3px;">Kotori Web JUnit Runner (Google Code)</a>
    </g:HTMLPanel>
  </g:HorizontalPanel>

Java 側で指定してた。

  @UiField
  HorizontalPanel headerPanel;

  @UiField
  HTMLPanel linkPanel;

  public KtrWjrTitlePanel() {
    initWidget(uiBinder.createAndBindUi(this));

    headerPanel.setCellHorizontalAlignment(
      linkPanel,
      HorizontalPanel.ALIGN_RIGHT);
    headerPanel.setCellVerticalAlignment(
      linkPanel,
      HorizontalPanel.ALIGN_BOTTOM);
  }

レイアウトがロジックにはみ出していて気持ち悪いなぁと思いつつ。

まぁ、いつか対応するだろう。と思ってた。

CellPanelParser 発見

なんとなく GWT のソースを読んでいて uibinder パッケージに、気になるのを見つけた。

その名も「CellPanelParser」。

HorizontalPanel は CellPanel を継承してるので「関係あり？」と思って見てみたワケ。

どうやら horizontalAlignment や verticalAlignment を指定できるっぽい。

既にそういう機能はあったんだね

HorizontalPanel　に　Alignment　を指定する方法

で、あれこれ試行錯誤しつつたどり着いた結果が

コレダ・・・

  <g:HorizontalPanel>
    <g:cell
      horizontalAlignment="ALIGN_RIGHT"
      verticalAlignment="ALIGN_BOTTOM">
      <g:HTMLPanel>
        <a
          href="http://code.google.com/p/ktrwjr/"
          target="_blank"
          style="font-size: 80%; padding-right: 3px;">Kotori Web JUnit Runner (Google Code)</a>
      </g:HTMLPanel>
    </g:cell>
  </g:HorizontalPanel>

これで、このパネルの Java クラスにレイアウト用のコードが必要なくなったー！

g:cell タグで囲んで horizontalAlignment を HasHorizontalAlignment のフィールド名で指定する。

という感じ。VerticalAlignment も同様だし、VerticalPanelも同様。

やったねー。