Hatena::ブログ(Diary)

bufferings

2010-04-05

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

| 21:30 |

UiBinder ナニコレ

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

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


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

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


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

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


結果。

「UiBinder?ナニコレ?スゴイ!」


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

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


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

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

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


Error 404 (Not Found)!!1


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も同様。


やったねー。

トラックバック - http://d.hatena.ne.jp/bufferings/20100405/1270470645