レイアウト

参考

Mail Sample Application

Resizableなレイアウト

Eclipseの新規プロジェクト作成で自動生成されるサンプルではRootPanelにボタンを置いているが、こうしてしまうとそれは絶対位置になり、ブラウザ画面の大きさには追従しない。ブラウザ画面のリサイズに応じてレイアウトを変更するためには、RootLayoutPanelを使い、その中で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);
  }
}

TabLayoutPanel

普通のタブ

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

    TabLayoutPanel layoutPanel = new TabLayoutPanel(4, EM);

    Widget left = new HTML(leftStr);
    layoutPanel.add(left, "left");
    
    Widget center = new HTML(centerStr);
    layoutPanel.add(center, "center");
    
    // 右側20ピクセル
    Widget right = new HTML(rightStr);
    layoutPanel.add(right, "right");

    
    RootLayoutPanel rootPanel = RootLayoutPanel.get();
    rootPanel.add(layoutPanel);
  }
}

その他のレイアウト

DeckLayoutPanel

カードデッキ（トランプの山）のように、複数の子ウィジェットを格納するが、表示するのはその中の一つのみ。どれを表示するかはプログラム側で制御し、ユーザが直接操作することはできない。

import com.google.gwt.core.client.*;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.ui.*;

public class ImageViewer implements EntryPoint {
  public void onModuleLoad() {

    RootLayoutPanel rootPanel = RootLayoutPanel.get();
    
    final DeckLayoutPanel deckLayoutPanel = new DeckLayoutPanel();    
    
    Panel layoutPanel1 = new AbsolutePanel();
    Panel layoutPanel2 = new AbsolutePanel();
    deckLayoutPanel.add(layoutPanel1);
    
    Button button1 = new Button("button1");
    button1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        deckLayoutPanel.showWidget(1);
      }
    });
    layoutPanel1.add(button1);
    deckLayoutPanel.add(layoutPanel2);
    
    Button button2 = new Button("button2");
    button2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        deckLayoutPanel.setWidget(null);
      }
    });
    layoutPanel2.add(button2);
    
    rootPanel.add(deckLayoutPanel);
    deckLayoutPanel.showWidget(0);
  }
}

Upload page content

GWT/Widget/Layout