1.
概述

Designer
是一款所见即所得设计工具，使用该工具您能够从选项选用板中拖放控件来构建展现页面。

GForms设计器支持中文及英文两种语言，具体所使用的语言由用户的电脑配置环境决定。

2.
GForms透视图

为了更好的使用GForms设计器，请在打开Eclipse开发平台后，在右上角切换到GForms透视图：

请在透视图列表中选择“GForms”，将工作台切换到如下布局：

3.
创建

3.1.
创建GForms工程

在GForms视图下，可以直接通过菜单：FileànewàGForms工程，打开创建GForms工程向导：

或直接通过菜单：FileànewàProject，在弹出的创建工程向导中，选择“GForms”分类下的“GForms工程”:

在创建GForms工程的页面，录入工程名称即可，示例如下图：

使用建议：

在创建GForms工程时，为了节省时间，请按如下建议对Eclipse进行设置：

l
为了减少Eclipse检查验证javascript、css、图片等文件的过程，在Eclipse的菜单中：WindowsàPreference，在弹出的首选项配置中，找到validation配置页，勾选上阻止所有项的验证，如下图所示：

l
取消工程的自动编译功能，因为该功能将导致大量的编译，降低开发效率。

3.2.
创建GForms表单

在GForms视图下，可以直接通过菜单：FileànewàGForms文件，打开创建GForms文件向导：

或者，直接在需要创建GForms页的文件夹右键菜单选择New-àFile：

4.
GForms设计器

为了更好的使用GForms设计器，请在打开Eclipse开发平台后，在右上角切换到GForms透视图：

4.1.
控件面板

GForms平台所支持的所有的控件，包括17个核心控件（或基础控件）、8个容器控件、9个扩展控件及6个图形控件，同时还包括上下文菜单等控件类型。

可以选择任意一个控件图片，然后拖拽到右边的设计器区域，即可在设计器中添加控件。

使用提示：如果控件面板已经关闭，有两种方式打开控件面板：

方法一：则可以通过在Eclipse的菜单栏选择：WindowsàShow
View，然后在弹出的视图对话框中选择Palette即可再次打开控件面板；

方法二：在设计器的右键菜单中选择“打开控件面板视图”。

4.2.
设计器区域

设计器包括5个标签页：

?
设计：UI设计界面。

?
辅助：上下文菜单及上传下载控件专用。

?
脚本：

编写JavaScript脚本，支持着色、提示等功能：

?
XML：

XML编辑器，用于编辑当前GForms的配置信息或XML数据片段。

注意：

l
每个XML片段，必须提供一个当前页唯一的ID用于标识该XML片段，并且在javaScript视图中，可以通过XML的ID去访问或操作XML数据片段。

l
每个XML片段的只能有且仅有一个根元素，并且需要存放到<xml
id=”xxx”></xml>之内。

l
每次编辑xml片段时需要确保是合法的XML，否则gforms编辑器拒绝保存。

?
预览：

提供快速预览当前设计结果，默认使用的浏览器为Eclipse内置的IE浏览器，如果目标运行浏览器为其他浏览器，请在Eclipse之中进行浏览器设置。

设置浏览器方式为在菜单Windowsà首选项：

请在进行浏览之前，把当前GForms应用部署到服务器上，如Tomcat或IBM
Webshpere Application
Server、weblogic等服务器之中，并在当前GForms应用的首选项中同步配置（应用发布及同步配置，请参考应用首选项配置使用手册）。

使用提示：

l
GForms应用发布功能支持应用部署到本地服务器或远处服务器上。

l
预览时会直接把当前GForms表单发布到服务器。

l
除了在预览出检查开发结果，也可以在外部浏览器，如Firefox、Chrome、IE中查看开发结果（在预览页面右键选择属性即可查看访问URL路径）。

4.3.
设计器上下文菜单

设计器的包含丰富的右键菜单，方便开发人员快捷开发，用户选择不同的控件会有不同的右键菜单，其中在设计器的空白位置右键菜单如下图所示：

除常规的编辑操作：剪切、拷贝、粘贴、重复、删除、重做、取消外，还有一些功能菜单项：

4.4.
控件类型转换

为方便开发，GForms设计器提供了控件类型转换功能，可以方便的把某个控件转换为所需要的其他控件。

当选择某个具体的控件时，如Input输入框，其上下文菜单如下图所示：

“转换到”子菜单允许把当前所选择的控件转换为其他类型。

当选择是容器控件：group、groupbox、fieldset、重复容器、表格时：

如果转换为表格，则转换后的控件如下：

4.5.
工具栏

在设计器中，选择几个控件，然后可以通过工具栏提供的功能快速实现对其、大小配置、删除、复制、取消/重做功能。

5.
视图

视图是开发GForms表单的重要组成部分，GForms的相关视图包括：控件属性视图、模型视图、模型实例视图、Web
Service视图及模型/实例属性视图。

5.1.
视图选择

GForms视图打开方式：在WindowsàShow
views，将弹出如下对话框，在对话框中选择“GForms设计器”下的某个视图即可：

5.2.
控件属性视图

显示或配置在设计器“设计”及“辅助”两个选项卡中创建的控件。

5.3.
模型视图

模型是GForms的核心要素，是整个GForms页面的重要控制配置，如可以配置模型实例、绑定、提交(submission)、操作等，详细功能使用说明请查看“模型”章节。

5.4.
模型实例视图

模型实例视图提供所有模型实例树展现，是GForms的数据源或提交的数据载体，GForms模型实例本质上是XML数据片段，可以在模型实例树中创建元素、属性、子元素等。

5.5.
Web Service视图

如果在GForms页面创建了web服务（使用WSDL或web服务URL），则可以使用Web
Service视图对web服务进行管理。

5.6.
模型/实例属性视图

对模型视图、模型实例视图中的项属性配置，需要在模型/实例属性视图中进行配置：

6.
模型管理

在模型视图中进行模型管理。

6.1.
模型配置

注意：所配置的schema文件需要同步到gforms服务器上，并且需要在运行时配置文件config.properties中配置appURL，否则会报如下错误：

详细参考《GForms
FAQ》文档。

6.2.
创建模型

在模型树的根节点或模型视图的工具栏中都可以进行模型的创建：

l
模型树根节点：

l
模型视图工具栏：

模型的创建包含三种方式：

?
创建空模型：将创建一个只包含ID的空模型，模型下不包含任何模型实例、绑定、动作等信息。

?
从XML创建模型：将创建一个包含ID的模型，模型下面创建一个从XML数据所构建的模型实例。

?
从schema创建模型：创建一个模型，并且在模型下创建一个根据所选择的schema构建的模型实例及schema中的数据类型绑定。

6.2.1.
从XML创模型

在弹出的对话框中粘贴需要创建模型的XML数据片段，XML数据片段可以有根元素，也可以没有。

点击“OK”后，所创建的模型位于模型树中，并在模型下方有模型实例：

并可以在模型实例视图中看到instance2模型实例。

6.2.2.
从schema创模型

GForms设计器支持从schema创建模型：

?
第一步：输入schema文本

schema文件文本如下：

第二步：选择创建模型的元素

点击“Finish”后，所创建的模型位于模型树中，并在模型下方有模型实例：

可以看到在模型下方有一个模型实例及若干个绑定，绑定的定义从schema文件中抽取元素数据类型作为绑定的数据类型。

并可以在模型实例视图中看到instance2模型实例。

同时，所引入的schema内容将作为所创建的模型的schema文本内容，请选择“model3”，然后在属性视图中可以看到：

注意：模型所引入的schema内容可以作为运行时数据校验的依据，上述schema所创建的模型实例中，如果拖拽as属性到设计器，则默认会构建一个下拉框控件，控件的两个选项为cash、credit；同时在运行时绑定到数据节点instance(‘instance2‘)/pay:payment/pay:cc的控件，将校验其长度为12。

6.3.
创建模型实例

在模型树的模型节点右键菜单中可以看到创建模型实例的功能菜单项：

模型的创建包含三种方式：

?
创建空模型实例：将创建一个只包含ID的空模型实例，模型实例不包含任何XML数据节点。

?
从XML创建模型实例：将创建一个包含ID的模型实例，模型实例下面创建一个从XML数据所构建的XML数据结构。

?
从schema创建模型实例：创建一个模型实例，并且在模型实例下创建一个根据所选择的schema构建的XML数据节点结构。

6.3.1.
从XML创建模型实例

在弹出的对话框中粘贴需要创建模型实例的XML数据片段，XML数据片段可以有根元素，也可以没有。

点击“OK”后，所创建的模型实例位于刚刚所选的模型下：

并可以在模型实例视图中看到instance5模型实例。

6.3.2.
从schema创建模型实例

GForms设计器支持从schema创建模型实例：

?
第一步：输入schema文本

schema文件文本参考“从schema创建模型”章节。

第二步：选择创建模型的元素

点击“Finish”后，所创建的模型位于模型树中，并在模型下方有模型实例：

并可以在模型实例视图中看到instance6模型实例。

注意：所引入的schema内容不会作为运行时数据校验的依据，而是仅仅从schema中选择某个的元素来构建一个模型实例，简化模型实例创建，并不会从schema文件中读取任何其他约束信息，如元素数据类型等。

6.3.3.
配置模型实例

选择模型树中的某个模型实例节点，在“属性视图”中可以查看或配置模型是的相关配置项，其中src配置项表示模型实例的数据来自于某个文件。

6.4.
创建绑定

可以在模型树中创建绑定，绑定是对某个数据节点的各种约束定义，包括对数据节点定义其的数据类型、只读条件、依赖条件、计算公式、约束配置等。

在模型树的模型节点右键菜单中可以看到创建绑定的功能菜单项：

新建绑定后，在模型下方出现新建的绑定，此时在“属性视图”中可以对该绑定进行属性配置，如下图所示：

对于一个绑定，首先要定义其节点，节点可以通过XPath编辑器编辑节点选择的xpath表达式。

配置提示：

l
xpath表达式：既可以手动录入xpath表达式，也可以通过xpath编辑器辅助创建xpath表达式。

l
子绑定：绑定下方还可以包含绑定，用于定义父绑定的数据节点的不同配置项。通常不会使用到子绑定。

6.5.
创建提交submission

提交submission是GForms前端与后端服务交互的桥梁，submission的创建方式为：在模型视图中---》选择模型树---》选择某个需要创建提交的模型—》右键菜单—》“提交”：

新建“提交”后，在模型下方出现新建的提交，此时在“属性视图”中可以对该提交进行属性配置，如下图所示：

对于一个提交，必须定义资源路径，资源路径可以通过xpath定义，也可以指定一个静态的资源路径URL。

配置提示：

l
相关性约束：如果配置为true则表示当系列化需要提交的模型实例或模型实例节点时，将把那些配置了绑定属性relevant的数据节点，如果计算relevant为false，则该节点将不被系列化。

l
介质类型：如果后端服务依赖于所传递前端所发送的Accept，如spring
Restfull，此时当方法为post时，需要格外注意，需要配置replace为instance并配置媒体类型为合适的类型才能实现该目的。

6.5.1.
submission动作

提交可以包含若干个动作，这些动作的事件只能为：

xforms-submit、xforms-submit-error、xforms-submit-done，事件具体描述请参考“GForms标准事件”。

6.6.
创建动作

操作是GForms平台提供的标准操作，操作创建方式为：在模型视图中---》选择模型树---》选择某个需要创建动作的模型—》右键菜单—》“动作”：

6.6.1.
标准动作列表

GForms平台提供的标准动作如下表：

创建操作后，可以在“属性视图”中配置各个操作的具体配置信息：

具体每个动作的配置请参考“GForms操作”部分具体解释。

配置提示：

l
在模型实例树中配置的动作将作为全局动作，而在控件中所配置的动作则仅仅是针对某个控件的。

l
action动作：是一系列动作的集合，所有子动作的事件均与action动作一样。

6.6.2.
调整动作顺序

在运行时，动作的执行是按顺序进行的，排在前面的将先执行，靠后的后执行，在很多时候，特别是form载入时，需要请求后台数据，而在请求执行可能需要设置一些请求参数，设置数据节点的值有两种方式：

1）为页面配置xforms-init事件，并在事件中通过XML工具设置模型实例相关节点的值。

2）通过标准动作setValue设置数据节点的值，我们推荐使用该方式，但是需要注意setValue动作的位置，应该放在send动作之前：

可以通过动作右键菜单的“上移动作”、“下移动作”实现。

6.7.
删除组件

在模型实例树中可以删除任何提交、绑定、动作、模型实例及模型：

选择要删除的组件，然后右键菜单中点击“删除”即可删除组件。

7.
模型实例

在模型实例视图中进行模型管理。

模型实例的创建在“模型视图”的模型树中进行，具体参考“模型管理”中的“创建模型实例”。

可以在模型实例中手动创建实例数据节点、元素、节点文本等信息。

如果配置模型实例的介质类型为json，则模型实例视图如下（增加了对json的操作）：

7.1.
模型实例配置

如果为模型实例配置了xml或json文件数据源，但是该文件不存在或没有同步到gforms应用，则会报如下错误：

配置提示：

1）如果为模型实例配置了src属性，并且同时配置了数据节点，则src优先于数据节点，即所配置的数据节点在运行时失效。

2）src的文件路径必须相对于webContent目录的绝对路径，并且文件必须存在根目录元素且该根目录相当于模型实例的data根节点。

引用date的ref
xpath表达式为：instance(‘test’)/date。

如果配置模型实例的类型为json，除了数据格式与XML不一样，在设计器使用及运行时均与XML一致，如则设计器会把json字符串使用XML树的方式展现出来，运行时也可以通过xpath访问json节点。

但是，json类型的模型实例，不可以为元素节点创建属性、不可配置名称空间，同时模型实例的虚拟根节点data名称修改后再次打开将仍然为data。

如果为json类型的模型实例配置数据源文件，则数据源文件必须为json格式，且第一层必须是对象，样式如下：

运行时的xml树状结构为（根节点data为辅助节点）：

7.2.
配置节点

选择模型实例树中的任何一个树节点，就可以在“属性视图”中看到其配置，并可以修改其配置信息。

7.3.
查看XML

可以在模型实例树的实例节点、元素节点的右键菜单使用该功能，该功能将把所选的模型实例、元素的数据结构转换为XML字符串。

7.4.
粘贴XML作为元素

可以在模型实例树任意元素节点的右键菜单使用该功能，该功能将把所粘贴的XML数据片段创建到元素节点下方。

粘贴后的模型实例结构：

配置提示：所粘贴的XML可以不存在根元素。

7.5.
查看Json

该功能只有当配置模型实例的介质类型为json时可用。

可以在模型实例树的实例节点、元素节点的右键菜单使用该功能，该功能将把所选的模型实例、元素的数据结构转换为JSON字符串。

7.6.
粘贴json作为元素

该功能只有当配置模型实例的介质类型为json时可用。

可以在模型实例树任意元素节点的右键菜单使用该功能，该功能将把所粘贴的JSON数据片段创建到元素节点下方。

粘贴后的模型实例结构：

配置提示：粘贴json为模型实例数据后，模型实例树将以xml方式查看json，如上图所示。

7.7.
新增元素

在任意一个没有元素文本的元素的右键菜单中使用该功能为元素添加子元素。

7.8.
新增属性

可以为任意一个元素增加属性。

7.9.
删除

可以删除除模型实例节点、模型实例根节点外的任意一个元素、属性或文本节点。

7.10.
创建UI

可以拓展任意模型实例数据节点到设计器，从而构建UI界面：

如把上图的“transaction”节点拖拽到设计器后，所构建的UI如下图所示：

各个控件的节点引用配置如下：

可以看出，除外层的groupbox容器使用绝对路径引用模型实例节点外，其他几个控件均使用相对路径。

8.
Web Service

GForms对web服务提供了支持，可以非常快捷的把一个web服务导入到GForms。

8.1.
新建web服务

在“控件面板”的最下方找到“web服务”，拖拽该图标到右边的设计器，将启动新建web服务向导过程：

第一步：指定web服务路径

支持使用本地wsdl文件或远处服务器的WSDL文件。

第二步：选择web服务服务、端口、操作

一次只能添加一个web服务操作到GForms，如果要添加多个操作需要执行多次新建web服务向导。

第三步：配置是否创建web
service
UI、是否载入时调用web服务

如果需要自动构建web
service的UI界面请勾选上“自动构建表单UI元素”；如果需要在form载入时就调用web服务，则请勾选“载入时调用web服务”。

当点击“Finish”按钮后，向导过程结束，将自动打开“web服务”视图：

在视图中可以看到刚才所构建的web服务操作信息，web服务视图详见下一节。

同时，在模型视图中也可以看到所创建的web服务相关的模型、模型实例及提交：

注意：开发人员不可在模型树中删除web
service相关的组件，如模型、模型实例、提交组件，但是可以在新添加组件，如添加动作、绑定、提交等新组件。

8.2.
web服务视图

在web服务视图中专门对GForms中的web服务进行管理。

8.2.1.
web服务树结构

第一层元素：web服务名称。

第二层元素：web服务的操作。

第三层元素：web服务的请求、响应实例及提交

第四层元素及以下元素：请求或响应的模型实例结果。

8.2.2.
删除web服务及操作

在web服务节点机web服务操作节点右键菜单可以执行删除web服务及web服务操作。

8.2.3.
查看XML

在web服务的模型实例元素节点可以查看XML结构。

8.3.
创建UI

可以从web服务树中除第一层web服务树节点不能拖拽到设计器构建UI外，其他层的节点均可以：

8.3.1.
拖拽web服务操作

构建的UI如上图所示，将包含请求模型实例、提交及响应模型实例。

在运行时当用户点击提交按钮时，将调用远程web服务，并得到响应消息填充到响应UI中。

8.3.2.
拖拽web服务请求、响应

构建的UI如上图所示。

8.3.3.
拖拽实例数据节点

同模型实例树中拖拽数据节点一样，请参考“模型实例”—》“创建UI”章节。

8.3.4.
拖拽提交

提交动作，将构建一个提交按钮，按钮配置：

可以看到按钮的类型为submit，并且配置了提交为web服务的操作。

9.
XPath编辑器

GForms平台提供XPath编辑器，辅助开发人员开发xpath表达式。

分为三个区域：选择区域、编辑器区域及问题显示区域。

其中，选择区域：

• 模型实例树：包含所有的模型实例数据节点，包括属性及元素，如果需要选择某个节点请双击或拖拽到编辑器区域即可。


• 函数树：包含所有的xforms1.0及xforms1.1所支持的所有xpath，每个函数具体使用说明请参考相关xpath手册。


• 操作符树：xpath所支持的操作。

配置提示：

l
如果需要选择模型实例自身，则请在模型实例树上选择模型实例树节点或模型实例根节点即可实现。

l
GForms运行时对数学xpath提供支持，但是由于使用场景较少故没有在GForms的xpath编辑器中提供出来。GForms运行时支持的数学xpath函数列表：

abs、acos、asin、atan、atan2、constant、cos、exp、log、power、sin、sqrt、tan。

这些函数可以在设计器中手动编写。

产品联系方式

www.ghpaas.com

电话: 13601178468

Email: [email protected]

产品资料：百度网盘http://yun.baidu.com/s/1bnznec3#dir/path=%2Fghorse

XForms 设计器使用手册,布布扣,bubuko.com