采用GEF的MiniGUI的可視化開(kāi)發(fā)工具技術(shù)

1? 概? 述

隨著嵌入式系統(tǒng)的廣泛應(yīng)用，圖形用戶(hù)界面(GraphicalUser Interface，GUI)在嵌入式系統(tǒng)中的地位也越來(lái)越重要。

目前比較成熟的嵌入式GUI系統(tǒng)包括MicroWindows、Qt／Embedded、MiniGUI等。MicroWindows可移植性好，開(kāi)發(fā)重點(diǎn)在底層的圖形引擎，但窗口系統(tǒng)和圖形接口方面的功能還比較欠缺。Qt／Embedded可移植性較好，基于Qt的X Window程序可以非常方便地移植到嵌入式系統(tǒng)，但對(duì)系統(tǒng)硬件要求較高，主要用于手持設(shè)備。MiniGUI最初是為了工業(yè)控制系統(tǒng)設(shè)計(jì)開(kāi)發(fā)的，定制能力強(qiáng)，速度快，性能好，特別適合于實(shí)時(shí)性要求高的場(chǎng)合。

由于受到嵌入式系統(tǒng)硬件資源的限制，對(duì)嵌入式系統(tǒng)GUI的基本要求包括：占用資源少、高性能、高可靠性、可配置。本文設(shè)計(jì)的可視化開(kāi)發(fā)工具選擇MiniGUI作為圖形界面支持系統(tǒng)。

MiniGUI是一款遵循LGPL條款的純自由軟件，是根據(jù)嵌入式系統(tǒng)應(yīng)用特點(diǎn)量身定做的圖形界面支持系統(tǒng)，得到了廣泛應(yīng)用。它提供了完備的多窗口機(jī)制和消息傳遞機(jī)制，以及對(duì)話(huà)框和常用的控件類(lèi)，包括文本框、按鈕、編輯框、列表框等；非常小巧，包含全部功能的庫(kù)文件僅為300 KB左右。

傳統(tǒng)的MiniGUI程序開(kāi)發(fā)是基于文本編輯器的，開(kāi)發(fā)人員在程序源代碼編寫(xiě)過(guò)程中無(wú)法預(yù)先看到窗口、控件的整體效果，缺乏一個(gè)可視化的開(kāi)發(fā)環(huán)境。因此，本文設(shè)計(jì)了一個(gè)MiniGUI可視化開(kāi)發(fā)工具，并使用Eclipse GEF(GraphicaI Ediring Framework)實(shí)現(xiàn)。

2? 可視化開(kāi)發(fā)工具整體設(shè)計(jì)

2.1? 功能需求

可視化開(kāi)發(fā)工具要提供界面布局設(shè)計(jì)功能，主要包括：界面上控件位置的擺放、屬性的設(shè)置，為每個(gè)控件定義callback函數(shù)；菜單、狀態(tài)條、位圖編輯；響應(yīng)界面編輯過(guò)程中發(fā)生的交互事件，比如drop／drag、undo／redo、move、delete、resize等；保存及解析呈現(xiàn)相應(yīng)布局的功能；根據(jù)用戶(hù)設(shè)計(jì)生成可運(yùn)行的MiniGUI源代碼。

2.2? 整體結(jié)構(gòu)

可視化開(kāi)發(fā)工具主要由界面設(shè)計(jì)工具和源代碼生成工具兩部分組成。整體結(jié)構(gòu)如圖1所示。



界面設(shè)計(jì)工具：實(shí)現(xiàn)所見(jiàn)即所得的界面編輯器功能，可以根據(jù)需要改變和調(diào)整顯示的內(nèi)容和形式，這使得用戶(hù)界面的制作非常方便。采用傳統(tǒng)的面向?qū)ο笤O(shè)計(jì)方法來(lái)開(kāi)發(fā)可視化界面，會(huì)遇到用戶(hù)界面和底層的數(shù)據(jù)雜合、接口擴(kuò)展導(dǎo)致的類(lèi)膨脹等問(wèn)題，因此界面設(shè)計(jì)工具使用MVC模式設(shè)計(jì)。用戶(hù)通過(guò)界面設(shè)計(jì)工具的“控件設(shè)計(jì)”設(shè)置控件屬性；“交互事件響應(yīng)”用于響應(yīng)界面編輯過(guò)程中發(fā)生的交互事件，完成控件屬性的修改。這兩部分對(duì)應(yīng)MVC中的Controller?！翱丶?lèi)”保存控件的各種屬性，對(duì)應(yīng)Model?！翱丶@示”根據(jù)控件類(lèi)的屬性設(shè)置顯示控件，對(duì)應(yīng)View。XML文檔則負(fù)責(zé)保存界面布局，控件類(lèi)也能夠根據(jù)XML解析文檔內(nèi)容得到自身屬性。

源代碼生成工具：通過(guò)遍歷所有控件類(lèi)的屬性，將圖形用戶(hù)界面布局按照運(yùn)行平臺(tái)要求(目前僅支持RTEMS)生成相應(yīng)的MiniGUI源代碼。

2.3? 組織結(jié)構(gòu)

所有控件類(lèi)通過(guò)樹(shù)的形式來(lái)管理。樹(shù)的頂層表示一個(gè)管理的工程，其下包括所有的對(duì)話(huà)框、菜單、狀態(tài)條及位圖資源，對(duì)話(huà)框的子節(jié)點(diǎn)是其上顯示的所有控件，菜單包括彈出菜單和菜單項(xiàng)，狀態(tài)條與對(duì)話(huà)框類(lèi)似，樹(shù)形結(jié)構(gòu)如圖2所示。由于XML文檔會(huì)被Java解析成樹(shù)形結(jié)構(gòu)，解析界面布局的過(guò)程就是一個(gè)樹(shù)的遍歷過(guò)程。使用樹(shù)形結(jié)構(gòu)來(lái)組織控件類(lèi)，能夠讓軟件在邏輯上簡(jiǎn)單易懂，控件組織關(guān)系清晰明了，并且通過(guò)樹(shù)的遍歷可以保存界面布局及生成源代碼。



由于圖形用戶(hù)界面中許多元素具有共同屬性，本文把這些元素的共有屬性及方法抽象出來(lái)作為基類(lèi)。主要使用2個(gè)基類(lèi)：容器類(lèi)Content和控件類(lèi)Control。Content主要包括容器ID、文字屬性及保存解析控件等方法；Control主要包括控件ID、位置大小、控件風(fēng)格等屬性，以及保存解析控件、生成源代碼等方法。其中，對(duì)話(huà)框、菜單、狀態(tài)條和位圖繼承自Content，如圖3(a)所示；對(duì)話(huà)框控件繼承自Control，如圖3(b)所示。在生成源代碼等操作時(shí)自頂向下遍歷整個(gè)界面工程，可直接調(diào)用基類(lèi)的方法，無(wú)需區(qū)分控件具體的類(lèi)別。這樣提高了代碼的重用度，減少了冗余代碼。


3? 系統(tǒng)實(shí)現(xiàn)

GEF基于MVC框架，可以方便地實(shí)現(xiàn)drop／drag、undo／redo、move、delete、resize等圖形編輯器的基本功能，并且提供了常用的布局器，非常適合用于開(kāi)發(fā)所見(jiàn)即所得的界面編輯器。其中，GEF的EditPart對(duì)應(yīng)MVC中的Controller，F(xiàn)igure對(duì)應(yīng)View。

本工具基于GEF開(kāi)發(fā)，可以最大限度地減小開(kāi)發(fā)工作量，增強(qiáng)軟件的穩(wěn)定性。同時(shí)，Java開(kāi)發(fā)使得本工具可以在任何具有Java虛擬機(jī)的系統(tǒng)上運(yùn)行，具有良好的跨平臺(tái)性。

3.1? 基于GEF實(shí)現(xiàn)的界面設(shè)計(jì)工具

本工具提供對(duì)菜單、狀態(tài)條、位圖，以及對(duì)話(huà)框控件(包括CheckBox，ComboBox，PushButton，RadioButton，MonthCalendar，GridView，M1Edit，ProgressBar，Property-Sheet，Static，StaticBox，TreeView，TrackBar，SpinBox等)的編輯功能。對(duì)于控件的修改，可以通過(guò)屬性頁(yè)和在界面上直接操作來(lái)進(jìn)行。屬性頁(yè)上的編輯通過(guò)IPropertySource接口的setPropertyValue方法告知Model，Model再通過(guò)PropertyChangeSupport類(lèi)的firePropertyChange方法通知EditPart做出修改；來(lái)自界面上的變化被封裝成request派發(fā)給EditPart，EditPart再通過(guò)command修改Model中的數(shù)據(jù)，Model在修改完數(shù)據(jù)之后告知EditPart有數(shù)據(jù)被修改；EditPart收到Property改變的通知后，根據(jù)修改數(shù)據(jù)類(lèi)型做出相應(yīng)操作(比如重繪figure等)。

以對(duì)CheckBox的操作為例來(lái)說(shuō)明基于GEF的控件處理流程，如圖4所示。其中，操作A是從工具箱拖拽一個(gè)新的CheckBox到Dialog中；操作B是通過(guò)屬性頁(yè)修改CheckBox顯示的文本(Text)；操作C直接通過(guò)選中CheckBox拖拽改變其大小。操作A1～A4、B1～B3、C1～C3為具體的執(zhí)行流程。



3.2? 圖形顯示問(wèn)題

在GEF中，每個(gè)視圖只有在其父視圖的有效范圍內(nèi)才能響應(yīng)交互事件。如果直接按照MiniGUI的控件關(guān)系來(lái)組織模型，則界面設(shè)計(jì)工具不能很好地完成與用戶(hù)的交互。

以菜單為例，生成MiniGUI中菜單部分的代碼僅需完成一棵樹(shù)的遍歷。這棵樹(shù)的每個(gè)非葉節(jié)點(diǎn)都是一個(gè)彈出菜單，葉節(jié)點(diǎn)是普通的菜單項(xiàng)，根節(jié)點(diǎn)是一個(gè)虛節(jié)點(diǎn)，用于串連起整個(gè)菜單，如圖5(a)所示。每個(gè)節(jié)點(diǎn)都被稱(chēng)作MenuItem。這種樹(shù)形結(jié)構(gòu)在GEF顯示時(shí)根據(jù)Model創(chuàng)建的Figure如圖5(b)所示，其中Figurell為Figurel的childFigure。在GEF中，只有childFigure被包含在parentFigure的有效范圍內(nèi)，對(duì)childFigure提出的請(qǐng)求才能被其parentFigure派發(fā)給childFigure對(duì)應(yīng)的Controller，并反映給Model，如圖5(c)所示。顯然樹(shù)形結(jié)構(gòu)無(wú)法滿(mǎn)足修改菜單項(xiàng)的需求，因此，在MenuItem構(gòu)成的樹(shù)形結(jié)構(gòu)基礎(chǔ)上增加了由Menu組成的鏈表結(jié)構(gòu)，同時(shí)每個(gè)MenuItem都增加一個(gè)指向自己上一級(jí)MenuItem的Parent指針，如圖5(d)所示。每個(gè)Menu(ij)記錄包括的所有MenuItem(ij，k)，以及創(chuàng)建自己的Menultem(i，j)。MenuItem(ij，k)表示屬于Menu(ij)的第k個(gè)MenuItem，Menu(ij)表示MenuItem(i，j)展開(kāi)的下級(jí)Menu。所有的Menu組成一個(gè)鏈表，GEF顯示的是這個(gè)鏈表的內(nèi)容，而不是原來(lái)的MenuItem樹(shù)。這樣，每個(gè)MenuItem對(duì)應(yīng)的Figure就可以包含在其parentFigure中，相應(yīng)的controller也就能夠收到界面上傳來(lái)的請(qǐng)求。



將MenuItem屬性改變?yōu)镻opUp，可以為其建立下級(jí)子Menu。新建函數(shù)的流程如下(參數(shù)是當(dāng)前屬性修改為PopUp的MenuItem)：



為Menu新建一個(gè)MenuItem的函數(shù)：



Menultem對(duì)應(yīng)的Figure還應(yīng)提供方法DimensiongetPreferredSize(int hint，int hint2)，用于獲得MenuItem屬性改變導(dǎo)致的Figure新的大小和位置。

Menu的EditPart還應(yīng)提供以下方法：

①重繪自己和下面所有的MenuItem及其下級(jí)的Menu。函數(shù)Rectangle CalcMenuSize(MenuEditPart)用于得到一個(gè)能夠容納下包括的所有MenuItem的矩形。


②遞歸地將要update的MenuEditPart的下級(jí)Menu中，當(dāng)前可見(jiàn)的所有Menu及其對(duì)應(yīng)的MenuItem變?yōu)椴豢梢?jiàn)。


3.3數(shù)據(jù)存儲(chǔ)

可擴(kuò)展標(biāo)記語(yǔ)言(Extensible Markup Language，XML)與其他格式的語(yǔ)言相比，具有以下優(yōu)勢(shì)：具有良好的擴(kuò)展性，允許使用者創(chuàng)建和使用自己定義的標(biāo)記來(lái)定義控件的類(lèi)型和屬性；樹(shù)狀存儲(chǔ)結(jié)構(gòu)和良好的自描述性，非常適合對(duì)界面元素進(jìn)行描述；XML的靈活性提供了一種結(jié)構(gòu)化的數(shù)據(jù)表示方式，使得用戶(hù)界面分離于結(jié)構(gòu)化數(shù)據(jù)。

因此，界面設(shè)計(jì)工具將界面設(shè)計(jì)結(jié)果存儲(chǔ)為XML格式。由于Java中提供了XML文檔生成和解析的類(lèi)，因而簡(jiǎn)化了編碼工作量，增強(qiáng)了軟件可靠性。

示例如下：



最外層的Project表示內(nèi)層都是界面的布局，第2層Dialog表示其內(nèi)層對(duì)應(yīng)一個(gè)對(duì)話(huà)框布局，第3層由多個(gè)和<／XXCtrl>對(duì)構(gòu)成(XXCtrl對(duì)應(yīng)不同的控件名，比如buttonCtrl對(duì)應(yīng)button控件)。每個(gè)XXCtrl代表一個(gè)控件，和<／XXCtrl>對(duì)里面是控件的屬性。第2層也可由多個(gè)和<／Content>對(duì)構(gòu)成，Content可為Dialog(對(duì)話(huà)框)、Menu(菜單)、ToolBar(狀態(tài)條)、Icon(位圖)，其內(nèi)層根據(jù)Content不同而由不同的XXCtrl對(duì)構(gòu)成。

4? 實(shí)驗(yàn)結(jié)果

可視化工具的運(yùn)行界面如圖6所示。左側(cè)為工程管理區(qū)，可以看到當(dāng)前工程建立的所有界面布局。中間部分的編輯區(qū)是一個(gè)打開(kāi)的對(duì)話(huà)框布局，可在這里進(jìn)行控件的drop／drag、undo／redo、move、delete、resize等操作。右側(cè)是控件屬性編輯區(qū)，用于修改控件屬性(比如ID、文字風(fēng)格、邊框等)。



結(jié)? 語(yǔ)

本文設(shè)計(jì)了一個(gè)MiniGUI可視化開(kāi)發(fā)工具，利用Eclipse GEF實(shí)現(xiàn)。用戶(hù)使用本工具可以對(duì)圖形用戶(hù)界面進(jìn)行可視化的設(shè)計(jì)及修改，同時(shí)可以擴(kuò)充自己的控件、定義控件的屬性，豐富界面的表現(xiàn)形式，實(shí)驗(yàn)表明，本工具在實(shí)際系統(tǒng)中運(yùn)行良好穩(wěn)定，有效地提高了圖形用戶(hù)界面的開(kāi)發(fā)效率。