CN102707945A

CN102707945A - 一种Eclipse基于布局模版的表单设计器的实现方法

Info

Publication number: CN102707945A
Application number: CN2012101111271A
Authority: CN
Inventors: 周涛; 蒋玉芬; 田之进
Original assignee: PCI Suntek Technology Co Ltd
Current assignee: PCI Suntek Technology Co Ltd
Priority date: 2012-04-11
Filing date: 2012-04-11
Publication date: 2012-10-03

Abstract

本发明公开了一种Eclipse基于布局模版的表单设计器的实现方法。Eclipse灵活的GEF插件框架，使得在J2EE集成开发环境中构建企业自主的表单设计器更为简便。然而传统的基于Grid布局和Form布局等设计方式，较难解决表单控件的嵌套布局以及表单样式问题。本发明通过定义布局模版的方式，简化了嵌套布局的代码生成问题，并通过自定义标签技术，较好体现了所见即所得的表单设计效果；同时，在代码生成方面，提供了一种简易的布局算法，使得在表单上面增删元素时的代码生成更为智能。

Description

一种Eclipse基于布局模版的表单设计器的实现方法

技术领域

本发明涉及信息技术领域，特别是Eclipse插件GEF表单设计器的实现。

背景技术

表单代码生成技术是Web应用开发中的常见技术。在工作流、业务开发环境等项目中，更是一个关键的组件。表单设计器，一般可以分为两种类型，HTML在线编辑器，IDE表单设计器。独立管理页面资源的使用场景下面，可以采用HTML编辑器，但更多的应用场合，需要跟后台的代码进行交互引用，所以在IDE中集成表单设计器，有更为广泛的使用价值。

由于Eclipse灵活的GEF插件框架，使得在J2EE集成开发环境中构建企业自主的表单设计器成为可能。然而传统的基于表格布局和表单布局的设计方式，较难解决嵌套的布局问题以及表单控件的样式问题。本发明通过定义布局模版的方式，简化了嵌套布局的代码生成问题，通过自定义标签技术解决所见即所得的样式问题；同时，在代码生成方面，也提供了一种简易的布局算法，使得在表单上面增删元素时的代码生成更为智能。

发明内容

本发明公开了一种Eclipse基于布局模版的表单设计器的实现方法。通过定义布局模版的方式，简化了表单设计器中嵌套布局的代码生成问题；同时，在代码生成方面，提供了一种简易的布局算法，使得在表单上面增删元素时的代码生成更为智能。

为实现上述发明目的，本发明提供一套自定义标签。包括常用的Windows表单控件的标签，如单行文本框、多行文本框、下拉选框、单选框、复选框等；同时也包括Grid、Window等容器标签。

标签的属性，设计有Plugin属性，用作记录Model在插件图形设计器的位置信息(X，Y，Width，Height)，方便重新加载页面时，标签元素的位置还原，构造成相应的Model，生成Model的位置属性。这样设计和浏览页面可以使用同一个源文件。标签的属性，通过TLD文件映射到GEF的Model属性，在GEF的MVC框架中，通过事件监听的方式，触发属性修改事件，同步插件中图形和代码编辑器中控件的相应属性值。

本发明还提供了多种布局模版。布局模版的框架结构分为3层：模版层、窗口层、控件层。模版层为最顶层，是窗口层的容器，窗口层是控件层的容器。

新建表单页面时，可以选择插件内置的模版样式，自动生成对应的模版页面代码；窗口层为模版子窗口，这层支持Grid布局，表单控件可以任意拖放至窗口区域内，只要位于窗口行列表格背景的单元格内，即可通过代码生成器生成窗口层的控件标签代码，嵌套进模版层生成代码当中，完成整个页面的代码生成。控件层的代码，对应表单控件，设计样式对应JSP标签样式，达到所见即所得的效果。

本发明还提供页面代码生成器插件。代码生成通过Velocity模版引擎实现。模版、窗口、控件层的代码均定义了自己的模版文件。通过GEF的Model输入，控制页面代码的生成。

本发明还提供布局切换功能。布局切换指，在窗口层可以动态选择修改窗口的布局样式，支持表格列数设置、背景设置、行高设计。布局切换之后，通过代码生成器重新生成代码，该窗口区域内的控件代码，自动填写进新的窗口布局单元格内；

本发明还提供自定义模块扩展。模版与窗口容器在设计器视图中的显示和源代码视图中的显示内容，都由资源配置文件进行控制。所以，新增样式可以通过添加新的模版资源文件进行扩展。扩展的模版窗口的样式，采用统一的界面风格。

由上述方案可以看出，本发明中通过自定义标签确定设计器控件的样式；通过布局代码模版生成嵌套窗口布局；通过在窗口内表格排序算法生成子窗口布局代码的方式，集合填充到模版窗口代码框的方式，完成整个页面的代码生成，设计者，只需要调整模版的窗口大小，往子窗口中拖放入控件的方式，就可以完成复杂布局的表单设计和代码生成，操作简便。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍。

图1为本发明实施例中系统结构示意图；

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步的说明。

实施例一，参见图1。

本发明提供一种基于布局模版的表单设计器的实现，其开发实施过程如下：

1)通过向导页面，选择表单设计时使用的布局模版，向导页面提供了布局模版效果图的参数图例，方便用户进行选择。

2)选择完布局模版之后，系统自动完成设计视图的布局样式，构建GEF模型，并生成源代码视图的布局模版代码。

3)用户可以拖拉调整布局子窗口大小，适合布放窗口内控件。

4)拖放各表单控件元素到各子窗口的表格布局单元格内，设置控件属性。

5)保存修改。此时可切换到源代码视图查看生成后的html代码。

6)启动Tomcat服务器，插件设计器切换到预览视图，查看显示效果。

Claims

1.自定义标签样式，包括常用的Windows表单控件的标签，如单行文本框、多行文本框、下拉选框、单选框、复选框等；同时也包括Grid、Window等容器标签；

标签的属性，设计有Plugin属性，用作记录Model在插件图形设计器的位置信息(X，Y，Width，Height)，方便重新加载页面时，标签元素的位置还原，构造相应的Model，生成Model的位置属性。这样设计和浏览页面可以使用同一个源代码文件。

2.布局模版，布局模版的框架结构分为3层：模版层、窗口层、控件层。模版层为最顶层，是窗口层的容器，窗口层是控件层的容器；

新建表单页面时，可以选择插件内置的模版样式，自动生成对应的模版页面代码；窗口层为模版子区域，这层支持Grid布局，表单控件可以任意放置在窗口区域，通过代码生成器生成窗口层的控件标签代码，嵌套进模版层生成代码当中，完成整个页面的代码生成。控件层的代码，对应表单控件，插件设计样式对应JSP标签样式，达到所见即所得的效果。

3.代码生成器，代码生成通过Velocity模版引擎实现，模版、窗口、控件层的代码均定义了自己的模版文件，通过GEF的Model输入，控制页面代码的生成。

4.布局切换功能，布局切换指，在窗口层可以动态选择修改窗口的布局样式，支持表格列数设置、背景设置、行高设计。布局切换之后，通过代码生成器重新生成代码，该窗口区域内的控件代码，自动填写进新的窗口布局单元格内。

5.自定义模块扩展，模版与窗口容器在设计器view中的显示和源代码视图中的显示内容，都由资源配置文件进行控制。所以，新增样式可以通过添加新的模版资源文件进行扩展。扩展的模版窗口的样式，采用统一的界面风格。