基于Vaadin的Web App开发

马雪山

摘要：移动互联网的发展和HTML5标准的出现，为App的开发提供了一种新的解决方案，基于移动设备上的浏览器运行的Web App。Vaadin是一个结合HTML5的Java web应用程序开发框架。Vaadin框架提供一组专门为移动设备优化的TouchKit组件，可以创建移动用户界面。该文介绍通过使用TouchKit开发移动Web App。

关键词：WebApp；Vaadin；Touchkit

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）03-0045-02

Mobile Web App Development Based on HTML5

MA Xue-shan

（Karamay Vocational and Technical College，Karamay 834000， China）

Abstract： With the development of mobile Internet and the emergence of HTML 5， there is a new solution for App development， which is running the Web App on the mobile Web browser. Vaadin is a Java web application development framework. Vaadin provides a set of TouchKit components that specially optimized for mobile devices， which can create mobile user interface. This paper introduces a way to develop mobile Web App with the TouchKit.

Key words： WebApp； Vaadin； Touchkit

App（Application），是指智能手机的第三方应用程序，在智能手机、平板电脑等其他移动设备上运行的应用程序，作为移动设备功能上的扩展。当前，在智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的Native App（原生应用）；一种是基于移动设备上的浏览器运行的Web App。

App的产生与发展是依赖于移动设备的，随着智能手机的普及，尤其是自iOS和Android这两个手机操作系统的快速发展，App的发展进入了一个新的阶段，基于本地（操作系统）运行的Native App（原生应用）开始流行，Native App能够充分智能手机的功能，带来良好的人机互动的体验，支持本地资源访问，速度快。但是Native App不能跨平台使用，开发难度大、成本高。

移动互联网的发展和HTML5标准的出现，为App的开发提供了一种新的解决方案，开发基于移动设备上的浏览器运行的Web App。Web App综合了App和Web的特点，使用HTML、CSS以及JavaScript技术开发移动应用，可以轻松的实现跨平台，开发者无需在考虑复杂的设备兼容和跨平台开发语言的问题。结合HTML5，Web App可以实现很多原本Native App才可以实现的功能。从而使得开发难度和成本都大大降低。

本文将介绍一种Java web应用程序开发框架Vaadin，研究通过使用本框架来开发移动Web App。

1 Vaadin的介绍

Vaadin是一个结合HTML5的RIA（Rich Internet Applications 富互联网应用）的Java web应用程序开发框架，由位于芬兰的 IT Mill 公司开发，用来构建满足大型企业需求的Web应用程序。通过使用Vaadin框架，开发者可以很容易的创建和维护高质量的web用户界面，减少开发时间，提高用户体验，增加开发的效率。类似于开发Java传统桌面应用程序中的工具包如AWT、Swing或SWT，Vaadin在编写用户界面时使用纯Java语言开发，并且更加容易，使开发人员可以忘记这是在开发Web应用。Vaadin充分使用了AJAX技术，用其开发的浏览器应用界面可以和桌面应用程序一样响应和互动。

图1 “Vaadin应用程序架构”

它是一个纯Java开发环境，除了服务器端使用Java开发应用程序，在客户端开发者也使用Java语言开发。Vaadin客户端框架包括Google Web Toolkit（GWT），它提供了从Java语言编译成在浏览器中运行的JavaScript程序，以及一个全功能的用户界面框架。相比传统的web开发，开发人员更专注于业务逻辑的开发，尽管Vaadin 底层采用了HTML，JavaScript，AJAX等Web技术，Vaadin应用程序框架很好的隐藏了这些细节，开发人员一般无需了解上述Web技术。

图1是“Vaadin应用程序架构”，Vaadin包含一个服务器端框架和客户端引擎，服务器端作为一个运行在Java Web服务器上的Serverlet，主要的应用逻辑都在服务器端运行。客户端引擎负责在浏览器运行JavaScript代码，渲染应用程序的用户界面，将用户的交互行为传递到服务器端。Vaadin框架负责管理的浏览器中的用户界面和浏览器和服务器之间的AJAX通信。

Vaadin具有良好的可扩展性，相比基于Flash，Java applet或其他插件的Web框架，因为Vaadin客户端引擎在浏览器是以JavaScript程序运行，Vaadin框架不需要在浏览器上安装任何插件。Vaadin依赖的Google Web Toolkit支持多种浏览器，不需要担心浏览器支持的问题。Vaadin框架提供了超过400种组件，开发者可以直接通过拖动方式添加到开发项目中，除此之外还可以很方便的使用Vaadin中的一套现成的第三方用户界面组件库——add-ons组件。

2 TouchKit

2.1 TouchKit介绍

随着用户越来越多使用移动设备浏览网页，如手机和平板电脑，因此需要开发基于移动设备的网络应用。移动浏览器可以像普通浏览器一样显示网页，但在开发应用时，开发人员需要考虑如何让用户的体验更好，更适合于移动设备的特性，如屏幕尺寸，手指操作的精度，浏览器的功能等。Vaadin框架提供一个 TouchKit组件，可以为Web应用程序创建移动用户界面。就像Vaadin框架的目的是使Web应用程序像桌面一样，TouchKit的目的是允许创建的Web app的使用起来类似于本地移动应用程序。

与创建普通web用户界面的方法一样，使用TouchKit开发创建一个移动用户界面，可以使用Vaadin所有的常规组件和插件，但最重要的是，Vaadin提供一组专门为移动设备优化的TouchKit的小组件。TouchKit支持多种特殊的浏览器功能，比如地理位置、特定上下文的输入字段和主屏幕启动。对ios系统还支持闪屏。除了开发常规的基于服务端的UI组件，TouchKit还支持一个特殊的离线模式，这是一个存储在浏览器缓存中的客户端UI组件，当网络连接断开，自动开启。

2.2 开发移动WebApp考虑的问题

在开发支持移动浏览器的WebApp时，根据移动浏览器的特点，开发者需要考虑许多以下与非移动端不同的问题。TouchKit就是设计来帮助解决这些问题的组件。

1）人机界面

移动设备上使用的人机界面，与普通电脑不同。例如，手机屏幕可以很容易地旋转，在纵向和横向视图之间切换。这不只是改变显示的尺寸，而且还影响如何排列布置组件，达到最佳的用户体验。

用于用手指代替鼠标的操作，所以没有如“右键”的功能。当使用鼠标时，用户可以单击双击或右键单击，但触摸屏设备上，使用的是诸如“点击”和“长按”交互。手指手势也发挥了很大的作用，例如使用垂直下滑代表滚动，而不是一个滚动条。有些浏览器还允许使用两个或多个手指的手势。

移动设备通常没有物理键盘，而是一个可以根据上下文变化屏幕上的虚拟键盘。因此需要确保当用户在输入数据时弹出来的虚拟键盘不会挡住输入区域。

2）带宽和性能

移动互联网的连接速度往往比固定线路慢很多，其中延迟是一个重要影响因素，尤其是在高度交互的富应用程序中，通常少于100毫秒的延迟几乎不不被用户察觉，而移动网络连接通常延迟在500毫秒左右，有时更高，这就需要限制一些需要实时后台响应事件的使用。在一些组件中，如正在等待服务器返回结果时，还可以使用动画的方式来补偿延迟的时间。在低速的移动网络连接下，仅仅是加载Vaadin的客户端引擎可能就需要几秒钟，这可以通过仅编译使用的组件来解决这个问题。组件的选择也会影响性能。在TouchKit中的组件被设计成轻量级的。

3）支持移动设备的功能

在浏览器中可以使用智能手机和平板的功能接口。如位置感知和拨打电话等。

4）兼容性

目前在移动浏览器领域的 web标准发展速度很快，一些由顶级浏览器制造商推出的特殊约定，在未来几年内，可能逐步形成新的web标准，而其他的浏览器在标准化上会跟随这些主要浏览器平台的引导。WebKit 是一个开源的浏览器引擎，已经成为领先的移动浏览器核心，例如 Google 的Android、 Apple 的iPhone等所使用的移动浏览器引擎，都是基于WebKit。TouchKit的的浏览器主要支持WebKit。TouchKit4 还支持Windows Phone的Internet Explorer。

2.3 TouchKit的使用

1）TouchKit的安装和创建项目

TouchKit的开发平台主要是Eclipse，首先需要安装好Vaadin插件（Vaadin Plugin for Eclipse）。然后在vaadin官网上的vaadin.com/addon/vaadin-touchkit目录下载安装一个TouchKit的Eclipse插件。此外，也可以通过Maven或Ivy的方式安装。

创建TouncKit项目的方式有两种，一种是使用Maven的Archetype快速生成，或者是使用Vaadin插件创建一个普通的Vaadin项目，然后把它调整为一个TouchKit项目。

2）TouchKit 的UI组件

TouchKit项目需要定义一个继承TouchKitServlet.的servlet类，在这个类的servletInitialized（）方法中进行TouchKit的专门配置，如定制书签、主屏幕图标和启动画面等，除此之外还需要定义UI类和主题等。

为了适应移动设备的特点并提供更好的用户交互，TouchKit包括许多特殊的UI组件。如可以向前或向后导航的的导航栏视图；放置按钮的水平工具栏；在不同组件之间进行滑动切换的导航管理器；在导航管理器中的特殊导航按钮；浮动弹出框；类似ios开关按钮的选择开关；垂直组件分组和水平按钮分组；包含顶部内容区域和底部导航栏的分页视图；输入Email、数字和URL的特殊文本输入框和对应的特殊虚拟键盘；上传组件。

TouchKit支持地理定位功能，允许从移动设备接收的地理位置。浏览器会要求用户确认允许网站获得的位置信息。在移动设备上允许共享位置的权限。浏览器会根据全球定位系统GPS、蜂窝定位或Wi-Fi定位获取位置信息。 地理位置可以在地图上可视化显示出来。

本地存储UI组件允许从应用服务端在HTML5本地存储中存储数据，这个本地存储是单例模式，可以通过LocalStorage.get（）方法获取。存储数据时，用put（）方法存储键值对，键值都是字符串类型，通过get（）方法取值。

3 结论

针对移动浏览器的特点，Vaadin框架中的TouchKit组件针提供许多特殊的优化过的UI组件。使用TouchKit，可以快速创建高质量的WebApp，开发人员只需要专注于业务逻辑，从而减少开发时间，增加开发的效率。

参考文献：

[1] 黄悦深. 基于HTML5的移动Web App开发[J]. 图书馆杂志， 2014（7）.

[2] 黄晟. 基于用户体验的APP设计研究[D]. 西安： 陕西科技大学， 2012（5）.

[3] 于洋. 浅析HTML5的特点及其在移动Web App中的应用[J]. 计算机光盘软件与应用， 2014（12）.

[4] Marko Gr?nroos，Book of Vaadin[M].2014.