扩展Visual Editor的控件和属性

扩展Visual Editor的控件和属性2011-03-06 IBM 王浩扩展 Visual Editor 的控件和属性

Visual Editor for Java 是基于 eclipse 的 GUI 可视化编辑插件，该插件以 Java 代码为中心，实现了所见即所得的用户界面编辑方式，广泛支持目前的 SWT、AWT、Swing 等控件包。本文通过一个完整的对 Visual Editor 的扩展示例，向读者展示扩展 Visual Editor 的控件和属性的方法。

背景

Visual Editor for Java 实现了基于 Java 源代码的所见即所得的用户界面开发模式。当 Java 源代码打开后，Visual Editor 将对其进行解析，寻找可以识别的控件，并将其展现至图形化的编辑器中，其外观和运行时完全一致。支持用户由 Palette 引发的控件拖拽的操作，支持对控件属性的编辑，同时实时的生成相应的代码。

图 1：Visual Editor 工作区概览

如上图截图所示，Visual Editor 的编辑区主要由五部分构成：

图形编辑区，所见即所得的反映用户界面的情况。

Java代码区，为图形区用户界面对应的 Java 源码，与图形区同步。

Palette 区，提供了所有已扩展的，供用户选用的 Visual Beans，用户可以拖拽控件至图形区定制界面。若 Palette 里没有列出的控件同时该控件也在 Class Path 中的情况，可以选用

按钮进行对控件的手动选择。

属性视图，显示当前选中的控件可编辑的所有信息。该视图中的属性更改，直接同步于 Java 代码区的代码，同时，UI相关的更改也会反映至图形编辑区。对于比较简单的类型的属性，比如字符串类型或布尔类型，可以直接在视图中更改，对于复杂的类型，比如字体或颜色等，则可以扩展 Property Editor 对其进行编辑。

Java Beans视图，展示目前定制了的所有控件的层次关系。在该视图进行的选择或右键点击等操作，实现的效果与图形编辑区相同，选择操作与另外的几个区同步。

Visual Editor 各部分的交互情况，可以由下图表示，该图中初始化动作，就是通过对 Java 代码的解析，将其内容反应至属性视图或者属性编辑器中，这是代码生成的逆过程。

图 2：Visual Editor 各模块交互图

Palette 中提供了常用的 UI 控件的实现，包括 Swing、AWT、SWT 等的支持。如果用户希望根据自身需求，定制所需的控件，又希望能够通过 Visual Editor 进行识别和编辑，则需要对 Visual Editor 进行相应的扩展。这就是本文讲述的内容。