LayoutPanelはコンパイルされるとどうなるか
LayoutPanelと、LayoutじゃないPanelを混在させると、意図したレイアウトにならないことが多くて困ってます。
どうもちゃんと理解できていないので、理解をすすめるべく、コンパイルされたhtmlを見てみることにします。
以下で、DockLayoutPanelでJavaのコードとhtmlコード両方を確認してみます。
Javaコード
DockLayoutPanel panel = new DockLayoutPanel(Unit.PX); panel.setStyleName("panel"); panel.addWest(new Button("west-100"), 100); panel.add(new Button("center")); RootLayoutPanel.get().add(panel);
コンパイルされたhtml
コメントは、後から挿入したものです。
<!-- RootLayoutPanel start--> <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; "> <div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; "> </div> <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; "> <!-- DockLayoutPanel start --> <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; " class="panel"> <div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; "> </div> <!-- west start (※1) --> <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; bottom: 0px; width: 100px; "> <button type="button" class="gwt-Button" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; "> west-100 </button> </div> <!-- west end --> <!-- center start(※2) --> <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 100px; top: 0px; right: 0px; bottom: 0px; "> <button type="button" class="gwt-Button" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; "> center </button> </div> <!-- center end --> </div> <!-- DockLayoutPanel end --> </div> </div> <!-- RootLayoutPanel end -->
基本はposition:absoluteで四方に0pxが指定されたものをベースに構成されているようです。
west要素(※1)とcenter要素(※2)が要注目です。素のLayoutpanelはtop/bottom/left/rightの四方に0pxが指定されます。
これに対し、west要素のdivはright指定がなく、代わりにwidthがsizeで指定した値になっています。
また、center要素のdivはwestのsize100pxぶんをleftに指定しています。
これでDockLayoutのようなことが実現されているのですね。
