基于WEB APP的旋轉機械動平衡計算系統開發與應用

何冬輝，葉振起，趙奕州

(遼寧東科電力有限公司，遼寧 沈陽 110006)

基于WEB APP的旋轉機械動平衡計算系統開發與應用

何冬輝，葉振起，趙奕州

(遼寧東科電力有限公司，遼寧 沈陽 110006)

傳統的WEB應用程序在不同終端不同平臺開發時，為實現全方位、多角度的用戶需要而采用不同的開發框架，這無疑增加了開發人員的開發量和維護量。Vaadin是一個用于創建富客戶端（RIA）應用程序的前端開發框架，應用程序在不同終端和平臺實現時都基于相同的框架，其具有種類豐富和功能完善的界面表現力、靈活的數據監聽處理功能，同時能兼顧跨平臺跨終端的觸屏交互、動畫切換等移動特性。為實現旋轉機械動平衡計算在智能手機、PAD等移動終端的應用需求，同時兼顧系統交互性和功能性，本文基于 Vaadin開發框架設計實現了旋轉機械動平衡計算系統。實例應用表明，系統在跨平臺跨終端實現時，不僅顯著提高了開發效率，也兼顧了不同終端的用戶體驗。

Vaadin；交互；動平衡；用戶體驗

0 引言

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

Vaadin是一個Java Web應用程序開發框架，用于創建和設計一個能夠在網絡上實現高性能數據呈現的Web應用程序[1][2]。本文通過分析Vaadin開發框架的關鍵技術，如系統界面、用戶交互、數據綁定、移動終端的實現等，對旋轉機械動平衡計算系統在固定終端和移動終端的實現進行了全新系統架構設計。實例應用表明，Vaadin框架不僅能提高開發效率，同時能兼顧不同移動終端系統的交互性，實現最佳用戶體驗。

1 Vaadin開發框架及技術特點

Vaadin是一種Java Web應用程序的開發框架，其設計目標是便利地創建和維護高質量的 Web UI應用程序。它包含一套Web應用編程API，一組用來控制外觀的主題的UI用戶界面組件，UI組件用戶界面組件是用戶與系統交互的基礎，UI組件可與數據模型進行綁定。此外Vaadin還包含一個終端適配器（terminal adapter），其主要作用是接受用戶從Web瀏覽器發送的請求，生成相應的響應并將其渲染到程序的UI界面上[3][4]。

圖 1是 Vaadin應用程序架構，描述了 Vaadin架構各組成部分之間的關系，其技術特點和功能如下：

（1）服務器端Vaadin應用程序以Servlet形式運行在Java Web服務器中，提供HTTP服務。Servlet類通常使用Vaadin Servlet接受客戶端請求，并將它解釋為某個用戶Session的事件，事件關聯到UI組件上，并被派發給應用程序中指定的事件監聽器。如果UI邏輯變更了服務器端UI組件的狀態，Servlet會將UI組件的狀態變化通過HTTP應答返回給Web瀏覽器端。客戶端引擎運行在瀏覽器內，它接受服務器端的應答，如果其中包含UI組件的狀態變化，它將相應地修改瀏覽器內頁面的狀態。

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

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

（4）在服務器端開發模型的背后，Vaadin靈活運用了 AJAX技術（Asynchronous JavaScript and XML），AJAX技術的運用使得Vaadin可以創建出功能強大的豐富性網絡應用程序（Rich Internet Application，RIA）[5][6]，而且這些RIA程序的響應速度、易交互性可以達到與桌面應用程序相同的程度。

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

圖1 Vaadin應用程序架構Fig.1 Application Architecture of Vaadin

（6）Vaadin服務器端應用程序的 UI部分由客戶端引擎負責呈現在瀏覽器中。客戶端與服務器端的一切通信都被妥善的屏蔽起來。Vaadin被設計為具有很高的可擴展性，所以除了Vaadin本身提供的組件之外，還可以非常方便地使用第三方widget[8]。在 Vaadin Directory 中可以找到數百個插件（Add-on）。

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

2 系統架構

2.1 總體設計

旋轉機械動平衡計算系統在PC、Pad和智能手機等跨平臺跨終端的實現都是基于 Vaadin開發框架，其功能表現為用戶輸入數據和顯示計算結果或圖示。系統采用基于Vaadin的B/S技術架構模式，并利用Vaadin的MVC分層設計模式，前臺界面顯示層、邏輯業務層的代碼是完全分離的，只有當程序運行時具體的View層才與相應的Mode層進行綁定，完成相應的業務邏輯功能，從而提高系統的靈活性和復用性。基于Vaadin的旋轉機械動平衡計算系統的架構設計如圖2所示。

圖2 系統總體設計Fig.2 General Design of System

2.2 功能設計

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

圖3 系統功能結構Fig.3 Function Structure of System

2.3 業務流程

系統所有的計算功能都在Web服務器端實現，用戶通過Web瀏覽器與系統交互，Vaadin客戶端引擎將原始數據發送給Servlet容器中的終端適配器，終端適配器通過Web服務器接收來自客戶端用戶的請求，調用相應的計算模塊，將用戶請求轉換為特定會話中的用戶事件。每個用戶事件都與服務器端的相應UI組件關聯，終端適配器會根據UI組件的改變生成相應的響應，并發送到客戶端的Web瀏覽器中。客戶端瀏覽器中的客戶端引擎接收該響應，并將響應內容渲染在Web頁面的UI界面上[10]。

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

圖4 業務流程Fig.4 Work Flow of System

3 系統實現

Vaadin是一款使用ApacheV2許可協議的開源產品，提供了 Eclipse和 Netbeans插件的輔助開發工具[11]。本系統采用了最新的開發工具，充分利用Vaadin各種插件工具，整個系統形成一個開源架構體系。

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

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

3.1 固定終端界面

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

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

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

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

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

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

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

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

3.2 移動終端界面

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

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

圖5 雙面平衡影響系數法計算示意圖Fig.5 Schematic diagram of influence coefficient method of the double-sided balance

圖6 雙面平衡影響系數法-平面A平衡塊安裝示意圖。Fig.6 Plane A balance block installation diagram of influence coefficient method of the double-sided balance

圖7 手機登入輔助功能界面Fig.7 Mobile phone login auxiliary function interface

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

圖8 Pad顯示雙面平衡界面Fig.8 Pad shows the double-sided balance interface

4 總結

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

（2）系統針對移動端的各種特性進行了特殊設置和改進，其豐富的界面表現力、靈活的數據監聽處理功能，實現良好的交互性，突顯了 Vaadin在RIA應用開發方面所擁有的優勢。

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

（4）目前基于Vaadin開發框架實現的旋轉機械動平衡計算系統提供了單面平衡、雙面平衡、多面平衡、輔助功能模塊等功能，后續將進一步研究如何創建更多的功能模塊，優化系統性能。

[1]陳永祥, 章炯民． 一種RIA分系統架構模式的研究與實現[J].計算機應用與軟件, 2009, 26(9): 113-115.

[2]Szczygiel M.Extending possibilities of developers in large business applications by integrating Vaadin framework[D].JAMK University of Applied Sciences, 2013.

[3]Pratt A.Rich internet application development with the Vaadin java framework[D].TURKU University of Applied Science, 2011[13].Aho T, Koskinen J, Nieminen A, A secure OSGi environment Nicolas Frankel.Learning Vaadin[M], Birmingham: Packt Publishing, 2011.

[4]李杰, 周明全, 耿國華, 等.基于RIA的網絡科技資源呈現系統的研究與實現[J].計算機應用與軟件, 2009, 26(4): 69-71, 84.

[5]聶金慧, 蘇紅旗, 劉官樹.基于RIA的Vaadin系統架構與設計模式研究[J].信息網絡安全, 2013(8): 38-40.

[6]陳凌, 王建東.基于GWT技術開發AJAX應用的分析和研究[J].計算機技術與發展, 2010, 19(11): 222-225.

[7]孫雄.Vaadin開源框架[J].微型機與應用, 2014(1): 11-13.

[8]馬雪山.基于Vaadin的Web App開發[J].電腦知識與技術, 2015(3): 45-47.

[9]孟慶強, 陶時偉, 廖婉玲.基于Vaadin的有序用電管理系統的研究與實現[J].計算機應用與軟件, 2016(1): 85-93．

[10]趙祺, 劉譞哲, 王旭東等.一種面向富客戶端應用的運行時自適應中間件[J].軟件學報, 2013, 24(7): 1419-1435．

[11]武芳芳.網絡服務管理虛擬化模型研究[D].山東: 山東大學, 2012.

Development and Application of Dynamic Balancing Computing System for Rotating Machinery Based on WEB APP

HE Dong-hui, YE Zhen-qi, ZHAO Yi-zhou
(Liaoning Dongke Electric Power Research Institute Co., Ltd, Liaoning, Shenyang, 110006)

Traditional WEB applications use different development framework in different terminal and different platform development, in order to achieve all-round, multi-angle user needs, which undoubtedly increased the developer's development and maintenance.Vaadin is a new development framework for creating rich client (RIA) applications, which are based on the same framework when they are implemented across different terminals and platforms, with a rich and well-defined interface presentation, flexible data listening processing functions, while taking into account cross-platform cross-terminal touch screen interaction, animation switching and other mobile features.In order to realize the application of rotating machinery dynamic balance calculation in mobile phones such as smart phones and PADs, taking into account the system interactivity and functionality at the same time, this paper realizes the dynamic balance calculation system of rotating machinery based on Vaadin development framework design.Case application shows that the system in cross-platform cross-terminal implementation, not only significantly improve the development efficiency, but also take into account the different terminal user experience.

Vaadin; Interaction; Dynamic balance; User experience

TP311

A

10.3969/j.issn.1003-6970.2017.03.018

何冬輝(1982-)，男，碩士，工程師。研究領域：火力發電機組調試及專業軟件開發；葉振起(1980-)，男，本科，高級工程師。研究領域為火力發電機組調試；趙奕州(1977-)，男，本科，高級工程師。研究領域為火力發電機組調試。

本文著錄格式：何冬輝，葉振起，趙奕州.基于WEB APP的旋轉機械動平衡計算系統開發與應用[J].軟件，2017，38（3）：87-92