Vaadin - 来自北欧的 Web 应用开发利器

Vaadin-来自北欧的Web应用开发利器，第1部分:Vaadin的基本概况和基础开发Vaadin的基本功能介绍、开发环境的配置以及基础的开发技术概述王颖初,软件工程师,IBM简介：富互联网应用程序(RichInternetApplications)是一种集桌面应用程序的最佳用户界面交互功能与Web应用程序的普遍采用和快速、低成本布署以及通信的实时快捷性于一体的新一代网络应用程序。Vaadin是一个用于创建RIA应用程序的优秀开发框架，所有的代码全部采用Java语言实现，不需要编写任何JavaScript代码。它拥有种类丰富的UI界面组件库，先进的事件监听和数据绑定功能。同时它还拥有基于GWT实现的各种控件，并且没有复杂的配置，快速，易于扩展和维护。本系列文章共有两篇，将向读者介绍Vaadin的基本功能，开发流程以及Vaadin的体系结构和插件系统的使用。本文是该系列的第一部分，将向您介绍Vaadin的基本功能、开发环境的配置以及基本的开发技术。在本文的第二部分中将会向您介绍Vaadin的体系结构、运行时机制以及如何使用Add-On插件扩展系统的功能。查看本系列更多内容发布日期：2011年1月17日级别：中级Vaadin的历史和功能特性Vaadin是一款使用ApacheV2许可协议的开源产品，它由位于芬兰的ITMill公司开发。其前身是ITMill公司由2000年起开始研发的Millstone用户界面类库。2006年，ITMill公司以ITMillToolkit作为正式名称发布了它的Release4版本，这个版本中包含了全新的基于Ajax的表现层引擎，使开发人员在开发Ajax应用程序时无需关注客户端与服务器端的通讯。2007年末，ITMill使用GWT技术完全重写了ITMillToolkit的客户端界面渲染引擎并使用ApacheV2协议将其开源，版本号为ITMillToolkitRelease5。2009年春季，为了消除命名的混淆(ITMill是开发企业名称而不应是产品名称)，ITMill以Vaadin(芬兰民间传说中的一种神话生物，是女神也是一种山岭驯鹿的神话祖先)作为全新的名称发布了第六个版本，这个版本还提供了Eclipse和Netbeans插件的辅助开发工具，极大的提高了开发效率。目前最新的版本为6.4版。Vaadin6.x版包含大量的功能特性，以下为其中最重要的几点：l先进的UI组件框架：Vaadin使用Java语言编写服务器端驱动的UI组件，包含几十种内建的UI组件。可以使用HTML模版或Java代码动态设置界面组件布局。组件内置有事件-监听器模块，可以方便快捷的处理UI事件。组件拥有MVC设计模式的数据绑定机制以及输入信息校验框架。l可定制的界面外观:Vaadin使用CSS来渲染界面外观样式，支持用户自定义修改或构造全新的程序主题外观。通过使用GWT技术，Vaadin还支持浏览器的Add-on特性。l自动化的浏览器-服务器通讯:Vaadin开发的应用程序为单一Web页面的应用程序。Vaadin会自动追踪程序UI组件的状态更新，部分的刷新页面内容，并且能够缓存客户端浏览器中页面的DOM子树。l优秀的Web浏览器兼容性：使用Vaadin开发的应用程序不需安装插件即可直接在浏览器中运行，它支持浏览器后退按钮及深链接的使用，并且能够自动处理URL参数。l强大的Web应用集成能力：Vaadin可以在任意JavaEE兼容的系统中使用，它兼容JavaServletAPI2.3，并且可以作为JSR-168兼容的portlet来运行，另外它还可以嵌入在单独的HTML或JSP页面中。l优化的开发模式：开发Vaadin应用程序只需要使用Java语言即可，不需要使用JavaScript和XML配置，整个Vaadin运行时环境只需要一个Jar文件。l强化的应用程序安全性：Vaadin使用服务器进行应用程序状态管理，所有的业务逻辑代码均在服务器端运行。使用了双cookie提交模式以及双重事件过滤技术，同时拥有非法事件和请求的过滤功能。l良好的集成开发环境(IDE)：Vaadin拥有Eclipse和Netbeans的插件，可以在这两个IDE中集成应用服务器进行快速开发。生成的应用程序产品为标准的War文件。同时还支持使Firebug进行调试。l广泛的应用服务器和Web浏览器的支持：Vaadin支持JavaServletAPI2.3标准以及JSR-168Portlet规范，可以运行在任何兼容这两个标准的应用服务器上，例如Tomcat4.1+,WebLogic9.2+,WebSphere6.1+,JBoss3.2.8+,Jetty5+,Glassfish2+以及LiferayPortal4.3+等应用服务器。在浏览器方面，Vaadin支持IE6、7、8，Firefox3+,Safari3、4,Opera10以及Chrome4+等浏览器。除了上述的功能特性外,Vaadin还拥有成熟的商业技术支持服务。表1针对RIA框架的主要技术特点和商业应用开发中需要关注的几个方面，将Vaadin与其它几种非常流行的RIA开发框架做一简单比较。页码，1/21表1.Vaadin与其他RIA开发框架的功能特性比较回页首在Eclipse和Netbeans中Vaadin开发环境的配置Vaadin是一个纯Java语言的RIA开发框架，所以原则上可以使用任意的Java编辑器来进行开发。但是Vaadin提供了Eclipse和Netbeans两种环境的集成插件，使用这两个插件，我们可以在相应的IDE中高效快捷的开发Vaadin应用，本节将依次介绍如何在这两种IDE中配置Vaadin开发环境。VaadinSDK的下载和使用通过访问地址可以获得Vaadin各个版本的SDK文件,在VaadinRelease6.3版之后,针对所有平台的SDK都统一打包在一个zip文件中,本节以6.4版本为例进行介绍。在已经打开的Download页面中点击Vaadin6forallplatforms链接即可下载Vaadin6.4版的SDK压缩文件，SDK中包含开发所需的jar类库，开发文档以及一个Demo样例程序。解压下载的zip文件，可以得到下图所示的文件结构：图1.VaddinSDK内容功能特性Vaadin6.xExtGWT2.0Flex3GWT1.7ICEFaces1.8JQuery1.3.2SmartGWT1.3Wicket1.4含有种类丰富的Widget组件*******************不需要使用浏览器插件YYYYYYY不需要Javascript编程YYYYYY使用Java语言扩展框架YYYY不需要使用HTMLYYYYY不需要XML配置YYYYYY只需要进行服务器端编程YYY用户界面的业务逻辑保存在服务器上YYY框架适用于创建网站而不是应用程序YY框架适用于展示多媒体、视频和广告Y框架的开发和维护由商业公司负责YYYYYY有商业的客户支持和质量保证YYYYY开发商提供框架的专家服务支持YYY开发商提供框架的Add-On扩展功能YYY可以在商业应用中免费使用YYYYYYY使用的开源许可证Apache2.0GPLv3/CommercialMPL1.1Apache2.0MPL1.1MIT/GPLv2LGPLApache2.0页码，2/21执行start.bat(Windows平台)或start.sh(UNIX平台)后VaadinSDK会在浏览器窗口中()启动样例应用程序，在这个程序中包含了Vaadin的各种学习资料和UI组件的demo展示。图二为VaadinUI组件Demo展示程序界面，在这个展示程序中列出了各种UI组件的外观及生成代码示例。图2.VaadinUI组件Demo展示程序Eclipse下Vaadin的环境配置和应用启动配置Eclipse下Vaadin的开发环境过程非常简单，整个过程只需下载安装一个Vaadin开发Plug-in插件即可(Eclipse需为3.5GALILEO以上版本)。以下为具体过程：启动Eclipse，选择Help菜单下的“InstallNewSoftware”命令，在弹出的Install对话框中点击Add按钮，在AddSite弹出对话框的Location输入框中填入更新站点地址：，Name输入框中填入Vaadin作为站点名称后点击OK按钮,如图三所示，Eclipse会显示出这个更新站点中所有可用的功能特性。选择所有的功能特性后完成插件的安装。Eclipse下的开发环境配置便全部完成了。图3.Eclipse下的Vaadin插件安装配置页码，3/21使用Eclipse创建Vaadin项目时只需在File菜单下选择New-project-Vaadin-VaadinProject即可建立一个Vaadin工程,图4为建立本文示例工程的配置对话框。需要注意的是本文的示例使用TomcatV6作为Vaadin的运行时环境,在启动Vaadin项目之前须确保Eclipse中已经配置好了Tomcat服务器。图4.建立VaadinEclipse工程的参数配置在Eclipse中启动Vaadin项目的过程同样非常简单，在Eclipse创建Vaadin项目时会预先创建好一个VaadinApplication的实现类并配置好相应的servlet信息。启动项目只需选中项目，并在Run菜单中选择RunAs-〉RunOnServer即可在地址:{ProjectName}/(本示例程序中地址为)访问建立的Vaadin应用程序页码，4/21Netbeans下Vaadin的环境配置和应用启动使用Netbeans开发Vaadin首先需要在地址:下载Netbeans的Vaadin开发插件,使用这个插件需要NetbeansIDE6.8以上的版本。将插件下载到本地之后需要在Netbeans中安装，具体过程如下：启动Netbeans，选择Tools菜单下的“Plugins”命令，如图5所示，在弹出的Plugins对话框中切换到Downloaded面板下并点击AddPlugins按钮。在文件选择窗口中选中已经完成下载的插件文件后点击OK即可启动插件的安装。图5.Netbeans下的Vaadin插件安装配置在Netbeans中创建一个Vaadin项目需要以下步骤：l首先在Netbeans的File菜单中选择“NewProject”命令，之后在弹出的Newproject面板中选择“JavaWeb”分类中的“WebApplication”类型，点击Next按钮。l在NewWebApplication面板中填写项目名称后点击Next按钮。l在NewWebApplication面板中设定Server为Netbeans自带安装的TomcatV6，JavaEEVersion为JavaEE5,ContextPath保持不变(本示例程序中为/DW_Vaadin_Project),点击Next按钮。l如图6所示，在NewWebApplication面板中选择Vaadin作为应用程序使用的Fameworks框架,点击Finish按钮完成项目创建的全过程。图6.设定Vaadin为应用开发框架页码，5/21相对创建项目而言，在Netbeans中启动Vaadin应用非常简单，只需在Projects面板中右键点击项目，在弹出菜单中选择Run即可。默认情况下Netbeans会使用Tomcat在地址:{ProjectName}/Vaadin(本示例程序中地址为