标记来实现。为各种页面元素提供表格式对其布局。
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位于
DockLayoutPanelunit='EM'>
northsize='2'>
HTML>Header
HTML>
north>
southsize='2'>
HTML>Footer
HTML>
south>
center>
RichTextAreawidth='100%'height='100%'/>
center>
DockLayoutPanel>
3.2安装samples
以GWT2.7为例,在安装包内有大量的例子可以供你学习。
进入该目录,可以找到showcase目录。
默认情况下,没有eclipse工程,所以需要安装个ant生成一个工程文件。
默认是这样的:
首先你下载ant,地址是http:
//ant.apache.org/bindownload.cgi
解压到硬盘:
把bin目录加到操作系统path下:
切换到刚刚的showcase目录运行命令:
anteclipse.generate,能自动生成eclipse工程文件。
完成后,打开eclipse,eclipse需要先安装GWT插件。
我这里使用的是4.4版本。
下面执行导入工程的操作:
点击菜单Import,出现对话框:
选中ExistingProjectsintoWorkspace(已存在的工程到工作区),点击下一步。
上图的勾去掉,这样工程就会直接引用showcase目录作为源目录。
我习惯于把文件复制到eclipse工作区,其效果一样,但是需要后续调整一些配置。
这里就不做介绍了。
3.3运行samples
该工程默认已配置好开发模式的运行和debug,只需要直接启动eclipse运行或调试就能看到测试效果。
启动后,可以看到调试工具:
你可以打开浏览器访问测试页面或者直接启动默认浏览器进行测试。
首次打开时,显示正在编译你的工程。
稍后几秒就能打开页面。
页面如下:
3.4代码解读(showcase)
本节主要讲解showcase样例的一些细节。
showcase这个例子从功能上比较全面得演示了GWT的界面元素。
从性质上属于完全客户端类型的。
所以阅读整个例子从入口点开始。
3.4.1问题1:
从何处入手?
找到继承com.google.gwt.core.client.EntryPoint的类
初始化模块的函数是onModuleLoad()
3.4.2问题2:
找到导航树
画红线的是各种演示的导航树初始化代码。
3.4.3问题3:
网页Title是如何变化的?
当选择不同的演示用例时,可以看到标题的显示会发生相应的变化。
我们研究一下这是如何实现的。
因为这个页面是该应用的主页面,所以先去showcase.html中查找。
主页面中没有发现对
的任何设置,于是目标转向showcase.java
在其中一个displayContentWidget函数中找到了设置标题的语句。
把它修改成:
Window.setTitle("Show:
"+content.getName());
这里介绍个小技巧,在开发模式下修改好代码后,只要刷新网页,GWT能自动调用编译看到效果,非常方便。
效果如下:
3.4.4问题4:
语言切换是如何实现的?
该应用支持多语言,从下面的多选框中可以选择不同国家的语言。
随后界面会随之变化。
换成英语后,界面如下:
对于区域语言列表研究后发现,里面只包含印度,英语,法语和中文4种语言。
本来我想找个德文,可惜没有找到。
好的,问题来了,第一这个列表中的选项是如何填充进去的?
第二语言的切换是如何实现的?
找到这个列表框,看懂它的初始化和选择事件,这两个问题就解决了。
但是比这更容易解释的是为什么只有4种语言,我们知道GWT的国际化处理方法,所以去查找国际化文件就知道了。
从国际化文件夹中看到有blog,color,Error,ExampleConstants,PluralMessa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
GWT27
开发
![提示](https://static.bdocx.com/images/bang_tan.gif)
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。