GWTウィジェット
参考
http://code.google.com/intl/ja/webtoolkit/doc/latest/DevGuideUiPanels.html
http://code.google.com/intl/ja/webtoolkit/doc/latest/FAQ_UI.html
Resizableなレイアウト
Eclipseの新規プロジェクト作成で自動生成されるようなサンプルに示されるように、各ウィジェットをRootPanelに置いてしまうと、それは絶対位置になり、ブラウザ画面の大きさには追従しない。ブラウザ画面のリサイズに応じてレイアウトを変更するためには、LayoutPanelやDockLayoutPanelを使う必要があるようだ。
LayoutPanel
子ウィジェットそれぞれについて、LayoutPanel全体領域のうちのどの部分を割り当てるかを指定する。 各子ウィジェットの割り当て領域は、他の子ウィジェットの割り当て領域とは無関係に指定できるため、以下のようなレイアウトになりうる。
LayoutPanelの全領域が子ウィジェットで覆われているとは限らない。
- 子ウィジェットどうしがオーバーラップすることがありうる。
import static com.google.gwt.dom.client.Style.Unit.*; import com.google.gwt.core.client.*; import com.google.gwt.user.client.ui.*; public class ImageViewer implements EntryPoint { public void onModuleLoad() { String leftStr = ""; String centerStr = ""; String rightStr = ""; for (int y = 0; y < 300; y++) { for (int x = 0; x < 50; x++) { leftStr += "L " + x + " "; rightStr += "R " + x + " "; centerStr += "C " + x + " "; } leftStr += "<br>"; rightStr += "<br>"; centerStr += "<br>"; } LayoutPanel layoutPanel = new LayoutPanel(); // 左0%位置から50% Widget left = new HTML(leftStr); layoutPanel.add(left); layoutPanel.setWidgetLeftWidth(left, 0, PCT, 50, PCT); // 右0%位置から50% Widget right = new HTML(rightStr); layoutPanel.add(right); layoutPanel.setWidgetRightWidth(right, 0, PCT, 50, PCT); // 上10%位置から下10%位置まで、左10%位置から右10%位置まで Widget center = new HTML(centerStr); layoutPanel.add(center); layoutPanel.setWidgetLeftRight(center, 10, PCT, 10, PCT); layoutPanel.setWidgetTopBottom(center, 10, PCT, 10, PCT); RootLayoutPanel rootPanel = RootLayoutPanel.get(); rootPanel.add(layoutPanel); } }