个性化阅读
专注于IT技术分析

GWT DockLayoutPanel用法

本文概述

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

GWT DockLayoutPanel类声明

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

public class DockLayoutPanel extends ComplexPanel

DockLayoutPanel嵌套类

描述
DockLayoutPanel.Direction 在addEast(Widget, double)等中使用它来指定子窗口小部件的添加方向。
DockLayoutPanel.LayoutData 其布局数据与每个小部件相关联。

GWT DockLayoutPanel构造函数

建设者 描述
DockLayoutPanel(Style.Unit unit) 它创建一个空的停靠面板。

DockLayoutPanel常用方法

修饰符和类型 方法 描述
void add(Widget widget) 它在扩展坞的中心添加了一个小部件。
void addEast(IsWidget widget, double size) 它是IsWidget的重载版本。
void addEast(Widget widget, double size) 它将小部件添加到停靠区的东边缘。
void addLineEnd(Widget widget, double size) 它将小部件添加到该行的末尾。
void addNorth(Widget widget, double size) 它将小部件添加到扩展坞的北边缘。
void addSouth(Widget widget, double size) 它将一个小部件添加到停靠区的南边缘。
Element getWidgetContainerElement(Widget child) 它获取包装给定子控件的容器元素。
受保护的DockLayoutPanel.Direction getResolvedDirection(DockLayoutPanel.Direction direction) 它根据当前语言环境解析指定的方向。
protected void insert(Widget widget, DockLayoutPanel.Direction direction, double size, Widget before) 它将小部件添加到停靠的指定边缘。
protected void onAttach() 当窗口小部件附加到浏览器的文档时会调用它。
protected void onDetach() 当窗口小部件从浏览器的文档中分离时, 将调用它。
void setWidgetHidden(Widget widget, boolean hidden) 它设置是否应隐藏给定的小部件。
void setWidgetSize(Widget widget, double size) 只要不是中央窗口小部件, 它就会更新传入的窗口小部件的大小, 并更新扩展坞的布局。

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

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

输出:

GWT DockLayoutPanel
赞(0)
未经允许不得转载:srcmini » GWT DockLayoutPanel用法

评论 抢沙发

评论前必须登录!