基于Vaadin的Web App開發(fā)

馬雪山

摘要：移動互聯(lián)網(wǎng)的發(fā)展和HTML5標準的出現(xiàn)，為App的開發(fā)提供了一種新的解決方案，基于移動設(shè)備上的瀏覽器運行的Web App。Vaadin是一個結(jié)合HTML5的Java web應(yīng)用程序開發(fā)框架。Vaadin框架提供一組專門為移動設(shè)備優(yōu)化的TouchKit組件，可以創(chuàng)建移動用戶界面。該文介紹通過使用TouchKit開發(fā)移動Web App。

關(guān)鍵詞：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），是指智能手機的第三方應(yīng)用程序，在智能手機、平板電腦等其他移動設(shè)備上運行的應(yīng)用程序，作為移動設(shè)備功能上的擴展。當前，在智能手機系統(tǒng)中有兩種應(yīng)用程序：一種是基于本地（操作系統(tǒng)）運行的Native App（原生應(yīng)用）；一種是基于移動設(shè)備上的瀏覽器運行的Web App。

App的產(chǎn)生與發(fā)展是依賴于移動設(shè)備的，隨著智能手機的普及，尤其是自iOS和Android這兩個手機操作系統(tǒng)的快速發(fā)展，App的發(fā)展進入了一個新的階段，基于本地（操作系統(tǒng)）運行的Native App（原生應(yīng)用）開始流行，Native App能夠充分智能手機的功能，帶來良好的人機互動的體驗，支持本地資源訪問，速度快。但是Native App不能跨平臺使用，開發(fā)難度大、成本高。

移動互聯(lián)網(wǎng)的發(fā)展和HTML5標準的出現(xiàn)，為App的開發(fā)提供了一種新的解決方案，開發(fā)基于移動設(shè)備上的瀏覽器運行的Web App。Web App綜合了App和Web的特點，使用HTML、CSS以及JavaScript技術(shù)開發(fā)移動應(yīng)用，可以輕松的實現(xiàn)跨平臺，開發(fā)者無需在考慮復(fù)雜的設(shè)備兼容和跨平臺開發(fā)語言的問題。結(jié)合HTML5，Web App可以實現(xiàn)很多原本Native App才可以實現(xiàn)的功能。從而使得開發(fā)難度和成本都大大降低。

本文將介紹一種Java web應(yīng)用程序開發(fā)框架Vaadin，研究通過使用本框架來開發(fā)移動Web App。

1 Vaadin的介紹

Vaadin是一個結(jié)合HTML5的RIA（Rich Internet Applications 富互聯(lián)網(wǎng)應(yīng)用）的Java web應(yīng)用程序開發(fā)框架，由位于芬蘭的 IT Mill 公司開發(fā)，用來構(gòu)建滿足大型企業(yè)需求的Web應(yīng)用程序。通過使用Vaadin框架，開發(fā)者可以很容易的創(chuàng)建和維護高質(zhì)量的web用戶界面，減少開發(fā)時間，提高用戶體驗，增加開發(fā)的效率。類似于開發(fā)Java傳統(tǒng)桌面應(yīng)用程序中的工具包如AWT、Swing或SWT，Vaadin在編寫用戶界面時使用純Java語言開發(fā)，并且更加容易，使開發(fā)人員可以忘記這是在開發(fā)Web應(yīng)用。Vaadin充分使用了AJAX技術(shù)，用其開發(fā)的瀏覽器應(yīng)用界面可以和桌面應(yīng)用程序一樣響應(yīng)和互動。

圖1 “Vaadin應(yīng)用程序架構(gòu)”

它是一個純Java開發(fā)環(huán)境，除了服務(wù)器端使用Java開發(fā)應(yīng)用程序，在客戶端開發(fā)者也使用Java語言開發(fā)。Vaadin客戶端框架包括Google Web Toolkit（GWT），它提供了從Java語言編譯成在瀏覽器中運行的JavaScript程序，以及一個全功能的用戶界面框架。相比傳統(tǒng)的web開發(fā)，開發(fā)人員更專注于業(yè)務(wù)邏輯的開發(fā)，盡管Vaadin 底層采用了HTML，JavaScript，AJAX等Web技術(shù)，Vaadin應(yīng)用程序框架很好的隱藏了這些細節(jié)，開發(fā)人員一般無需了解上述Web技術(shù)。

圖1是“Vaadin應(yīng)用程序架構(gòu)”，Vaadin包含一個服務(wù)器端框架和客戶端引擎，服務(wù)器端作為一個運行在Java Web服務(wù)器上的Serverlet，主要的應(yīng)用邏輯都在服務(wù)器端運行?？蛻舳艘尕撠?zé)在瀏覽器運行JavaScript代碼，渲染應(yīng)用程序的用戶界面，將用戶的交互行為傳遞到服務(wù)器端。Vaadin框架負責(zé)管理的瀏覽器中的用戶界面和瀏覽器和服務(wù)器之間的AJAX通信。

Vaadin具有良好的可擴展性，相比基于Flash，Java applet或其他插件的Web框架，因為Vaadin客戶端引擎在瀏覽器是以JavaScript程序運行，Vaadin框架不需要在瀏覽器上安裝任何插件。Vaadin依賴的Google Web Toolkit支持多種瀏覽器，不需要擔(dān)心瀏覽器支持的問題。Vaadin框架提供了超過400種組件，開發(fā)者可以直接通過拖動方式添加到開發(fā)項目中，除此之外還可以很方便的使用Vaadin中的一套現(xiàn)成的第三方用戶界面組件庫——add-ons組件。

2 TouchKit

2.1 TouchKit介紹

隨著用戶越來越多使用移動設(shè)備瀏覽網(wǎng)頁，如手機和平板電腦，因此需要開發(fā)基于移動設(shè)備的網(wǎng)絡(luò)應(yīng)用。移動瀏覽器可以像普通瀏覽器一樣顯示網(wǎng)頁，但在開發(fā)應(yīng)用時，開發(fā)人員需要考慮如何讓用戶的體驗更好，更適合于移動設(shè)備的特性，如屏幕尺寸，手指操作的精度，瀏覽器的功能等。Vaadin框架提供一個 TouchKit組件，可以為Web應(yīng)用程序創(chuàng)建移動用戶界面。就像Vaadin框架的目的是使Web應(yīng)用程序像桌面一樣，TouchKit的目的是允許創(chuàng)建的Web app的使用起來類似于本地移動應(yīng)用程序。

與創(chuàng)建普通web用戶界面的方法一樣，使用TouchKit開發(fā)創(chuàng)建一個移動用戶界面，可以使用Vaadin所有的常規(guī)組件和插件，但最重要的是，Vaadin提供一組專門為移動設(shè)備優(yōu)化的TouchKit的小組件。TouchKit支持多種特殊的瀏覽器功能，比如地理位置、特定上下文的輸入字段和主屏幕啟動。對ios系統(tǒng)還支持閃屏。除了開發(fā)常規(guī)的基于服務(wù)端的UI組件，TouchKit還支持一個特殊的離線模式，這是一個存儲在瀏覽器緩存中的客戶端UI組件，當網(wǎng)絡(luò)連接斷開，自動開啟。

2.2 開發(fā)移動WebApp考慮的問題

在開發(fā)支持移動瀏覽器的WebApp時，根據(jù)移動瀏覽器的特點，開發(fā)者需要考慮許多以下與非移動端不同的問題。TouchKit就是設(shè)計來幫助解決這些問題的組件。

1）人機界面

移動設(shè)備上使用的人機界面，與普通電腦不同。例如，手機屏幕可以很容易地旋轉(zhuǎn)，在縱向和橫向視圖之間切換。這不只是改變顯示的尺寸，而且還影響如何排列布置組件，達到最佳的用戶體驗。

用于用手指代替鼠標的操作，所以沒有如“右鍵”的功能。當使用鼠標時，用戶可以單擊雙擊或右鍵單擊，但觸摸屏設(shè)備上，使用的是諸如“點擊”和“長按”交互。手指手勢也發(fā)揮了很大的作用，例如使用垂直下滑代表滾動，而不是一個滾動條。有些瀏覽器還允許使用兩個或多個手指的手勢。

移動設(shè)備通常沒有物理鍵盤，而是一個可以根據(jù)上下文變化屏幕上的虛擬鍵盤。因此需要確保當用戶在輸入數(shù)據(jù)時彈出來的虛擬鍵盤不會擋住輸入?yún)^(qū)域。

2）帶寬和性能

移動互聯(lián)網(wǎng)的連接速度往往比固定線路慢很多，其中延遲是一個重要影響因素，尤其是在高度交互的富應(yīng)用程序中，通常少于100毫秒的延遲幾乎不不被用戶察覺，而移動網(wǎng)絡(luò)連接通常延遲在500毫秒左右，有時更高，這就需要限制一些需要實時后臺響應(yīng)事件的使用。在一些組件中，如正在等待服務(wù)器返回結(jié)果時，還可以使用動畫的方式來補償延遲的時間。在低速的移動網(wǎng)絡(luò)連接下，僅僅是加載Vaadin的客戶端引擎可能就需要幾秒鐘，這可以通過僅編譯使用的組件來解決這個問題。組件的選擇也會影響性能。在TouchKit中的組件被設(shè)計成輕量級的。

3）支持移動設(shè)備的功能

在瀏覽器中可以使用智能手機和平板的功能接口。如位置感知和撥打電話等。

4）兼容性

目前在移動瀏覽器領(lǐng)域的 web標準發(fā)展速度很快，一些由頂級瀏覽器制造商推出的特殊約定，在未來幾年內(nèi)，可能逐步形成新的web標準，而其他的瀏覽器在標準化上會跟隨這些主要瀏覽器平臺的引導(dǎo)。WebKit 是一個開源的瀏覽器引擎，已經(jīng)成為領(lǐng)先的移動瀏覽器核心，例如 Google 的Android、 Apple 的iPhone等所使用的移動瀏覽器引擎，都是基于WebKit。TouchKit的的瀏覽器主要支持WebKit。TouchKit4 還支持Windows Phone的Internet Explorer。

2.3 TouchKit的使用

1）TouchKit的安裝和創(chuàng)建項目

TouchKit的開發(fā)平臺主要是Eclipse，首先需要安裝好Vaadin插件（Vaadin Plugin for Eclipse）。然后在vaadin官網(wǎng)上的vaadin.com/addon/vaadin-touchkit目錄下載安裝一個TouchKit的Eclipse插件。此外，也可以通過Maven或Ivy的方式安裝。

創(chuàng)建TouncKit項目的方式有兩種，一種是使用Maven的Archetype快速生成，或者是使用Vaadin插件創(chuàng)建一個普通的Vaadin項目，然后把它調(diào)整為一個TouchKit項目。

2）TouchKit 的UI組件

TouchKit項目需要定義一個繼承TouchKitServlet.的servlet類，在這個類的servletInitialized（）方法中進行TouchKit的專門配置，如定制書簽、主屏幕圖標和啟動畫面等，除此之外還需要定義UI類和主題等。

為了適應(yīng)移動設(shè)備的特點并提供更好的用戶交互，TouchKit包括許多特殊的UI組件。如可以向前或向后導(dǎo)航的的導(dǎo)航欄視圖；放置按鈕的水平工具欄；在不同組件之間進行滑動切換的導(dǎo)航管理器；在導(dǎo)航管理器中的特殊導(dǎo)航按鈕；浮動彈出框；類似ios開關(guān)按鈕的選擇開關(guān)；垂直組件分組和水平按鈕分組；包含頂部內(nèi)容區(qū)域和底部導(dǎo)航欄的分頁視圖；輸入Email、數(shù)字和URL的特殊文本輸入框和對應(yīng)的特殊虛擬鍵盤；上傳組件。

TouchKit支持地理定位功能，允許從移動設(shè)備接收的地理位置。瀏覽器會要求用戶確認允許網(wǎng)站獲得的位置信息。在移動設(shè)備上允許共享位置的權(quán)限。瀏覽器會根據(jù)全球定位系統(tǒng)GPS、蜂窩定位或Wi-Fi定位獲取位置信息。 地理位置可以在地圖上可視化顯示出來。

本地存儲UI組件允許從應(yīng)用服務(wù)端在HTML5本地存儲中存儲數(shù)據(jù)，這個本地存儲是單例模式，可以通過LocalStorage.get（）方法獲取。存儲數(shù)據(jù)時，用put（）方法存儲鍵值對，鍵值都是字符串類型，通過get（）方法取值。

3 結(jié)論

針對移動瀏覽器的特點，Vaadin框架中的TouchKit組件針提供許多特殊的優(yōu)化過的UI組件。使用TouchKit，可以快速創(chuàng)建高質(zhì)量的WebApp，開發(fā)人員只需要專注于業(yè)務(wù)邏輯，從而減少開發(fā)時間，增加開發(fā)的效率。

參考文獻：

[1] 黃悅深. 基于HTML5的移動Web App開發(fā)[J]. 圖書館雜志， 2014（7）.

[2] 黃晟. 基于用戶體驗的APP設(shè)計研究[D]. 西安： 陜西科技大學(xué)， 2012（5）.

[3] 于洋. 淺析HTML5的特點及其在移動Web App中的應(yīng)用[J]. 計算機光盤軟件與應(yīng)用， 2014（12）.

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