何冬輝++葉振起++趙奕州

摘 要：Vaadin是一個用于創(chuàng)建富客戶端（RIA）應(yīng)用程序的前端開發(fā)框架，應(yīng)用程序在不同終端和平臺實現(xiàn)時都基于相同的框架，其具有種類豐富和功能完善的界面表現(xiàn)力、靈活的數(shù)據(jù)監(jiān)聽處理功能，同時能兼顧跨平臺跨終端的觸屏交互、動畫切換等移動特性。為實現(xiàn)旋轉(zhuǎn)機械動平衡計算在智能手機、PAD等移動終端的應(yīng)用需求，同時兼顧系統(tǒng)交互性和功能性，本文基于Vaadin開發(fā)框架設(shè)計實現(xiàn)了旋轉(zhuǎn)機械動平衡計算系統(tǒng)。實例應(yīng)用表明，系統(tǒng)在跨平臺跨終端實現(xiàn)時，不僅顯著提高了開發(fā)效率，也兼顧了不同終端的用戶體驗。

關(guān)鍵詞：Vaadin；交互；動平衡；用戶體驗

中圖分類號：TP311 文獻標識碼：A

1 引言（Introduction）

傳統(tǒng)的旋轉(zhuǎn)機械動平衡計算都是基于桌面應(yīng)用程序開發(fā)，在移動終端的實現(xiàn)較少，但隨著移動互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，人們越來越多的通過智能手機和平板電腦等移動終端來獲得功能體驗，其便捷性是傳統(tǒng)桌面應(yīng)用程序無法比擬的。傳統(tǒng)的WEB應(yīng)用開發(fā)為了兼顧系統(tǒng)的兼容性和交互性，需要針對不同的移動終端系統(tǒng)如iOS、Android、Windows phone等，采取不同的開發(fā)框架和技術(shù)來分別進行開發(fā)和維護，造成了較大的開發(fā)量及維護量。如何采用合適開發(fā)框架和技術(shù)開發(fā)不同終端應(yīng)用程序，既能減少開發(fā)量，又能提供更安全和友好的Web應(yīng)用程序界面，是當前移動終端應(yīng)用程序開發(fā)所面臨的一個重要課題。

Vaadin是一個Java Web應(yīng)用程序開發(fā)框架，用于創(chuàng)建和設(shè)計一個能夠在網(wǎng)絡(luò)上實現(xiàn)高性能數(shù)據(jù)呈現(xiàn)的Web應(yīng)用程序[1]。本文通過分析Vaadin開發(fā)框架的關(guān)鍵技術(shù)，如系統(tǒng)界面、用戶交互、數(shù)據(jù)綁定、移動終端的實現(xiàn)等，對旋轉(zhuǎn)機械動平衡計算系統(tǒng)在固定終端和移動終端的實現(xiàn)進行了全新系統(tǒng)架構(gòu)設(shè)計。實例應(yīng)用表明，Vaadin框架不僅能提高開發(fā)效率，同時能兼顧不同移動終端系統(tǒng)的交互性，實現(xiàn)最佳用戶體驗。

2 Vaadin開發(fā)框架及技術(shù)特點（Development

framework and technical characteristics of

Vaadin）

Vaadin是一種Java Web應(yīng)用程序的開發(fā)框架，其設(shè)計目標是便利地創(chuàng)建和維護高質(zhì)量的Web UI應(yīng)用程序。它包含一套Web應(yīng)用編程API，一組用來控制外觀的主題的UI用戶界面組件，UI組件用戶界面組件是用戶與系統(tǒng)交互的基礎(chǔ)，UI組件可與數(shù)據(jù)模型進行綁定。此外Vaadin還包含一個終端適配器（Terminal Adapter），其主要作用是接受用戶從Web瀏覽器發(fā)送的請求，生成相應(yīng)的響應(yīng)并將其渲染到程序的UI界面上[2]。

圖1是Vaadin應(yīng)用程序架構(gòu)，描述了Vaadin架構(gòu)各組成部分之間的關(guān)系，其技術(shù)特點和功能如下：

（1）服務(wù)器端Vaadin應(yīng)用程序以Servlet形式運行在Java Web服務(wù)器中，提供HTTP服務(wù)。Servlet類通常使用Vaadin Servlet接受客戶端請求，并將它解釋為某個用戶Session的事件，事件關(guān)聯(lián)到UI組件上，并被派發(fā)給應(yīng)用程序中指定的事件監(jiān)聽器。如果UI邏輯變更了服務(wù)器端UI組件的狀態(tài)，Servlet會將UI組件的狀態(tài)變化通過HTTP應(yīng)答返回給Web瀏覽器端?？蛻舳艘孢\行在瀏覽器內(nèi)，它接受服務(wù)器端的應(yīng)答，如果其中包含UI組件的狀態(tài)變化，它將相應(yīng)地修改瀏覽器內(nèi)頁面的狀態(tài)。

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

Fig.1 Application architecture of Vaadin

（2）由于客戶端引擎以JavaScript形式運行在瀏覽器內(nèi)，所以Vaadin開發(fā)的應(yīng)用程序在運行時不需要額外的瀏覽器插件（Plugin）的支持。與那些基于Flash、Java Applets或其他各種瀏覽器插件的開發(fā)框架相比，Vaadin更具有優(yōu)勢。Vaadin底層依賴于Google Web Toolkit的支持，實現(xiàn)了跨瀏覽器能力，因此開發(fā)者再也不必擔心兼容多種瀏覽器的問題。

（3）由于HTML、JavaScript及其他瀏覽器相關(guān)技術(shù)對于應(yīng)用程序邏輯是隱藏的，Web瀏覽器想象為一個瘦的客戶端平臺，這個瘦客戶端將UI展現(xiàn)給用戶，又將用戶的交互行為發(fā)送到服務(wù)器端。UI的控制邏輯與業(yè)務(wù)邏輯共同運行在基于Java的Web服務(wù)器上。與這種模式不同，傳統(tǒng)的客戶端/服務(wù)器架構(gòu)存在一個專門的客戶端應(yīng)用程序部分，其中需要包含大量的客戶端/服務(wù)器雙向通訊，而這種通訊又往往是與具體的應(yīng)用程序高度相關(guān)的。

（4）在服務(wù)器端開發(fā)模型的背后，Vaadin靈活運用了AJAX技術(shù)（Asynchronous JavaScript and XML），AJAX技術(shù)的運用使得Vaadin可以創(chuàng)建出功能強大的豐富性網(wǎng)絡(luò)應(yīng)用程序（Rich Internet Application，RIA），而且這些RIA程序的響應(yīng)速度、易交互性可以達到與桌面應(yīng)用程序相同的程度。

（5）除了服務(wù)器端的Java應(yīng)用程序開發(fā)外，也可以用Java語言編寫新的widget來進行客戶端開發(fā)，Vaadin甚至還可以用于開發(fā)純的客戶端應(yīng)用程序，這類應(yīng)用程序可以在瀏覽器內(nèi)獨立運行，而不必與服務(wù)器交互。Vaadin的客戶端開發(fā)框架包括了Google Web Toolkit （GWT），GWT提供了一個編譯器，可將Java程序編譯為JavaScript代碼，然后在瀏覽器內(nèi)運行。Vaadin的客戶端開發(fā)框架還包括功能完整的UI組件。無論是在客戶端還是在服務(wù)器端，Vaadin都使用純Java進行開發(fā)，而不必引入其他語言。

（6）Vaadin服務(wù)器端應(yīng)用程序的UI部分由客戶端引擎負責呈現(xiàn)在瀏覽器中?？蛻舳伺c服務(wù)器端的一切通信都被妥善的屏蔽起來。Vaadin被設(shè)計為具有很高的可擴展性，所以除了Vaadin本身提供的組件之外，還可以非常方便地使用第三方widget。在Vaadin Directory中可以找到數(shù)百個插件（Add-on）。

（7）Vaadin框架將UI組件和它的具體呈現(xiàn)非常清楚地分離為不同的部分，因此允許分別開發(fā)這兩部分。使用theme、CSS和HTML頁面模板來控制UI組件的具體呈現(xiàn)。Vaadin提供了非常完善的默認theme，也可以自由地定制UI。

3 系統(tǒng)架構(gòu)（System architecture）

3.1 總體設(shè)計

旋轉(zhuǎn)機械動平衡計算系統(tǒng)在PC、Pad和智能手機等跨平臺跨終端的實現(xiàn)都是基于Vaadin開發(fā)框架，其功能表現(xiàn)為用戶輸入數(shù)據(jù)和顯示計算結(jié)果或圖示。系統(tǒng)采用基于Vaadin的B/S技術(shù)架構(gòu)模式，并利用Vaadin的MVC分層設(shè)計模式，前臺界面顯示層、邏輯業(yè)務(wù)層的代碼是完全分離的，只有當程序運行時具體的View層才與相應(yīng)的Mode層進行綁定，完成相應(yīng)的業(yè)務(wù)邏輯功能，從而提高系統(tǒng)的靈活性和復用性?；赩aadin的旋轉(zhuǎn)機械動平衡計算系統(tǒng)的架構(gòu)設(shè)計如圖2所示。

3.2 功能設(shè)計

該系統(tǒng)是以旋轉(zhuǎn)機械振動原理，建立旋轉(zhuǎn)機械動平衡物理模型，研究相應(yīng)的平衡原理和方法，構(gòu)造相應(yīng)的數(shù)學模型，建立數(shù)學方程，采用相應(yīng)的計算方法，如影響系數(shù)法，諧分量—影響系數(shù)法、最小二乘法等，求解方程。結(jié)合生產(chǎn)現(xiàn)場實際需求，系統(tǒng)將各項功能進行模塊劃分，主要有包括單面平衡、雙面平衡、多面平衡、輔助工具等功能模塊，其中輔助模塊包括動平衡試重計算、矢量運算、矢量正反對稱分解和許用不平衡量計算，圖3為系統(tǒng)功能示意圖。

3.3 業(yè)務(wù)流程

系統(tǒng)所有的計算功能都在Web服務(wù)器端實現(xiàn)，用戶通過Web瀏覽器與系統(tǒng)交互，Vaadin客戶端引擎將原始數(shù)據(jù)發(fā)送給Servlet容器中的終端適配器，終端適配器通過Web服務(wù)器接收來自客戶端用戶的請求，調(diào)用相應(yīng)的計算模塊，將用戶請求轉(zhuǎn)換為特定會話中的用戶事件。每個用戶事件都與服務(wù)器端的相應(yīng)UI組件關(guān)聯(lián)，終端適配器會根據(jù)UI組件的改變生成相應(yīng)的響應(yīng)，并發(fā)送到客戶端的Web瀏覽器中。客戶端瀏覽器中的客戶端引擎接收該響應(yīng)，并將響應(yīng)內(nèi)容渲染在Web頁面的UI界面上。

旋轉(zhuǎn)機械動平衡計算系統(tǒng)的用戶與系統(tǒng)界面交互時，應(yīng)用程序的業(yè)務(wù)邏輯與用戶界面進行通信。以動平衡試重計算為例，如圖4所示，當用戶輸入基本參數(shù)之后，系統(tǒng)UI組件檢測用戶輸入合法性，檢測到非法輸入將提示信息。用戶輸入正確數(shù)據(jù)后，點擊“計算”按鈕，綁定在“計算”按鈕組件上的監(jiān)聽器會立即觸發(fā)Button.ClickEvent事件，并通過HTTP連接以事件的形式將原始輸入數(shù)據(jù)傳回服務(wù)器端組件。服務(wù)器端組件再將該事件轉(zhuǎn)送應(yīng)用程序的邏輯處理代碼，通過監(jiān)聽邏輯代碼中的事件處理邏輯（Button.ClickListener監(jiān)聽事件），首先獲取用戶輸入的原始數(shù)據(jù)，轉(zhuǎn)換輸入字符串為數(shù)值，調(diào)用相應(yīng)的計算模塊處理數(shù)據(jù)，再將計算結(jié)果綁定到UI組件上，服務(wù)器端UI組件狀態(tài)發(fā)生變化，終端適配器發(fā)送相應(yīng)響應(yīng)，客戶端的Web瀏覽器接受該相應(yīng)并進行渲染，如繪制平衡塊安裝示意圖。這樣用戶在系統(tǒng)的界面執(zhí)行任何操作時，系統(tǒng)UI組件基于事件機制進行響應(yīng)，能夠及時反饋給用戶所需要的信息。

4 系統(tǒng)實現(xiàn)（System implementation）

Vaadin是一款使用ApacheV2許可協(xié)議的開源產(chǎn)品，提供了Eclipse和Netbeans插件的輔助開發(fā)工具[3]。本系統(tǒng)采用了最新的開發(fā)工具，充分利用Vaadin各種插件工具，整個系統(tǒng)形成一個開源架構(gòu)體系。

旋轉(zhuǎn)機械動平衡計算系統(tǒng)定義了一個Application類作為程序的入口，它會創(chuàng)建并且管理所有必需UI組件。通過Application類建立系統(tǒng)的主窗口，并在主窗口中添加子窗口對象來完成系統(tǒng)的UI界面。UI組件的事件監(jiān)聽器處理用戶與UI組件的交互，UI組件可直接綁定應(yīng)用程序所需的數(shù)據(jù)，應(yīng)用程序的界面美觀則是由CSS編寫的主題來渲染和控制。在程序運行時，Vaadin框架會將同一個應(yīng)用中的所有的Http請求都關(guān)聯(lián)到同一個session會話里，一個application類的實例實際上是一個session對象。因此開發(fā)人員可以像開發(fā)桌面程序一樣來開發(fā)Vaadin Web應(yīng)用程序，無需考慮Http會話管理等通常需要在Web應(yīng)用開發(fā)中關(guān)注的問題[4，5]。

用戶與系統(tǒng)的交互以輸入數(shù)據(jù)和顯示結(jié)果為主，為防止非法字符輸入，系統(tǒng)采用Vaadin Add-ons插件NumberField，NumberField能屏蔽非法字符輸入、自定義輸入位數(shù)、輸入提示、自動校驗等功能。系統(tǒng)圖形顯示采用Vaadin Add-ons插件JFreeChart wrapper，JFreeChart利用java庫用于構(gòu)建復雜的圖表。Jfreechart wrapper包含一個組件，可以在Vaadin應(yīng)用程序上顯示JFreeChart內(nèi)建圖表。在瀏覽器中，圖表呈現(xiàn)為SVG，使圖表在查看時非常清晰。

4.1 固定終端界面

旋轉(zhuǎn)機械動平衡計算系統(tǒng)根據(jù)所要實現(xiàn)的單面平衡、雙面平衡、多面平衡、輔助功能等功能模塊，利用Vaadin所提供的各種組件和布局方式來設(shè)置系統(tǒng)界面。每個功能模塊設(shè)置子功能模塊導航，用戶可根據(jù)需要進行操作，如雙面平衡功能界面如圖5所示。

用戶進入雙面平衡模塊后，選擇影響系數(shù)法，步驟如下：

（1）分別輸入A、B平面原始振動“振幅”和“相位”。

（2）分別輸入平面A、B同時試加重的“質(zhì)量”和安裝“角度”。

（3）分別輸入平面A、B試加重后，A、B平面的“振幅”和“相位”。

（4）選擇試重是否去掉。

點擊“計算”按鈕，系統(tǒng)將計算出平面A、B的影響系數(shù)、校核質(zhì)量（保留試重和去掉試重），得出如圖5計算結(jié)果所示。

分別點擊“平面A平衡塊安裝示意圖”或“平面B平衡塊安裝示意圖”，系統(tǒng)將彈出窗口顯示相應(yīng)平面的平衡塊安裝位置，如圖6所示。

4.2 移動終端界面

旋轉(zhuǎn)機械動平衡計算系統(tǒng)在移動終端實現(xiàn)時，復用了固定端系統(tǒng)的服務(wù)端代碼和組件，因此能夠良好地繼承系統(tǒng)各項功能，但考慮到Pad、智能手機等移動設(shè)備屏幕的大小、分辨率以及網(wǎng)絡(luò)流量等因素，系統(tǒng)采用CSSLayout布局，各功能面板右上角設(shè)置放大按鈕，局部放大子功能面板，同時合理分配屏幕區(qū)域，支持動畫切換、觸屏交互、屏幕縮放等移動端特有的功能，完美支持移動終端。

用智能手機通過Web瀏覽器登錄旋轉(zhuǎn)機械動平衡計算系統(tǒng)，輔助功能模塊界面如圖7（a）所示，考慮到手機屏幕的大小，可以局部放大具體的功能子模塊，便于小屏幕操作，如圖7（b）所示。

用Pad通過Web瀏覽器登錄旋轉(zhuǎn)機械動平衡計算系統(tǒng)，雙面平衡界面如圖8所示。從圖8可見，與圖5相比，面板布局根據(jù)屏幕大小自動調(diào)整布局，下滑屏幕可以看到其他界面模塊，達到與桌面應(yīng)用類似的效果，具有很好的交互性。

5 結(jié)論（Conclusion）

（1）對Vaadin開發(fā)框架和開發(fā)流程進行了相關(guān)介紹，并基于Vaadin開發(fā)框架研究實現(xiàn)了旋轉(zhuǎn)機械動平衡計算系統(tǒng)，其在智能手機、Pad等移動終端的功能實現(xiàn)復用了PC端的代碼和組件，提高開發(fā)效率和減輕開發(fā)量。

（2）系統(tǒng)針對移動端的各種特性進行了特殊設(shè)置和改進，其豐富的界面表現(xiàn)力、靈活的數(shù)據(jù)監(jiān)聽處理功能，實現(xiàn)良好的交互性，突顯了Vaadin在RIA應(yīng)用開發(fā)方面所擁有的優(yōu)勢。

（3）Vaadin是純Java語言開發(fā)框架，前臺、后臺都采用純Java語言實現(xiàn)，無需考慮瀏覽器兼容性問題，解決了傳統(tǒng)Web開發(fā)中所面臨的前臺、后臺兼容性開發(fā)問題，滿足用戶差異化復雜化的需求。

（4）目前基于Vaadin開發(fā)框架實現(xiàn)的旋轉(zhuǎn)機械動平衡計算系統(tǒng)提供了單面平衡、雙面平衡、多面平衡、輔助功能模塊等功能，后續(xù)將進一步研究如何創(chuàng)建更多的功能模塊，優(yōu)化系統(tǒng)性能。

參考文獻（References）

[1] 孫雄.Vaadin開源框架[J].微型機與應(yīng)用，2014（1）：11-13.

[2] 武芳芳.網(wǎng)絡(luò)服務(wù)管理虛擬化模型研究[D].山東：山東大學，2012.

[3] 聶金慧，蘇紅旗，劉官樹.基于RIA的Vaadin系統(tǒng)架構(gòu)與設(shè)計模式研究[J].信息網(wǎng)絡(luò)安全，2013（8）：38-40.

[4] 孟慶強，陶時偉，廖婉玲.基于Vaadin的有序用電管理系統(tǒng)的研究與實現(xiàn)[J].計算機應(yīng)用與軟件，2016（1）：85-93.

[5] 馬雪山.基于Vaadin的Web App開發(fā)[J].電腦知識與技術(shù)，2015（3）：45-47.

作者簡介：

何冬輝（1982-），男，碩士，工程師.研究領(lǐng)域：火電廠汽輪機機調(diào)試及計算機專業(yè)軟件開發(fā).

葉振起（1980-），男，本科，高級工程師.研究領(lǐng)域：火力發(fā)電機組調(diào)試.

趙奕州（1977-），男，本科，高級工程師.研究領(lǐng)域：火力發(fā)電機組調(diào)試.