GWTでjQueryを使う その2

GWTではウィジェットの表示をした後にonLoadというメソッドが呼ばれる。
このタイミングでjQueryで各種メソッドを呼ぶようにすればよい。


のだが、物事が簡単にいかない理由は生成されるタイミング。

たとえばjQuery UIでタブを作るとしよう(実際にテストが一番できるタブにした。ネストや動的追加等があるため)。


タブを追加するメソッドとしてaddというメソッドを自作のコンポーネントに用意したとする。

単純に考えるとjQueryUIのTabsのaddを使えばよいように見える。
でもそうはいかない。


addメソッドが呼ばれるタイミングがonLoadより後なのか前なのかがわからないのだ。つまり、jQueryUIのメソッドを呼び出してよいのはonLoadがすでに呼ばれてある後だけに限られ、それ以前では静的にHTMLを生成するようにする必要がある。

実際にコードを見てもらったほうが理解が早いかな。

HogeTab tab = new HogeTab();

tab.add("hoge1",label1, "ついか1");//(1)

RootPanel.get().add(tab);

tab.add("hoge2",label2, "ついか2");//(2)

(1)のタイミングではHTMLを静的に生成しておく。まだjQueryUIは起動していない。
(2)のタイミングではすでにjQueryUIのタブになっているためにタブの追加をする。

これがわかれば大丈夫だと思う。

実装方法として1つが単純にonLoadが呼ばれる前と呼ばれた後でaddメソッドの挙動をかえるというもの。

もうひとつがonLoadが呼ばれる前まではキューに入れておいて、onLoadが呼ばれたときにjQueryUIのタブ化を実行、キューから順に取り出して追加していくという方法があると思う。

後者のほうがaddメソッドの動きを変える必要がないということで開発はしやすいかもしれないが、動的に追加していくほうがおそらく実行スピードが遅いと思われるため慎重になったほうがよいのかもしれない。