RootPanel と HTML 要素

RootPanel が全体のルートコンテナになります。ここに、さらにコンテナとなるパネルを含むこともできます。 そして、RootPanel あるいはその他のパネルにウィジェットが含まれます。

HTML で言えば、RootPanel は html ドキュメントのルートとなる html 要素であり、パネルは全般的に div 要素などのブロック要素となります。

コードで Widget や Panel のインスタンスを作成し、レイアウトを作成します。 そしてそれを RootPanel を用いて、ホストページと関連付けをするという手順になります。

ルートレイアウトパネル (RootLayoutPanel)

アプリケーション全体の UI レイアウトを決めるのに用いるレイアウトパネル (TabLayoutPanel、StackLayoutPanel 等) は、 ブラウザのウィンドウ (クライアント領域) のサイズが変わったことを知らないと正しく描画することができません。

このためリサイズイベント (resize event) を受け取る必要があります。

これを実現するための簡単な仕組みとして、RootLayoutPanel があります。

レイアウトパネルと利用するときの、ルートパネルとして、RootPanel ではなく RootLayoutPanel を用いることによって、 その子パネルはリサイズイベントを受け取るので、パネルを正しく描画することができるようになります。

RootLayoutPanel にパネルを追加するコードは次のようになります。

// RootPanel.get().add(p) ではなく・・・

RootLayoutPanel.get().add(p);