基于GEF的MiniGUI可视化开发工具设计

3．2 图形显示问题
在GEF中，每个视图只有在其父视图的有效范围内才能响应交互事件。如果直接按照MiniGUI的控件关系来组织模型，则界面设计工具不能很好地完成与用户的交互。
以菜单为例，生成MiniGUI中菜单部分的代码仅需完成一棵树的遍历。这棵树的每个非叶节点都是一个弹出菜单，叶节点是普通的菜单项，根节点是一个虚节点，用于串连起整个菜单，如图5(a)所示。每个节点都被称作MenuItem。这种树形结构在GEF显示时根据Model创建的Figure如图5(b)所示，其中Figure11为Figure1的childFigure。在GEF中，只有childFigure被包含在parentFigure的有效范围内，对childFigure提出的请求才能被其parentFigure派发给childFigure对应的control-ler，并反映给Model，如图5(c)所示。显然树形结构无法满足修改菜单项的需求，因此，在MenuItem构成的树形结构基础上增加了由MeInu组成的链表结构，同时每个MenuItem都增加一个指向自己上一级MenuItem的Par-ent指针，如图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的函数：

MenuItem对应的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>对构成(XXCtrl对应不同的控件名，比如buttonCtrl对应button控件)。每个XXCtrl代表一个控件，XXCtrl>和／XXCtrl>对里面是控件的属性。第2层也可由多个Content>和／Content>对构成，Content可为Dialog(对话框)、Menu(菜单)、Tool-Bar(状态条)、Icon(位图)，其内层根据Content不同而由不同的XXCtrl对构成。

4 实验结果
可视化工具的运行界面如图6所示。左侧为工程管理区，可以看到当前工程建立的所有界面布局。中间部分的编辑区是一个打开的对话框布局，可在这里进行控件的drop／drag、undo／redo、move、delete、resize等操作。右侧是控件属性编辑区，用于修改控件属性(比如ID、文字风格、边框等)。

结 语
本文设计了一个MiniGUI可视化开发工具，利用Eclipse GEF实现。用户使用本工具可以对图形用户界面进行可视化的设计及修改，同时可以扩充自己的控件、定义控件的属性，丰富界面的表现形式。实验表明，本工具在实际系统中运行良好稳定，有效地提高了图形用户界面的开发效率。