采用GEF的MiniGUI的可視化開發工具技術

1? 概? 述

隨著嵌入式系統的廣泛應用，圖形用戶界面(GraphicalUser Interface，GUI)在嵌入式系統中的地位也越來越重要。

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

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

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

傳統的MiniGUI程序開發是基于文本編輯器的，開發人員在程序源代碼編寫過程中無法預先看到窗口、控件的整體效果，缺乏一個可視化的開發環境。因此，本文設計了一個MiniGUI可視化開發工具，并使用Eclipse GEF(GraphicaI Ediring Framework)實現。

2? 可視化開發工具整體設計

2.1? 功能需求

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

2.2? 整體結構

可視化開發工具主要由界面設計工具和源代碼生成工具兩部分組成。整體結構如圖1所示。



界面設計工具：實現所見即所得的界面編輯器功能，可以根據需要改變和調整顯示的內容和形式，這使得用戶界面的制作非常方便。采用傳統的面向對象設計方法來開發可視化界面，會遇到用戶界面和底層的數據雜合、接口擴展導致的類膨脹等問題，因此界面設計工具使用MVC模式設計。用戶通過界面設計工具的“控件設計”設置控件屬性；“交互事件響應”用于響應界面編輯過程中發生的交互事件，完成控件屬性的修改。這兩部分對應MVC中的Controller?！翱丶悺北４婵丶母鞣N屬性，對應Model。“控件顯示”根據控件類的屬性設置顯示控件，對應View。XML文檔則負責保存界面布局，控件類也能夠根據XML解析文檔內容得到自身屬性。

源代碼生成工具：通過遍歷所有控件類的屬性，將圖形用戶界面布局按照運行平臺要求(目前僅支持RTEMS)生成相應的MiniGUI源代碼。

2.3? 組織結構

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



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


3? 系統實現

GEF基于MVC框架，可以方便地實現drop／drag、undo／redo、move、delete、resize等圖形編輯器的基本功能，并且提供了常用的布局器，非常適合用于開發所見即所得的界面編輯器。其中，GEF的EditPart對應MVC中的Controller，Figure對應View。

本工具基于GEF開發，可以最大限度地減小開發工作量，增強軟件的穩定性。同時，Java開發使得本工具可以在任何具有Java虛擬機的系統上運行，具有良好的跨平臺性。

3.1? 基于GEF實現的界面設計工具

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

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



3.2? 圖形顯示問題

在GEF中，每個視圖只有在其父視圖的有效范圍內才能響應交互事件。如果直接按照MiniGUI的控件關系來組織模型，則界面設計工具不能很好地完成與用戶的交互。

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



將MenuItem屬性改變為PopUp，可以為其建立下級子Menu。新建函數的流程如下(參數是當前屬性修改為PopUp的MenuItem)：



為Menu新建一個MenuItem的函數：



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

Menu的EditPart還應提供以下方法：

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


②遞歸地將要update的MenuEditPart的下級Menu中，當前可見的所有Menu及其對應的MenuItem變為不可見。


3.3數據存儲

可擴展標記語言(Extensible Markup Language，XML)與其他格式的語言相比，具有以下優勢：具有良好的擴展性，允許使用者創建和使用自己定義的標記來定義控件的類型和屬性；樹狀存儲結構和良好的自描述性，非常適合對界面元素進行描述；XML的靈活性提供了一種結構化的數據表示方式，使得用戶界面分離于結構化數據。

因此，界面設計工具將界面設計結果存儲為XML格式。由于Java中提供了XML文檔生成和解析的類，因而簡化了編碼工作量，增強了軟件可靠性。

示例如下：



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

4? 實驗結果

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



結? 語

本文設計了一個MiniGUI可視化開發工具，利用Eclipse GEF實現。用戶使用本工具可以對圖形用戶界面進行可視化的設計及修改，同時可以擴充自己的控件、定義控件的屬性，豐富界面的表現形式，實驗表明，本工具在實際系統中運行良好穩定，有效地提高了圖形用戶界面的開發效率。