扩展Visual Editor的控件和属性 - 编程入门网

扩展Visual Editor的控件和属性

扩展 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 进行相应的扩展。这就是本文讲述的内容。

扩展Visual Editor的控件和属性(2)

引言

本文希望对 Visual Editor 进行扩展，加入符合特定业务逻辑的控件，该控件的需求如下：

为 SWT 控件，是 Label 和 Text 两个控件的组合，其中 Label 要显示 Text 控件的提示信息，而用户可以在 Text 中输入相应内容。下图是用户名的例子：

用户名

可以对 Text 控件的输入长度进行控制，比如最大输入 8 个字符，则输入 8 个字符后将无法继续输入。

可以选择当输入超出设定时，是否发出 Beep 声音提醒。

在该实例过程中，本文将说明如何：

扩展一个 Java Build Path 的 Library。

扩展 Palette 中的控件。

扩展属性视图显示定制控件信息。

触发属性编辑器来编辑控件属性。

将代码与属性编辑器相互同步。

控件实现

TextItem 是该控件的具体实现，读者可以参阅本文附件的源码，需要提及的是：

TextItem 继承于 SWT 的 Composite 控件，在 Composite 中包括 Label 和 Text 两个 SWT 控件，Label 用以显示 Title，Text 用以用户输入。

采用 TextItemModel 定义该控件的属性，该 Model 是一个 Java Bean，由 Title 和 Max Length 两个属性构成。抽象出一个模型类主要为了增加该控件的复杂度，并展示如何通过 Property Editor 编辑该模型类。设定 TextItemModel 的代码段：

清单1：设置 TextItemModel

public void setMode

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!