Vaadin開(kāi)發(fā)框架在旋轉(zhuǎn)機(jī)械動(dòng)平衡計(jì)算系統(tǒng)開(kāi)發(fā)中的應(yīng)用

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

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

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

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

1 引言（Introduction）

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

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

2 Vaadin開(kāi)發(fā)框架及技術(shù)特點(diǎn)（Development

framework and technical characteristics of

Vaadin）

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

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

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

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

Fig.1 Application architecture of Vaadin

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

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

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

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

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

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

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

3.1 總體設(shè)計(jì)

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

3.2 功能設(shè)計(jì)

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

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

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

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

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

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

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

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

4.1 固定終端界面

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

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

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

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

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

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

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

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

4.2 移動(dòng)終端界面

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

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

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

5 結(jié)論（Conclusion）

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

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

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

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

參考文獻(xiàn)（References）

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

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

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

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

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

作者簡(jiǎn)介：

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

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

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