GWT27开发一文档格式.docx
《GWT27开发一文档格式.docx》由会员分享,可在线阅读,更多相关《GWT27开发一文档格式.docx(14页珍藏版)》请在冰豆网上搜索。
1.3安装Eclipse4.4插件
GWTEclipse4.4插件下载要费老大劲了,必须翻墙才能下载。
具体参考GWT网站,不过GWT官网也需要翻墙才能访问。
步骤如下:
打开4.4的安装说明。
采用Eclipse在线插件安装方式。
地址为
由于内容比较简单我就不做翻译了,各位将就看吧。
2深入理解GWT的工作原理
2.1理解GWT编译器
GWT的核心是一个把Java转换成JavaScript的编译器。
把你的Javaapplication转换成等价的JavaScriptapplication。
GWT编译器大部分Java语言的语法。
GWT运行时库模拟了
Javaruntimelibrary的一个子集。
如果遇到不支持的方法或者类库,将会报错。
编译过程如下:
∙从命令行调用mainclass
com.google.gwt.dev.Compiler
∙若从AppCreator脚本创建的项目,可以用ANT运行生成的build.xml
∙若用GooglePluginforEclipse,你可以使用按钮
进行编译
编译成功后,生成包含JavaScript的目录。
每个module最终生成一个对应的目录。
C:
\gwt-2.6.1\samples\Hello>
ant
Buildfile:
build.xml
libs:
javac:
gwtc:
[java]Compilingmodulecom.google.gwt.sample.hello.Hello
[java]Compiling5permutations
[java]Permutationcompilesucceeded
[java]Linkingintowar
[java]Linksucceeded
[java]Compilationsucceeded--20.313s
build:
BUILDSUCCESSFUL
Totaltime:
22seconds
详细目录结构如下:
\bin\findwar
war
war\hello
war\hello\18EEC2DA45CB5F0C2050E2539AE61FCE.cache.html
war\hello\813B962DC4C22396EA14405DDEF020EE.cache.html
war\hello\86DA1DCEF4F40731BE71E7978CD4776A.cache.html
war\hello\A37FC20FF4D8F11605B2C4C53AF20B6F.cache.html
war\hello\E3C1ABB32E39A126A9194DB727F7742A.cache.html
war\hello\14A43CD7E24B0A0136C2B8B20D6DF3C0.cache.png
war\hello\548CDF11D6FE9011F3447CA200D7FB7F.cache.png
war\hello\9DA92932034707C17CFF15F95086D53F.cache.png
war\hello\A7CD51F9E5A7DED5F85AD1D82BA67A8A.cache.png
war\hello\B8517E9C2E38AA39AB7C0051564224D3.cache.png
war\hello\clear.cache.gif
war\hello\hello.nocache.js
war\hello\hosted.html
war\Hello.html
在上面的例子中,
war/hello/hello.nocache.js被一个主(host)HTML页面引用,从而加载Hello应用程序.上述例子中即war/Hello.html文件。
通过URL引用hello/hello.nocache.js文件。
2.2应用程序主要的文件
编译完成后可以看到如下的目录结构:
GWT1.6版本前会与此有所区别。
这些文件生成路径由GWTmoduleXML文件中内容定义的。
这些事GWT的关键文件,最终将被发布到webserver上。
2.2.1HostHTMLpage
HostHTMLPage是浏览器访问的首个页面,并且随后的文件将通过此页面被下载(加载到客户端)。
为了保证Application文件被正确加载,必须包含引导脚本(bootstrap)的<
script>
标记(详见下)。
CSS文件则以<
link>
标记引用进来,或者以<
stylesheet>
标记引用在模块定义XML文件中
脚本文件也可以从该站点的其他目录加载。
但一般来说默认起始页面一般来说是GWT程序的加载入口点。
以Hello为例格式如下:
<
html>
<
head>
metahttp-equiv="
content-type"
content="
text/html;
charset=UTF-8"
>
linktype="
text/css"
rel="
stylesheet"
href="
Hello.css"
title>
/title>
/head>
body>
scripttype="
text/javascript"
language='
javascript'
src='
hello/hello.nocache.js'
/script>
!
--Alongwithpagetitleandtableheadersdefined-->
/body>
/html>
2.2.2TheBootstrapFile
在WAR中有个以模块名加上后缀
.nocache.js的文件。
这是GWT的引导JS文件(bootstrapfile)。
通常位于war/<
app_name>
目录。
该文件的文件名可以在模块定义XML文件中进行配置(通过rename-to
attribute重命名)。
这个文件的作用是帮助客户端加载各不同浏览器、语言或其他客户化规则指定的对应文件。
这些文件以名称为<
md5>
.cache.html方式存储的。
HostHTMLpage引用了该文件当浏览器访问该网页时,首先会下载bootstrap文件。
然后bootstrap中的脚本算出当前的浏览器和语言等环境变量,确定最终加载的application文件
2.2.3ApplicationFiles
它是以<
.cache.html结尾的文件一般位于war/<
它和bootstrap脚本一样是GWT生成的WAR中重要的文件。
一个文件对应于一种语言和一种浏览器。
更复杂的情况是加上一种客户化配置。
另外一种application文件在GWT项目中不是必须,它以<
.gwt.rpc
结尾。
仅当使用GWTRPC并支持用于通过RPC进行typestransferred的Serializable接口。
这个序列化策略文件需要被你的RPC
RemoteServiceServlet访问到,其调用语句为ServletContext.getResource()
。
2.2.4公共资源
公共资源文件包括:
图像文件,CSS,XML可放置于任何war的子目录。
在GWTmoduleXML文件中定义了这个目录。
资源文件将被复制到war/<
文件夹。
最佳实践也建议把资源放置于该目录,这与
Servlet2.5APIspecification兼容,这使得部署在Servlet服务器上时会变得更容易。
如果使用了
ClientBundle
生成的bundles位于war/<
2.3PerfectCaching技术
GWT使用了名为“PerfectCaching”的优化技术。
你可能留意到编译结果脚本文件名包含“.nocache.js”后缀。
剩下的文件包含"
.cache.html"
后缀。
这些提示符用来配置你的webserver来实现“perfectcaching”。
底层脚本的命名规则是(<
.nocache.js),GWT文件把MD5码包含在文件中,是在编译过程中生成的。
底层脚本包含一张查找表用来找到正确的<
.cache.html文件。
当修改源代码后,部署文件的文件名是随时变化的。
客户端可以访问那些被缓存的文件而不需要重行加载它们。
资源文件将被缓存;
JS脚本是不能被缓存的,因为它包含了查找表,所以总在变化。
如果规则在ApacheHTTPserver上配置,可以在.htaccess配置文件中找到如下关于mod_expires和mod_headers定义:
Files*.nocache.*>
ExpiresActiveon
ExpiresDefault"
now"
HeadermergeCache-Control"
public,max-age=0,must-revalidate"
/Files>
Files*.cache.*>
nowplus1year"
2.4GWT编译选项
在命令行输入命令可查看所有选项:
java-cpgwt-dev.jarcom.google.gwt.dev.Compiler
在任何版本的GWT中都可以查看选项。
3Eclipse中创建GWT工程
点击工具栏上的g图标,下拉新建WebApplicationProject。
填写工程和包的名字。
若打上生成示例的勾,就能产生HelloAjax代码。
完成后,代码目录如下:
4Eclipse调试GWT程序
选择SuperDev模式
命令行处出现如下报错,请不用理睬。
原因是无法连接app网站进行版本检查。
在命令行位置出现调试提示信息
点击鼠标右键可直接在Chrome中打开。
或者复制URL,手动打开浏览器。
打开后界面出现了正在编译的提示:
执行了编译,生成JS和war。
在服务端代码上增加断点:
点击Send按钮后触发了断点:
点击此处的按钮可以执行重编译和页面刷新。
使用GWT.log可以打印调试信息。