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 + "&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);
  }
}

=== DockLayoutPanel ===

Swingで言うところのBorderLayout。指定方法は以下のサンプルで一目瞭然

{{{
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>";
    }

    DockLayoutPanel layoutPanel = new DockLayoutPanel(PCT);

    // 左側20%
    Widget left = new HTML(leftStr);
    layoutPanel.addWest(left, 20);

    // 右側20%
    Widget right = new HTML(rightStr);
    layoutPanel.addEast(right, 20);

    // 残り
    Widget center = new HTML(centerStr);
    layoutPanel.add(center);
    
    RootLayoutPanel rootPanel = RootLayoutPanel.get();
    rootPanel.add(layoutPanel);
  }
}

}}}