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

劉 娜，奚 玲，岳春生

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

?

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

劉 娜，奚 玲，岳春生

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

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

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

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

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

1 總體設(shè)計(jì)方案

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

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

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

圖1 總體設(shè)計(jì)圖

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

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

中間件核心服務(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)件層上，對(duì)開發(fā)環(huán)境生成的界面工程腳本進(jìn)行解析，并調(diào)用應(yīng)用支撐層構(gòu)件重現(xiàn)用戶界面。

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

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

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

模板是一系列為了規(guī)范可視化開發(fā)工具的輸入輸出信息而設(shè)計(jì)的xml文檔。輸出模板規(guī)定了界面工程腳本文件的格式，在運(yùn)行環(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)系是界面工程動(dòng)態(tài)特性的描述，基于映射規(guī)范建立關(guān)系保證了可視化界面開發(fā)工具能夠開發(fā)具有完整功能的用戶界面工程，而不是僅能設(shè)計(jì)界面外觀的工具。

表1 輸出模板的格式

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

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

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

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

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

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

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

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

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

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

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

5 實(shí)測分析

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

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

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

圖6 復(fù)原的界面

6 結(jié)束語

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

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

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

[2] CSDN.Qt開發(fā)手冊(cè)[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].艦船電子對(duì)抗,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ù)在雷達(dá)偵察信號(hào)分析中的應(yīng)用[J].電子科技,2015, 28(7):15-17.

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

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

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

[12] 王彥剛,呂遵明,萬留進(jìn).基于SCA規(guī)范的硬件抽象層應(yīng)用程序接口分析[J].計(jì)算機(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].軍事運(yùn)籌與系統(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