快速业务通道

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

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-07-04

扩展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的控件和属性 - 编程入门网

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

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

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

Palette 区,提供了所有已扩展的,供用户选用的 Visual Beans,用户可以拖拽控件至图形区定制界面。若 Palette 里没有列出的控件同时该控件也在 Class Path 中的情况,可以选用扩展Visual Editor的控件和属性 - 编程入门网按钮进行对控件的手动选择。

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

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

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

图 2:Visual Editor 各模块交互图

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

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

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

时间:2011-03-06 IBM 王 浩

引言

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

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

用户名

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

可以对 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 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号