GWT・GAE個人メモ

GWTでウィジェットを配置するとなるとGUIビルダもないし(あるけど有料)いろいろと面倒なイメージがあるっぽい。

けど現実はGoogle Pluginでプロジェクトを作ると嫌でもついてくるサンプルにもあるように、

ホストページの要素にidを振りさえすればそのidの要素にウィジェットを挿入できるのでウィジェットの配置そのものはHTMLエディタさえあれば十分だったりする。

↓こんなふうに

RootPanel.get("id").add(control);

でもこれには問題があって、要素の後ろにウィジェットを継ぎ足すだけなのでその要素に文字列なんか入れてたりするとそのまま残ってしまう。

これでは実質空の<div>や<span>くらいしか使い物にならない、ここにこんなウィジェットが入るよって説明を入れたい場合に困るので(あるのか？ｗ)、ウィジェットを入れる前に要素の中身を削除するこんなコードを入れると要素の中身が消えるのでどれだけ説明をいれてもおｋ

RootPanel.get("id").getElement().setInnerHTML("");

でもここまでくるとどうせならボタンなら<input type="submit">なり<botton>なり、テキストボックスなら<input type="text">のように表現したいと思えてくることはないだろうか(俺だけ?)、もしあるとしたら上記のコードでは対応できない、なぜなら要素の中身は消えても要素は残ってるので、HTMLボタンの中にさらにボタンウィジェットを追加することになって結構悲惨なことになる(興味があったらいちどやってみてほしい)

今まではコントロールの外側にspan要素をはさんでそっちにidを振ることでお茶を濁していたのだが、やっぱりHTMLが汚いしウィジェットが増えてくるとコードも汚くなる。

要素とウィジェットをそのまま差し替えることができたら結構いろいろと便利なのになぁと思って試行錯誤してできたのがこれ

public static void replaceWidget(String id, Widget widget) {
 Element oldnode = DOM.getElementById(id);
 Element newnode = DOM.createSpan();
 newnode.setId(id);
 oldnode.getParentElement().replaceChild(newnode, oldnode);
 RootPanel.get(id).add(widget);
}

要するに親要素をとってきてreplaceChildであらかじめ作っておいたspan要素と元の要素を差し替えただけ。

こんな単純なコードを思いつくのにどれだけ時間かかってるんだよ俺・・・orz

これができるようになると今度はホストページのフォーム要素を片っ端からウィジェットに変換してまとめて処理できたら楽になるんじゃね？と考えて作ったのがこれ

・・・いや、自分で作っておいてなんだがもう何も言うまい・・・orz