GWT27开发三文档格式.docx
- 文档编号:19590511
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:36
- 大小:1.65MB
GWT27开发三文档格式.docx
《GWT27开发三文档格式.docx》由会员分享,可在线阅读,更多相关《GWT27开发三文档格式.docx(36页珍藏版)》请在冰豆网上搜索。
3.4.5问题5:
如何实现源代码显示?
26
1多浏览器支持
在不同的浏览器如InternetExplorer,Firefox,Chrome,andSafari上使用的DHTML语言是不一样的。
所以在编写UI时需要在每种浏览器上测试你的代码。
举例来说,GWT中的命令按钮实际上是一个看上去很像按钮的<
div>
标签渲染出来的效果。
所以保证了它在每种浏览器上都能得到想要的效果,即使是在不同的操作系统上。
在使用这种思路的情况下,CSS明显是一个很好的方法。
这样能让显示效果和方法API得以很好的分离,在使用很少CSS的前提下,实现了大多数风格的统一。
同样,使得客户端解释JS代码和网页的效率更高,占用更少的内存。
如果你想实现一种新的浏览器绑定,你可以使用以下JSNI方法:
publicstaticnativeStringgetUserAgent()/*-{
returnnavigator.userAgent.toLowerCase();
}-*/
2Panel和网页布局
GWT中Panel的作用类似于其他UI接口中的laylout,主要的区别是这里使用了HTML标记来实现对widget的层次布局。
Panel是由widgets和其他Panel组成的,这样就组成了在浏览器中的用户UI接口。
什么时候不使用Panel布局?
基于Panel的网页布局是类似于静态网页编程中的document形式的布局方法。
GWT有独特的UIbinder技术可以让空间基于模板来布局和进行消息绑定,在这种方法下就无需使用Panel布局了。
2.1基础的Panel
RootPanel
最顶层的一个Panel,可以使用RootPanel.get()方法获得这个唯一对象。
只有在这个Panel中包含了HTML中的<
body>
元素。
可以通过RootPanel.get(Stringid)方法来获取该页面上的任意对象。
FlowPanel
最简单的一种Panel。
GWT中是以<
元素来实现,若有子对象则直接嵌套。
对其方式就是HTML中最自然的排版格式。
HTMLPanel
一种简单的HTML结构,widgets会嵌入到预定义的点。
通常会在使用UiBinder模板中。
FormPanel
当需要实现HTML表单布局时,就要用到此Panel。
GWT使用了<
form>
标记来实现此Panel,保证了其所有子Panel都包含在这个标记中。
以便和服务器进行交互。
ScrollPanel
当你需要在一个Panel中创建一个可以滚动的区域时就要用到该Panel。
这种样式的Panel能很好的结合在有层次的Panel布局来中。
为页面提供额外的滚动空间。
PopupPanel
这两个Panel的作用是简单的弹出式UI,可以被嵌套使用。
其使用区间是浏览器窗口,不会打开新浏览器。
&
DialogBox
Grid&
这两个布局在GWT中是以<
table>
标记来实现。
为各种页面元素提供表格式对其布局。
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"
p.addWest(newHTML("
navigation"
),10);
p.add(newHTML(content));
DockLayoutPanel有几点注意:
1)嵌套的所有子UI必须持久化的,也就是构造函数需要特殊处理。
2)需要所有子UI都定义大小,除了最后一个UI,因为它讲小号页面的剩余部分空间。
SplitLayoutPanel和DocklayoutPanel是比较类似的,实际上是其子类。
它带有一个可以通过鼠标拖拽的分割条。
SplitLayoutPanelp=newSplitLayoutPanel();
),128);
list"
),384);
p.add(newHTML("
details"
));
StackLayoutPanel类似于outlook左侧导航,一次只能展开一个stack的子页面。
StackLayoutPanelp=newStackLayoutPanel(Unit.EM);
thiscontent"
),newHTML("
this"
),4);
thatcontent"
that"
theothercontent"
theother"
TabLayoutPanel是带有标签页的Panel。
TabLayoutPanelp=newTabLayoutPanel(1.5,Unit.EM);
),"
);
注意点:
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{
absolute;
left:
1em;
top:
right:
bottom:
在本例子中,子对象会自动占据父对象的空间。
最小是1em空间。
上面任何两个属性(任两个轴向)形成了一对约束,提供了一些有意思的约束。
当你混合使用em和%时,尤其会显得有趣。
3实战Panel
3.1应用举例
下面会举例进行描述几个场景的布局方式。
会用到UiBinder模板语言进行描述。
1)基本布局
页面布局是有个页面头,左侧导航页面,右侧带滚动条页面。
<
g:
DockLayoutPanelunit='
EM'
>
<
northsize='
4'
Label>
Header<
/g:
north>
westsize='
16'
Navigation<
west>
center>
ScrollPanel>
ContentArea<
DockLayoutPanel>
你需要把这些代码放在实现ProvidesResize的容器内。
最常用的是RootLayoutPanel。
下面的代码说明了其用法:
interfaceBinderextendsUiBinder<
Widget,BasicApp>
{}
privatestaticfinalBinderbinder=GWT.create(Binder.class);
publicvoidonModuleLoad(){
RootLayoutPanel.get().add(binder.createAndBindUi());
2)分栏
SplitLayoutPanel和DockLayoutPanel比较类似。
需要注意的是它只支持像素作为单位。
在上述基础上,可以加上一个分栏,效果如下:
SplitLayoutPanel>
128'
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"
split.add(newHTML("
center"
split.setSize("
DialogBoxdialog=newDialogBox();
dialog.setText("
caption"
dialog.add(split);
dialog.show();
7)Tables和Frames
和<
frame>
控件在添加后不能自动填充该布局的空间。
所以你必须明确的指出其宽和高。
下面的例子说明了RichTextArea位于<
iframe>
中的初始化方法。
2'
HTML>
southsize='
Footer<
south>
RichTextAreawidth='
100%'
height='
/>
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的界面元素。
从性质上属于完全客户端类型的。
所以阅读整个例子从入口点开始。
找到继承com.google.gwt.core.client.EntryPoint的类
初始化模块的函数是onModuleLoad()
找到导航树
画红线的是各种演示的导航树初始化代码。
当选择不同的演示用例时,可以看到标题的显示会发生相应的变化。
我们研究一下这是如何实现的。
因为这个页面是该应用的主页面,所以先去showcase.html中查找。
主页面中没有发现对<
title>
的任何设置,于是目标转向showcase.java
在其中一个displayContentWidget函数中找到了设置标题的语句。
把它修改成:
Window.setTitle("
Show:
"
+content.getName());
这里介绍个小技巧,在开发模式下修改好代码后,只要刷新网页,GWT能自动调用编译看到效果,非常方便。
该应用支持多语言,从下面的多选框中可以选择不同国家的语言。
随后界面会随之变化。
换成英语后,界面如下:
对于区域语言列表研究后发现,里面只包含印度,英语,法语和中文4种语言。
本来我想找个德文,可惜没有找到。
好的,问题来了,第一这个列表中的选项是如何填充进去的?
第二语言的切换是如何实现的?
找到这个列表框,看懂它的初始化和选择事件,这两个问题就解决了。
但是比这更容易解释的是为什么只有4种语言,我们知道GWT的国际化处理方法,所以去查找国际化文件就知道了。
从国际化文件夹中看到有blog,color,Error,ExampleConstants,PluralMessa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- GWT27 开发
![提示](https://static.bdocx.com/images/bang_tan.gif)