劉 娜，奚 玲，岳春生

(信息工程大學(xué) 信息系統(tǒng)工程學(xué)院，河南 鄭州 450001)

?

基于模板的跨平臺可視化界面開發(fā)系統(tǒng)設(shè)計

劉 娜，奚 玲，岳春生

(信息工程大學(xué) 信息系統(tǒng)工程學(xué)院，河南 鄭州 450001)

針對現(xiàn)有可視化界面開發(fā)工具的邏輯代碼和界面的耦合性較高，可移植性較弱，可擴展性較低等一系列問題。提出了一種基于模板的跨平臺可視化界面開發(fā)系統(tǒng)設(shè)計方案,該系統(tǒng)采用所見即所得的開發(fā)方式，生成能夠免移植地運行在多種嵌入式環(huán)境中，并與邏輯代碼無關(guān)的獨立用戶界面。經(jīng)實驗測試，該系統(tǒng)開發(fā)出的界面可以免移植的應(yīng)用到不同嵌入式環(huán)境中。

模板；可視化；跨平臺；圖形用戶界面；腳本解析引擎

用戶界面是計算機系統(tǒng)的重要組成部分，直接關(guān)系到計算機系統(tǒng)的可用性和使用效率。文獻[1]中指出：一個應(yīng)用系統(tǒng)的成功與否在較大程度上取決于用戶使用界面的感受好壞。據(jù)統(tǒng)計，用戶界面的設(shè)計和開發(fā)在整個系統(tǒng)研制中所占的比重較大，約占40%～60%。因此，界面開發(fā)工具的便捷與否直接影響到用戶界面開發(fā)的難易程度。早期的嵌入式界面開發(fā)模式是針對特定硬件環(huán)境開發(fā)的專用界面，開發(fā)出的界面不具有跨平臺通用性、界面和邏輯代碼緊密耦合。目前的嵌入式軟硬件環(huán)境多種多樣，設(shè)計一種適合嵌入式環(huán)境的跨平臺通用的可視化界面開發(fā)工具，使其開發(fā)出的界面不依賴于特定的軟硬件環(huán)境。對于實現(xiàn)界面和邏輯代碼解耦、保證界面風(fēng)格統(tǒng)一、提高界面開發(fā)效率等方面具有現(xiàn)實意義。QT[2]、Tilcon[3-6]提供了嵌入式環(huán)境下界面開發(fā)手段，但QT的系統(tǒng)資源消耗較大，Tilcon不提供多窗口編輯功能。而Windows[7]下的可視化界面開發(fā)工具無法適用于嵌入式環(huán)境中。

為適應(yīng)嵌入式環(huán)境多樣性、資源有限的運行條件，本文提出了一種基于模板的跨平臺可視化[8-9]界面開發(fā)工具設(shè)計實現(xiàn)方案，以所見即所得[10]的開發(fā)方式，生成可以免移植的運行在不同嵌入式環(huán)境中、且與邏輯代碼無關(guān)的獨立用戶界面。

1 總體設(shè)計方案

本文提出的系統(tǒng)分為兩個部分，開發(fā)環(huán)境和運行環(huán)境，它們的關(guān)系如圖1所示。開發(fā)環(huán)境提供可視化的開發(fā)工具，以所見即所得方式開發(fā)界面。運行環(huán)境采用基于適配層的體系結(jié)構(gòu)，通過對開發(fā)環(huán)境生成的界面工程腳本的解析，使界面工程可在多種嵌入式操作環(huán)境中免移植的運行。

1.1 基于適配層的運行環(huán)境設(shè)計

基于適配層的跨平臺界面運行環(huán)境采用分層抽象技術(shù)解決了用戶界面在不同嵌入式運行環(huán)境中免移植運行問題。同時，適配層技術(shù)也使用戶可以方便地擴展底層的硬件平臺和操作系統(tǒng)。該運行環(huán)境的體系結(jié)構(gòu)如圖 2所示。

圖1 總體設(shè)計圖

圖2 跨平臺界面體系結(jié)構(gòu)

硬件適配層[11-13]位于操作系統(tǒng)和設(shè)備驅(qū)動層之間，對與硬件相關(guān)的特性進行抽象、封裝，封裝為與硬件無關(guān)的統(tǒng)一設(shè)備訪問接口，從而不論底層硬件環(huán)境如何變化，操作系統(tǒng)及上層軟件只要硬件設(shè)備訪問接口不變，操作系統(tǒng)和上層軟件對硬件的訪問不變。

中間件核心服務(wù)層包括操作系統(tǒng)適配層及建立操作系統(tǒng)適配層之上的各種核心服務(wù)中間件。操作系統(tǒng)適配層[11,13]提取不同操作系統(tǒng)通用的核心服務(wù)，形成一系列規(guī)范接口函數(shù)，從而屏蔽了不同操作系統(tǒng)之間接口上的差異。

應(yīng)用支撐構(gòu)件層[14]利用中間件核心服務(wù)層提供的接口函數(shù)，以構(gòu)件方式提供和界面開發(fā)相關(guān)的資源管理、控件管理等功能。

腳本解析引擎位于應(yīng)用支撐構(gòu)件層上，對開發(fā)環(huán)境生成的界面工程腳本進行解析，并調(diào)用應(yīng)用支撐層構(gòu)件重現(xiàn)用戶界面。

1.2 跨平臺可視化開發(fā)環(huán)境設(shè)計

可視化開發(fā)環(huán)境的結(jié)構(gòu)如圖3所示，該系統(tǒng)包括工程管理模塊、模板編輯器、資源編譯器、界面編輯器和連接器等模塊。

圖3 可視化開發(fā)環(huán)境

可視化開發(fā)環(huán)境中的模板提供界面工程、界面以及各種連接關(guān)系規(guī)范描述的范本。模板分為輸入模板和輸出模板，輸入模板為開發(fā)工具軟件提供輸入信息的規(guī)范記錄方式，包括控件模板、系統(tǒng)命令模板控件屬性模板等；輸出模板則規(guī)定了界面開發(fā)工具輸出的界面工程、界面以及各種連接關(guān)系的腳本文件的格式規(guī)范，主要包括工程腳本、界面腳本以及映射腳本。運行環(huán)境中的腳本解析器對符合輸出模板要求的腳本文件進行解析，可在嵌入式環(huán)境中復(fù)原原始用戶界面外觀及調(diào)用關(guān)系。模板編輯器的作用在于編輯生成各種不同類型的模板，并實現(xiàn)對模板的管理。資源編譯器提供編輯位圖、字形、圖標、光標等資源的功能；界面編輯器以拖、拽、組合等操作編輯生成獨立界面，而且界面編輯器也輸出界面腳本，界面腳本以規(guī)范格式記錄窗口和控件的布局以及它們的靜態(tài)屬性信息；連接器是實現(xiàn)界面和邏輯代碼松耦合的關(guān)鍵，它通過可視化方式讓用戶手工建立控件和控件、控件和應(yīng)用函數(shù)以及界面和界面之間的調(diào)用關(guān)系和調(diào)用方式，并將其按照映射模板提供的規(guī)范格式記錄在工程腳本中。由于工程中的各種連接關(guān)系并非通過代碼實現(xiàn)，而是表現(xiàn)為腳本中的一條記錄，因此實現(xiàn)了界面和代碼之間的松耦合。工程管理模塊對整個工程進行管理，按功能分為資源管理、界面管理、模板管理和連接管理4部分，4部分各司其職，管理界面工程中的不同模塊。

2 界面工程模板設(shè)計

模板是一系列為了規(guī)范可視化開發(fā)工具的輸入輸出信息而設(shè)計的xml文檔。輸出模板規(guī)定了界面工程腳本文件的格式，在運行環(huán)境中為腳本解析器正確解析腳本提供了格式的保證。

輸出腳本模板中包括有3種類型的規(guī)范：工程規(guī)范、界面規(guī)范和映射規(guī)范，其格式如表1所示。工程規(guī)范以樹型結(jié)構(gòu)記錄界面窗口間從屬關(guān)系的規(guī)范格式；界面規(guī)范提供描述窗口和控件的靜態(tài)屬性，如布局、外觀、類型等信息的規(guī)范；映射規(guī)范則為記錄連接器輸出的調(diào)用關(guān)系和映射關(guān)系提供范本，映射關(guān)系是界面工程動態(tài)特性的描述，基于映射規(guī)范建立關(guān)系保證了可視化界面開發(fā)工具能夠開發(fā)具有完整功能的用戶界面工程，而不是僅能設(shè)計界面外觀的工具。

表1 輸出模板的格式

3 腳本及腳本解析引擎設(shè)計

腳本是按照界面工程模板提供格式規(guī)范記錄的用戶利用界面開發(fā)工具設(shè)計的界面工程的文本文件。腳本可以采用最通用的txt格式記錄，也可以采用Python腳本文件形式。腳本解析是運行環(huán)境的重要環(huán)節(jié)，腳本解析引擎根據(jù)界面工程模板提供的規(guī)范，全面解析界面工程腳本，在嵌入式運行環(huán)境中實現(xiàn)界面外觀的重建以及關(guān)系及映射的重建，最終完全再現(xiàn)用戶通過開發(fā)工具建立的界面工程。腳本解析引擎在嵌入式運行環(huán)境中運行，因此采用適合嵌入式環(huán)境C語言編寫或采用Python實現(xiàn)。Python實現(xiàn)的腳本解析器可以不需編譯地直接解釋執(zhí)行，運行速度快，且其具有內(nèi)建于語言本身的高級數(shù)據(jù)結(jié)構(gòu)，縮短了開發(fā)時間和代碼編寫量，并可以與多種語言保持良好的兼容性和互操作性[15]。用Python做腳本解析可無縫的調(diào)用C模塊程序，既運用了C的快速計算功能，也兼具了Python簡單的流模式記錄特性，是作為界面工程腳本的良好選擇。文本文件對操作系統(tǒng)的適應(yīng)性更強，增強了系統(tǒng)可移植性，擴展了腳本的適用范圍，提高了可視化界面開發(fā)工具的穩(wěn)定性，但是需要設(shè)置專門的文本格式和解析引擎。

4 可視化界面開發(fā)工具的實現(xiàn)

可視化界面開發(fā)工具是基于Visual Studio C#.NET4.5框架實現(xiàn)的，主要由界面設(shè)計窗口、工具箱、錯誤提示窗口、屬性窗口、菜單欄、輪廓窗口和縮略圖窗口組成。其組成結(jié)構(gòu)圖如圖 4所示。

圖4 可視化開發(fā)工具的主界面

(1)界面設(shè)計窗口。界面設(shè)計窗口是可視化開發(fā)環(huán)境的關(guān)鍵模塊，由提供拖、拽、組合等可視化編輯方式的界面編輯窗口，及自動生成xml格式界面工程腳本文件的xaml窗口兩部分組成。xaml窗口會隨著界面編輯窗口的變化而自動更新界面工程腳本文件；

(2)屬性窗口。屬性窗口顯示窗口和控件的屬性信息，方便進行窗口和控件的屬性配置；

(3)錯誤提示窗口。錯誤提示窗口提供運行界面時出現(xiàn)錯誤的提示信息；

(4)工具箱。工具箱提供編輯界面所需的控件，并且可擴展，用戶也可根據(jù)需求添加自定義的控件；

(5)菜單欄。菜單欄對界面設(shè)計器的功能提供功能分組；

(6)輪廓窗口。輪廓窗口提供界面編輯窗口上控件的結(jié)構(gòu)信息，并顯示控件間的從屬關(guān)系。

5 實測分析

為驗證本文提出的可視化界面開發(fā)系統(tǒng)的有效性，在實際系統(tǒng)上進行了測試。用可視化開發(fā)工具編輯得到如圖 5的測試界面，界面由按鈕、編輯框和靜態(tài)文本框組成。通過腳本解析引擎在WinCEARM環(huán)境下還原出如圖 6的界面。

實測結(jié)果與實驗預(yù)期結(jié)果相符，實現(xiàn)了邏輯代碼和界面松耦合，印證了系統(tǒng)的可行性，即跨平臺可視化界面開發(fā)系統(tǒng)開發(fā)出的界面，能夠免移植的在不同嵌入式環(huán)境中運行。

圖5 界面開發(fā)工具編輯的界面

圖6 復(fù)原的界面

6 結(jié)束語

本文提出的基于模板的跨平臺可視化界面開發(fā)工具的設(shè)計方案實現(xiàn)了代碼和界面的解耦。用戶只需解析保存好的界面工程腳本文件就可將界面應(yīng)用到多種嵌入式環(huán)境中。這顯著提高了開發(fā)效率，縮短了開發(fā)

周期，降低了開發(fā)成本。

[1] 江國星,陳坤,沈瓊霞.基于事件—目標驅(qū)動的人機界面設(shè)計[J].單片機及嵌入式系統(tǒng)應(yīng)用,2005(8):8-11.

[2] CSDN.Qt開發(fā)手冊[EB/OL]. (2012-05-18)[2016-09-12]http://download.csdn.net/download/xiaotengyi2012/3560161.

[3] Tilcon公司.Tilcon evaluation guide[M].加拿大:Tilcon公司,2006.

[4] Tilcon公司.Tilcon white paper[M].加拿大:Tilcon公司,2006.

[5] 張士福.基于Tilcon的VxWorks圖形界面開發(fā)技術(shù)[J].艦船電子對抗,2011(4):25-28.

[6] Wang Q,Zhu S,Li B,et al.A method on designing graphical interfaces of VxWorks based on Tilcon[J].Ordnance Industry Automation,2014(5):59-62.

[7] 侯俊杰.深入淺出 MFC[M].2版.武漢:華中科技大學(xué)出版社,2001.

[8] 董傳剛,劉衛(wèi)榮.可視化技術(shù)在雷達偵察信號分析中的應(yīng)用[J].電子科技,2015, 28(7):15-17.

[9] 竺涌楠,方景龍.基于Web的生物通路圖可視化與編輯工具的設(shè)計[J].電子科技,2015,28(10):83-85.

[10] 顧琪,岳春生.基于MVC模型的嵌入式GIS可視化集成開發(fā)環(huán)境研究[J].信息工程大學(xué)學(xué)報,2010,11(2):248-251.

[11] 王同合,岳春生,胡澤明.基于抽象層的嵌入式GIS跨平臺體系結(jié)構(gòu)設(shè)計[J]. 淮海工學(xué)院學(xué)報:自然科學(xué)版,2009(S1):31-32.

[12] 王彥剛,呂遵明,萬留進.基于SCA規(guī)范的硬件抽象層應(yīng)用程序接口分析[J].計算機應(yīng)用,2014(S2):98-103.

[13] Shang Haizhong,Zhu Peiyan.OSAL-A new technology of supporting cross platform[J].Computer Engineering,2002,28(2):109-111.

[14] 盧青,岳春生.軍用導(dǎo)航系統(tǒng)中通用嵌入式GIS應(yīng)用構(gòu)架研究[J].軍事運籌與系統(tǒng)工程,2008,22(1):65-68.

[15] Davide A,Michele F,Roberto V,et al. Minerva and minepy: a C engine for the MINE suite and its R,pythonand Matlab wrappers[J].Bioinformatics,2013,29(3):407-408.

Design of Cross Platform Visual Interface Development System Based on Template

LIU Na，XI Ling，YUE Chunsheng

(School of Information System Engineering,Information Engineering University,Zhengzhou 450000,China)

In view of the problems that existing visual interface development tool are the logic code and interface are higher coupled, and little weaker in portability and lower extensibility .This paper presents a cross platform visual interface development tool based on template and introduces its key design technologies and system structure. The system uses the method of What You See Is What You Get generates the independent UI, which can free transplantable run on multiple embedded environment and separates from logical code. Through testing, UI, the system developed, can be free transplantable applied to multiple embedded environment.

template;visualization;cross platform;GUI; script parsing engine

2016- 10- 18

劉娜(1991-)，女，碩士研究生。研究方向：軟件無線電。奚玲(1975-)，女，博士，副教授。研究方向：軟件無線電。岳春生(1966-)，男，博士，教授。研究方向：軟件無線電。

10.16180/j.cnki.issn1007-7820.2017.08.032

TP311.5

A

1007-7820(2017)08-117-04