标记来实现。为各种页面元素提供表格式对其布局。
FlexTable
2.2布局Panel
GWT从版本2.0开始改良了布局系统，使之更加快速和稳定。
RootLayoutPanel每个采用GWT布局管理的唯一根对象，其父对象是LayoutPanel。
通常可以使用此对象作为其他panel的容器，同时使用DockLayoutPanel来填充浏览器页面区域。
语法如下：
DockLayoutPanelappPanel=newDockLayoutPanel（Unit.EM）;
RootLayoutPanel.get（）.add（appPanel）;
LayoutPanel是所有布局类的基类。
与之最类似的是AbsolutePanel。
但是最大的区别是，LayoutPanel允许其子界面定义绝对位置，请看下面例子:
Widgetchild0,child1,child2;
LayoutPanelp=newLayoutPanel（）;
p.add（child0）;p.add（child1）;p.add（child2）;
p.setWidgetLeftWidth（child0,0,PCT,50,PCT）;//Leftpanel
p.setWidgetRightWidth（child1,0,PCT,50,PCT）;//Rightpanel
p.setWidgetLeftRight（child2,5,EM,5,EM）;//Centerpanel
p.setWidgetTopBottom（child2,5,EM,5,EM）;
效果如下：
DockLayoutPanel它与DockPanelwidget有相同的作用。
通常在构建页面整体布局时你会用到它。
请看下面例子：
DockLayoutPanelp=newDockLayoutPanel（Unit.EM）;
p.addNorth（newHTML（"header"）,2）;
p.addSouth（newHTML（"footer"）,2）;
p.addWest（newHTML（"navigation"）,10）;
p.add（newHTML（content））;
效果如下：
DockLayoutPanel有几点注意：
1）嵌套的所有子UI必须持久化的，也就是构造函数需要特殊处理。
2）需要所有子UI都定义大小，除了最后一个UI，因为它讲小号页面的剩余部分空间。
SplitLayoutPanel和DocklayoutPanel是比较类似的，实际上是其子类。
它带有一个可以通过鼠标拖拽的分割条。
请看下面例子：
SplitLayoutPanelp=newSplitLayoutPanel（）;
p.addWest（newHTML（"navigation"）,128）;
p.addNorth（newHTML（"list"）,384）;
p.add（newHTML（"details"））;
StackLayoutPanel类似于outlook左侧导航，一次只能展开一个stack的子页面。
请看下面例子：
StackLayoutPanelp=newStackLayoutPanel（Unit.EM）;
p.add（newHTML（"thiscontent"）,newHTML（"this"）,4）;
p.add（newHTML（"thatcontent"）,newHTML（"that"）,4）;
p.add（newHTML（"theothercontent"）,newHTML（"theother"）,4）;
效果如下：
TabLayoutPanel是带有标签页的Panel。
请看下面例子：
TabLayoutPanelp=newTabLayoutPanel（1.5,Unit.EM）;
p.add（newHTML（"thiscontent"）,"this"）;
p.add（newHTML（"thatcontent"）,"that"）;
p.add（newHTML（"theothercontent"）,"theother"）;
效果如下：
注意点：
2.3关于布局Panel的注意点
动画效果
Panel只要继承AnimatedLayout,如LayoutPanel,DockLayoutPanel,和SplitLayoutPanel,都可动画显示其子Panel。
首先你需要设置动画状态，然后调用animate（）函数。
RequiredResize和ProvidesResize
这两个事件是可以从框架顶层传递下来处理页面大小改变的函数。
大部分情况下，你无需知道空间在什么时候调用onResize（）方法。
浏览器和布局引擎帮你做了这部分工作。
当你的空间包含了动态个数个对象时，该控件占用的位置将会变化。
这时，布局引擎无法通过onResize（）及时响应界面的变化。
将用到其他技术来实现。
当一个panel实现ProvidesResize接口时，就希望其所有子widgets都实现该接口。
这样才能很好得处理LayoutPanel.onResize（）事件。
自定义的组建，当包含一个widget实现了RequiredsResize，你需要继承ResizeComposite来作为这个组建的基类。
这样就能为其子类提供resize时间。
使用标准模式
GWT从2.0开始，要求工作在标准模式下。
HTML页面定义时需要在开头加上
DOCTYPEhtml>。
由于有些GWTpanel在标准模式下的行为和想象的不一样，所以需要特别注意。
尤其是tablerender相关的。
CellPanel（HorizontalPanel,VerticalPanel,DockPanel）都使用了表格单元。
它们在标准模式下能显示，只不过其子对象的位置不太一样。
子对象的宽和高不会起作用，而是跟着单元格的宽高来走。
而且在浏览器为表格分配行和列空间时的算法不同，也决定了显示效果的不同。
你可以使用DockLayoutPanel替代DockPanel；用FlowPanel替代VerticalPanel。
但是HorizontalPanel有些难办，有时候可以直接用DockLayoutPanel替代。
不行的话依然用HorizontalPanel算了。
StackPanel在标准模式下不能正常工作，请使用StackLayoutPanel替代。
SplitPanel（HorizontalSplitPanel,VerticalSplitPanel），在标准模式下问题很多。
用SplitLayoutPanel来替代。
2.4GWT2.0布局系统
目标：
●完美的可预知的行为，精确的布局。
即使加上CSS效果，如边框边距等，也能很好工作。
●在标准模式下正常工作。
●让浏览器布局引擎处理大部分布局。
手动调整可适当使用。
●平滑自动的动画效果。
非目标：
●在quirks模式下工作。
●swing样式的布局“preferredsize”风格对浏览器是无法跟踪的。
●所有控件都包含在布局中，构建桌面程序类似的布局。
Layout类包含了底层逻辑用来处理不同浏览器的布局。
这是面向widget的，直接操作DOM元素的类。
大部分应用使用该类是没有问题的。
但是对于widget库的作者来说，还需要提供可改写的接口。
基于约束的布局算法。
GWT2.0布局系统构建在基于CSS的基础上。
主要使用了left,width,height,right,bottom这些元素。
请看下面例子：
.parent{
position:
relative;/*toestablishpositioningcontext*/
}
.child{
position:
absolute;left:
1em;top:
1em;right:
1em;bottom:
1em;
}
在本例子中，子对象会自动占据父对象的空间。
最小是1em空间。
上面任何两个属性（任两个轴向）形成了一对约束，提供了一些有意思的约束。
当你混合使用em和%时，尤其会显得有趣。
3实战Panel
3.1应用举例
下面会举例进行描述几个场景的布局方式。
会用到UiBinder模板语言进行描述。
1）基本布局
页面布局是有个页面头，左侧导航页面，右侧带滚动条页面。
DockLayoutPanelunit='EM'>
northsize='4'>
Label>Header
Label>
north>
westsize='16'>
Label>Navigation
Label>
west>
center>
ScrollPanel>
Label>ContentArea
Label>
ScrollPanel>
center>
DockLayoutPanel>
你需要把这些代码放在实现ProvidesResize的容器内。
最常用的是RootLayoutPanel。
下面的代码说明了其用法：
interfaceBinderextendsUiBinder{}
privatestaticfinalBinderbinder=GWT.create（Binder.class）;
publicvoidonModuleLoad（）{
RootLayoutPanel.get（）.add（binder.createAndBindUi（））;
}
2）分栏
SplitLayoutPanel和DockLayoutPanel比较类似。
需要注意的是它只支持像素作为单位。
在上述基础上，可以加上一个分栏，效果如下：
DockLayoutPanelunit='EM'>
northsize='4'>
Label>Header
Label>
north>
center>
SplitLayoutPanel>
westsize='128'>
Label>Navigation
Label>
west>
center>
ScrollPanel>
Label>ContentArea
Label>
ScrollPanel>
center>
SplitLayoutPanel>
center>
DockLayoutPanel>
3）布局动画
布局的动画需要先创建一组constraint，然后变哼其的一个状态。
下面的例子创建了一个子控件，位于顶部。
随后设置其高度为0，也就是隐藏了该空控件。
调用LayoutPanel.forceLayout（）修正其初始化状态。
panel.setWidgetTopHeight（child,0,PX,0,PX）;
panel.forceLayout（）;
下面是让控件在500ms内变成2em的方法：
panel.setWidgetTopHeight（child,0,PX,2,EM）;
panel.animate（500）;
4）实现RequiresResize
控件实现RequiresResize接口后，可以使用RequiresResize.onResize（）方法处理大小改变的事件。
如果你的控件包含在Composite中，相应的方法是ResizeComposite。
classMyWidgetextendsResizeComposite{
privateLayoutPanelp=newLayoutPanel（）;
publicMyWidget（）{
initWidget（p）;
}
}
5）子widget可见性
Layout类把所有子元素以“包含”的方式组织起来以便有效工作。
一种实现方式是，当你调用UIObject.setVisible（boolean）时，在LayoutPanel中的控件虽然被隐藏，但是依然会响应鼠标事件。
为此，你需要使用LayoutPanel.getWidgetContainerElement（Widget），然后设置起不可见。
请看下面代码：
LayoutPanelpanel=...;
Widgetchild;
panel.add（child）;
UIObject.setVisible（panel.getWidgetContainerElement（child）,false）;
6）使用LayoutPanel，而不用RootLayoutPanel
大部分情况下，你需要使用RootLayoutPanel或者其他类型的布局面板，这些面板都已实现了ProvidesResize接口。
在普通的面板如FlowPanel或者RootPanel中添加子面板时，你需要设置其大小，类似：
LayoutPanelpanel=newLayoutPanel（）;
RootPanel.get（"someId"）.add（panel）;
panel.setSize（"20em","10em"）;
某些情况下，RootLayoutPanel不能像RootPanel那样提供包含某种可变元素的方法。
因为它无法知道可变元素是否因被浏览器改变大小而改变。
这时如果你需要处理此类事件，你需要手动处理。
同样适用于PopupPanel和DialogBox，下面的例子说明了如何在DialogBox中使用SplitLayoutPanel的方法（不使用PopupPanel）:
SplitLayoutPanelsplit=newSplitLayoutPanel（）;
split.addWest（newHTML（"west"）,128）;
split.add（newHTML（"center"））;
split.setSize（"20em","10em"）;
DialogBoxdialog=newDialogBox（）;
dialog.setText（"caption"）;
dialog.add（split）;
dialog.show（）;
7）Tables和Frames
和控件在添加后不能自动填充该布局的空间。所以你必须明确的指出其宽和高。
下面的例子说明了RichTextArea位于
GWT27开发三.docx
