GWT 2.0增加的新功能 博客分类: GWT GWT浏览器CSSJavaScript设计模式
开发模式(Development Mode)
GWT2.0最大的改变是开发模式,原来的"hosted mode"被替换掉了。在2.0以前,"hosted mode"提供了调试GWT代码的能力。在GWT2.0中,在通用的浏览器中使用GWT开发插件来查看调试信息,也就是说,你现在可以在Safari、Firefox、Internet Explorer和Chrome浏览器中来开发和调试代码。
不仅如此,源代码不用必须和浏览器在相同的系统上了。例如,你可以在一个linux系统上开发和调试代码,但在一个系统上的IE中运行你的应用程序。
通过将调试过程移动到浏览器中,开发模式让每一个浏览器使用其自己的开发工具调试JAVA成为可能。例如,你现在能在FireFox中调试你的JAVA代码,同时可以使用其它工具例如Firebug来查看DOM结构和实验CSS。
开发模式也支持多浏览器的调试,你可以从一个调试会话连接多种不同的浏览器。这个改进让开发模式的会话保持无限长的时间,允许你简单地使用浏览器的刷新来观察JAVA代码改变产生的结果。它确保你的程序能够运行在所有主流浏览器,而不需要重新启动JAVA调试器。
最后,新的Eclipse Google插件包括启动和控制开发模式的流线型支持,包括一个内嵌开发模式日志信息的新视图。也可以人工启动开发模式,它使用了一个基于Swing的接口,能够运行在Eclipse之外。
速度跟踪性能分析(Speed Tracer Performance Analysis)
Speed Tracer是一个新的识别和修正WEB应用程序性能的工具。它把底层的关键数据在浏览器中可视化了,可以在你的程序运行时分析它们。使用Speed Tracer,你能更好地观察应用程序消耗的时间。
Speed Tracer把你的应用程序指标分为以下几部分:
● JavaScript的分析和执行
● 浏览器布局和绘制
● CSS的重算和选择器匹配
● DOM事件处理
● 网络资源下载
● 计时器触发
● XMLHttpRequest调用
● 等等 ...
开发人员可控制的代码分割(Developer Guided Code Splitting)
这允许你为了快速启动可以把你的GWT代码分成多个部分。想像一下,你必须下载整个视频文件才能观看它。在使用程序运行之前必须下载所有的代码,这就是现在大部分AJAX程序需要处理的事情。利用代码分割,你可以下载需要的最小部分的脚本来运行应用程序,脚本的其它部分在需要时下载。
举例来说,你创建了一个邮件程序。你的程序将会有核心部分,例如读、写邮件。然而,你也可能包含其它附属功能,例如用户信心,联系人等。使用代码分割技术,你可以设计你的程序仅下载核心功能,允许用户尽可能快的读写邮件,其它功能在需要的时候在下载它。
听起来可能很复杂,但是代码分割实际是很容易的。仅需要你的工程中需要剥离的代码部分使用GWT.runAsync()创建一个分割点,通过连续添加分割点,你能够安全地分割你的程序并确保进下载启动所需要的最少部分的代码。编译器会自动安排以后需要下载的代码片段。不像人工分离代码,GWT编译器会处理这些艰巨的工作,确保所有需要的部分被下载并保持正确的顺序。
编译器优化(Compiler Optimizations)
除了代码分割,编译器生成JavaScript的基本能力也得到了提升。对于每一个GWT新版本,我们增强编译器优化来是编译JavaScript更小更快。对于已经存在的GWT项目更有益处,因为你能够简单地升级,重新编译它,这样你的程序能运行的更快。事实上,GWT的2.0包括一些极具影响力的新的优化,我们已经听到JavaScript压缩大约在3%到20%不等。
草图编译(Draft Compile)
如果你需要经常编译成JavaScript脚本,那么你就会非常希望开发模式能够减少你的这个工作,现在你可以使用GWT编译器的新的 -draftCompile 选项,这个选项忽略了优化但是加快了编译。你要清楚,这不是用来最终用于生产环境的JavaScript,但是能节省你在非生产环境编译程序的时间。
声明用户接口(Declarative User Interfaces)
使用UiBinder, GWT现在允许你在XML中创建声明性用户接口来代替在程序中自动组装它们。XML文件支持如下的功能,让你的UI代码更小、可读性更强、容易维护和更快地开发:
● 规定局部CSS样式,不用担心重复的CSS名称。
● 使用本地HTML的混合部件,是程序更快更有效率。
● 方便资源绑定和国际化。
UiBinder也方便了程序员与熟悉XML、HTML、CSS但不熟悉JAVA的UI设计者的合作。
布局面板(Layout Panels)
在UI设计上,获得理想的外观,使用传统的HTML和CSS是很棘手的。在GWT 2.0以前,即使GWT部件也不能完全抽象出那些令人头痛的布局。GWT 2.0引入了布局面板,实际上使你创建你需要的布局成为可能。
布局面板在标准CSS之上创建一个可预测基于约束的布局系统。因为它使用CSS工作,而不是摒弃它,布局面板可以继续与你想包括的定制CSS样式一起工作。因为基于CSS的布局在浏览器渲染引擎本地处理,因此在布局过程中不需要运行JavaScript。因此,布局运行更快更流畅,你可能注意到缩放浏览器窗口的速度提升了。
就像你期望的,布局面板和UIBinder一起工作的很好。仅需要少量的XML,你就能创建复杂的布局,例如动画过度,分割器等等。
使用ClientBundle绑定资源(Bundled Resources via ClientBundle)
GWT在1.4版本中引入ImageBundle提供图像绑定。 ClientBundle把这个技术更进一步,组合和优化资源到一个下载中,例如text文件、CSS和XML。这意味着更少的网络请求,减少了程序的负担,特别是手机应用程序。
HtmlUnit测试(HtmlUnit for Testing)
对于2.0,GWTTestCase 不再使用SWT或者实际浏览器的本地代码版本来运行测试,它使用HtmlUnit作为一个内建的浏览器。因为HtmlUnit完全使用Java语言编写,在典型的测试开发阶段就不需要任何的本地代码。在开发模式下能够完全在一个Java调试器中调试GWT测试。另外,GWT提供了在不同浏览器上的测试方法,包括在开发模式下任一浏览器上运行测试的支持。