GWT DockLayoutPanel

2025年3月17日 | 阅读 3 分钟

在这个布局面板中，所有子小部件都位于角或边缘。最后一个小部件占据中心空间。它也适用于 HTML 页面具有 !DOCTYPE DECLARATION 的标准模式。

GWT DockLayoutPanel 类声明

让我们看看 com.google.gwt.user.client.ui.DockLayoutPanel 的声明

DockLayoutPanel 嵌套类

Class	描述
DockLayoutPanel.Direction	它用于 addEast(Widget, double) 等，以指定将添加子小部件的方向。
DockLayoutPanel.LayoutData	它的布局数据与每个小部件相关联。

GWT DockLayoutPanel 构造函数

构造函数	描述
DockLayoutPanel(Style.Unit unit)	它创建一个空的 dock 面板。

DockLayoutPanel 常用方法

修饰符和类型	方法	描述
void	add(Widget widget)	它在 dock 的中心添加一个小部件。
void	addEast(IsWidget widget, double size)	它是 IsWidget 的重载版本。
void	addEast(Widget widget, double size)	它将一个小部件添加到 dock 的东侧边缘。
void	addLineEnd(Widget widget, double size)	它将一个小部件添加到行的末尾。
void	addNorth(Widget widget, double size)	它将一个小部件添加到 dock 的北侧边缘。
void	addSouth(Widget widget, double size)	它将一个小部件添加到 dock 的南侧边缘。
元素	getWidgetContainerElement(Widget child)	它获取包含给定子小部件的容器元素。
protected DockLayoutPanel.Direction	getResolvedDirection(DockLayoutPanel.Direction direction)	它根据当前区域设置解析指定方向。
受保护的 void	insert(Widget widget, DockLayoutPanel.Direction direction, double size, Widget before)	它将一个小部件添加到 dock 的指定边缘。
受保护的 void	onAttach()	当一个小部件附加到浏览器的文档时调用它。
受保护的 void	onDetach()	当一个小部件从浏览器的文档中分离时调用它。
void	setWidgetHidden(Widget widget, boolean hidden)	它设置是否应隐藏给定的小部件。
void	setWidgetSize(Widget widget, double size)	它更新作为参数传递的小部件的大小，只要它不是中心小部件，并更新 dock 的布局。

GWT DockLayoutPanel 示例 1

//SampleDockLayoutPanel.java

import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.Window;

/*This is the entry point method. */
 
public void onModuleLoad() { 

// Attach five widgets to a DockLayoutPanel, one in each direction. Lay // them out in ?em? units. 

DockLayoutPanel p = new DockLayoutPanel(Unit.EM); 
p.addNorth(new HTML("north"), 8); 
p.addSouth(new HTML("south"), 8); 
p.addEast(new HTML("east"),8);
 	p.addWest(new HTML("west"), 8);
 p.add(new HTML("center")); 

// Attach the DockLayoutPanel to the RootLayoutPanel. 

RootLayoutPanel rp = RootLayoutPanel.get(); rp.add(p); 

}

//SampleDockLayoutPanel.css

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}
.dockpanel td {
   border: 1px solid #BBBBBB;
   padding: 3px;
}

输出

GWT DockLayoutPanel 示例 2

//SampleDockLayoutPanel.java

  
import com.google.gwt.core.client.EntryPoint;  
import com.gwtext.client.core.Margins;  
import com.gwtext.client.core.RegionPosition;  
import com.gwtext.client.widgets.Panel;  
import com.gwtext.client.widgets.Viewport;  
import com.gwtext.client.widgets.layout.BorderLayout;  
import com.gwtext.client.widgets.layout.BorderLayoutData;  
import com.gwtext.client.widgets.layout.FitLayout;  
  
public class Test implements EntryPoint {  
  
    public void onModuleLoad() {  
        Panel panel = new Panel();  
        panel.setBorder(false);  
        panel.setPaddings(15);  
        panel.setLayout(new FitLayout());  
  
        Panel borderPanel = new Panel();  
        borderPanel.setLayout(new BorderLayout());  
  
        //add north panel  
        Panel northPanel = new Panel();  
        northPanel.setHtml("<p>north panel</p>");  
        northPanel.setHeight(32);  
        northPanel.setBodyStyle("background-color:#FFFF88");  
        borderPanel.add(northPanel, new BorderLayoutData(RegionPosition.NORTH));  
  
        //add south panel  
        Panel southPanel = new Panel();  
        southPanel.setHtml("<p>south panel</p>");  
        southPanel.setHeight(100);  
        southPanel.setBodyStyle("background-color:#CDEB8B");  
        southPanel.setCollapsible(true);  
        southPanel.setTitle("South");  
  
        BorderLayoutData southData = new BorderLayoutData(RegionPosition.SOUTH);  
        southData.setMinSize(100);  
        southData.setMaxSize(200);  
        southData.setMargins(new Margins(0, 0, 0, 0));  
        southData.setSplit(true);  
        borderPanel.add(southPanel, southData);  
  
        //add east panel  
        Panel eastPanel = new Panel();  
        eastPanel.setHtml("<p>east panel</p>");  
        eastPanel.setTitle("East Side");  
        eastPanel.setCollapsible(true);  
        eastPanel.setWidth(225);  
  
        BorderLayoutData eastData = new BorderLayoutData(RegionPosition.EAST);  
        eastData.setSplit(true);  
        eastData.setMinSize(175);  
        eastData.setMaxSize(400);  
        eastData.setMargins(new Margins(0, 0, 5, 0));  
  
        borderPanel.add(eastPanel, eastData);  
  
        Panel westPanel = new Panel();  
        westPanel.setHtml("<p>west panel</p>");  
        westPanel.setTitle("West");  
        westPanel.setBodyStyle("background-color:#EEEEEE");  
        westPanel.setCollapsible(true);  
        westPanel.setWidth(200);  
  
        BorderLayoutData westData = new BorderLayoutData(RegionPosition.WEST);  
        westData.setSplit(true);  
        westData.setMinSize(175);  
        westData.setMaxSize(400);  
        westData.setMargins(new Margins(0, 5, 0, 0));  
  
        borderPanel.add(westPanel, westData);  
  
        Panel centerPanel = new Panel();  
        centerPanel.setHtml("<p>center panel</p>");  
        centerPanel.setBodyStyle("background-color:#C3D9FF");  
  
        borderPanel.add(centerPanel, new BorderLayoutData(RegionPosition.CENTER));  
  
        panel.add(borderPanel);  
  
        Viewport viewport = new Viewport(panel);  
    }  
}  

输出