GWTウィジェット

参考

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);
  }
}

SplitLayoutPanel

幅調節用のドラッグ可能なスプリッタが自動追加されるDockLayoutPanel。ただし、DockLayoutPanelではパーセント指定ができたのに、なぜかSplitLayoutPanelではピクセルサイズしか指定できない。

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

    SplitLayoutPanel layoutPanel = new SplitLayoutPanel();

    // 左側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);
  }
}

StackLayoutPanel

子ウィジェットを上下にスタックして、そのいずれか一つのみを表示する、いわばタブの変形。各addで指定するサイズは、タブ部分の高さを指定するもの。

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 topStr = "";
    String bottomStr = "";
    String middleStr = "";
    for (int y = 0; y < 300; y++) {
      for (int x = 0; x < 50; x++) {
        topStr += "T " + x + "&nbsp;";
        middleStr += "M " + x + "&nbsp;";
        bottomStr += "B " + x + "&nbsp;";
      }
      topStr += "<br>";
      middleStr += "<br>";
      bottomStr += "<br>";
    }

    StackLayoutPanel layoutPanel = new StackLayoutPanel(EM);

    Widget top = new HTML(topStr);
    layoutPanel.add(top, new HTML("TOP"), 2);
    

    Widget middle = new HTML(middleStr);
    layoutPanel.add(middle, new HTML("MIDDLE"), 2);

    Widget bottom = new HTML(bottomStr);
    layoutPanel.add(bottom, new HTML("BOTTOM"), 2);
    
    RootLayoutPanel rootPanel = RootLayoutPanel.get();
    rootPanel.add(layoutPanel);
  }
}