GWTウィジェット

参考

• http://code.google.com/intl/ja/webtoolkit/doc/latest/FAQ_UI.html

Resizableなレイアウト

Eclipseの新規プロジェクト作成で自動生成されるようなサンプルに示されるように、各ウィジェットをRootPanelに置いてしまうと、それは絶対位置になり、ブラウザ画面の大きさには追従しない。ブラウザ画面のリサイズに応じてレイアウトを変更するためには、LayoutPanelやDockLayoutPanelを使う必要があるようだ。

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 + "&nbsp;";
        rightStr += "R " + x + "&nbsp;";
        centerStr += "C " + x + "&nbsp;";
      }
      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);
  }
}