首页 > 代码库 > XForms 设计器使用手册

XForms 设计器使用手册

2024-07-08 00:01:21   228人阅读

1. 概述

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

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

2. GForms透视图

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

clip_image001[3]

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

clip_image003[2]

3. 创建

3.1. 创建GForms工程

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

clip_image005[1]

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

clip_image006[1]

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

clip_image007[1]

使用建议：

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

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

clip_image009[1]

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

clip_image010[1]

3.2. 创建GForms表单

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

clip_image011[1]

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

clip_image013[1]

4. GForms设计器

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

clip_image015[1]

4.1. 控件面板

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

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

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

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

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

4.2. 设计器区域

clip_image017[1]

设计器包括5个标签页：

? 设计：UI设计界面。

clip_image019[1]

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

clip_image020[1]

? 脚本：

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

clip_image022[1]

? XML：

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

clip_image024[1]

注意：

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

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

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

? 预览：

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

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

clip_image026[1]

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

使用提示：

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

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

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

4.3. 设计器上下文菜单

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

clip_image027[1]

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

菜单项

功能说明

备注

分栏

将把当前右键菜单的控件横行或纵向分裂为两个

  

添加状态栏

每个GForms页面只能有一个状态栏

运行时可以通过API动态设置状态栏的内容

工具栏

每个GForms页面只能有一个工具栏

可以通过工具栏的子菜单项：添加项：在工具栏增加一个菜单项；

添加分割线：在工具栏添加一个竖线；

删除工具栏：删除所添加的工具栏

查看属性

查看所选择空间的属性，如果属性面板关闭则可以通过该功能打开属性配置视图

  

打开控件面板

打开或显示设计器的控件面板

  

4.4. 控件类型转换

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

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

clip_image028[1]

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

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

clip_image029[1]

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

clip_image030[1]

4.5. 工具栏

clip_image031[1]

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

5. 视图

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

5.1. 视图选择

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

clip_image032[1]

5.2. 控件属性视图

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

clip_image034[1]

5.3. 模型视图

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

clip_image035[1]

5.4. 模型实例视图

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

clip_image037[1]

5.5. Web Service视图

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

clip_image039[1]

5.6. 模型/实例属性视图

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

clip_image040[1]

6. 模型管理

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

clip_image041[1]

6.1. 模型配置

clip_image042[1]

属性名称

描述

Schema

一个模型可以有多个schema文件，开发人员可以通过schema文件选择器选择多个文件，如果手动录入，则多个schema文件以空格分隔；文件的位置为相对于WebContent目录的绝对路径。

schema文本

模型的schema文本，必须是完整的schema文件内容

标识

模型的ID，是运行时访问模型的重要配置

名称空间

模型所有的名称空间列表，从schema文件或schema文本中抽取

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

clip_image043[1]

详细参考《GForms FAQ》文档。

6.2. 创建模型

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

l 模型树根节点：

clip_image044[1]

l 模型视图工具栏：

clip_image045[1]

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

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

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

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

6.2.1. 从XML创模型

clip_image047[1]

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

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

clip_image048[1]

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

clip_image050[1]

6.2.2. 从schema创模型

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

? 第一步：输入schema文本

clip_image052[1]

schema文件文本如下：

<xs:schema xmlns:my="http://commerce.example.com/payment" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsd="http://www.w3.org/2001/XMLSchema"

targetNamespace="http://commerce.example.com/payment" elementFormDefault="qualified">

<xs:element name="payment">

<xs:complexType>

<xs:sequence minOccurs="0" maxOccurs="unbounded">

<xs:choice>

<xs:element ref="my:cc" />

<xs:element ref="my:exp" />

<xs:element ref="my:expenses" />

</xs:choice>

</xs:sequence>

<xs:attribute name="as" type="my:paymentAs" />

</xs:complexType>

</xs:element>

<xs:element name="cc" type="my:cc" />

<xs:element name="exp" type="xsd:gYearMonth" />

<xs:element name="expenses" type="my:expenses" />

<xs:simpleType name="cc">

<xs:restriction base="xsd:string">

<xs:minLength value="http://www.mamicode.com/12" />

<xs:maxLength value="http://www.mamicode.com/19" />

<xs:pattern value="http://www.mamicode.com/[0-9]+" />

</xs:restriction>

</xs:simpleType>

<xs:simpleType name="paymentAs">

<xs:restriction base="xsd:string">

<xs:enumeration value="http://www.mamicode.com/cash" />

<xs:enumeration value="http://www.mamicode.com/credit" />

</xs:restriction>

</xs:simpleType>

<xsd:simpleType name="expenses">

<xsd:restriction base="xsd:decimal">

<xsd:fractionDigits value="http://www.mamicode.com/2"/>

</xsd:restriction>

</xsd:simpleType>

</xs:schema>

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

clip_image053[1]

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

clip_image054[1]

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

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

clip_image055[1]

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

clip_image057[1]

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

6.3. 创建模型实例

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

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

clip_image058[1]

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

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

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

6.3.1. 从XML创建模型实例

clip_image060[1]

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

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

clip_image061[1]

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

clip_image062[1]

6.3.2. 从schema创建模型实例

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

? 第一步：输入schema文本

clip_image063[1]

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

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

clip_image064[1]

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

clip_image066[1]

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

clip_image067[1]

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

6.3.3. 配置模型实例

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

clip_image068[1]

6.4. 创建绑定

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

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

clip_image069[1]

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

clip_image070[1]

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

属性名称

描述

节点

绑定所定义的数据节点，xpath表达式

必填项约束

xpath表达式，计算结果为布尔值，定义数据节点的required条件，运行时如果满足该条件则引用该绑定的数据节点的控件将展现为必填项

标识

绑定的ID

计算

xpath表达式，计算结果为字符串，定义数据节点的计算公式，表示节点不是由用户输入的，而是根据公式动态计算

类型

节点的数据类型，数据类型包括xpath所定义的数据类型，并包括当前数据模型的schema中的数据结构

相关性约束

xpath表达式，计算结果为布尔值，定义数据节点与其他节点的依赖关系

约束

xpath表达式，计算结果为布尔值，定义数据节点约束条件，运行时如果满足该条件则引用该绑定的数据节点的控件将展现为错误状态

约束消息

只有定义了约束该配置才生效，这样在运行时如果违反该绑定的约束，则会使用该约束消息提示用户，约束消息的构建请参考格式化校验手册。

注意：消息列表来自于全局约束消息集合。

只读

xpath表达式，计算结果为布尔值，定义数据节点只读条件，运行时如果满足该条件则引用该绑定的数据节点的控件将展现为只读状态

浏览

xpath表达式，计算结果为布尔值，定义数据节点浏览态条件，运行时如果满足该条件则引用该绑定的数据节点的控件将展现为浏览状态

配置提示：

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

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

clip_image071[1]

6.5. 创建提交submission

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

clip_image073[1]

clip_image074[1]

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

clip_image075[1]

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

属性名称

描述

数据引用(Ref)

绑定所定义提交所提交的数据节点，xpath表达式，可为空

编码

提交时系列化的数据编码，默认为UTF-8

标识

提交的ID，是send动作引用该标识进行动作提交

方法

配置提交的mehtod，可选的有：post、get、put、delete，默认为post

分隔符

默认为&，当“方法”method为get、delete时，提交的资源路径将根据数据将进行编码构建。

如提交的数据为：<input3>test</input3>，资源URL为：http://localhost:8080/test/weather，则实际提交的资源URL为：

http://localhost:8080/test/weather?input3=test

介质类型

提交到后台的请求头Accept（方法为get、delete时）或Content-Type（方法为Post、put时）内容，可选的有：application/xml、text/xml、application/json、text/json、application/x-www-form-urlencoded、application/soap+xml，默认为application/xml

模式(mode)

提交方式，可选的同步、异步，默认为异步

目标绑定

xpath表达式，当提交数据返回时，需要替换的目标模型实例节点，当“替换”为“实例”、“文本”时该配置有效，否则无效。

实例

提交数据返回时，需要替换的目标模型实例（当“替换”配置为模型实例时有效）。注意：该配置不会对提交的数据产生任何约束，如果要提交模型下非默认模型实例到后端，则请配置ref为那个非默认模型实例的xpath即可

替换

当提交数据返回时，处理方式：全部、实例、文本、空，默认为全部，其中：

全部：表示响应数据将替换当前页；

实例：表示将使用响应信息替换某个模型实例；

文本：表示将把响应信息作为文本添加到某个模型实例节点；

无：表示不作任何处理。

相关性约束

是否需要提交relevant属性为false的数据节点，默认为false，表示提交所有节点（relevant是通过配置节点的绑定relevant相关属性）

校验

是否对提交到数据进行校验，如果校验失败则提交失败并抛出xforms-submit-error事件

系列化

XML模型实例系列化类型，，可选的有：application/xml、application/x-www-form-urlencoded、multipart/related 、multipart/form-data 、none，默认为application/xml

资源XPath

提交的后端服务URL路径，通过XPath动态从模型实例中获取

资源值

提交的后端服务URL路径，如果配置了“资源XPath”则运行时忽略该配置

soap action

资源URL为web服务时有用

配置提示：

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标准事件”。

clip_image077[1]

6.6. 创建动作

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

clip_image079[1]

6.6.1. 标准动作列表

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

动作

动作描述

reset

把所选择的模型下的所有模型实例的内容进行重置

rebuild

对目标模型的所有模型实例数据结构进行重建：绑定、模型实例等，该操作将把通过XMLUtil工具所设置的节点值绑定到UI

recalculate

重新对目标模型所有的绑定计算器calculate配置属性

revalidate

该操作将对目标模型中的所有的模型实例进行验证处理（包括readonly、是否必须、是否浏览态、合法性校验等）

message

该操作将弹出一个提示信息对话框

setValue

为所选择的模型实例目标节点设置节点内容，该操作执行后，目标数据节点的值将被更新，同时引用目标数据节点的所有控件UI将自动被更新

setFocus

该操作将触发焦点聚焦在目标控件上。

toggle

使用toggle将选择某个case page，也就说toggle操作的目标对象为某个case page。

action

action操作可以组合多个其他操作，从而当action的事件满足时，触发action下的每个操作进行执行

send

发送操作将触发某个submission执行。

unload

从目标控件卸载资源，其实就是把目标控件的html元素清空，并且如果目标控件是load动作的容器，则会把subform也销毁

load

加载资源到当前页面，该资源可以是任何的资源，如html或另外一个GForms页面等。

setindex

该操作执行的目标对象为Repeater或Table控件，将选中目标控件的某行，行号从1开始。

delete

删除操作将从数据集合中删除指定位置的记录。

insert

该操作把某些现有节点或目标nodeset的最后一个节点添加到目标nodeset的父节点中

dispatch

用于向目标分发某个具体的事件

script

调用执行javascript，包括javascript原始代码，如alert等，同时也支持调用javascript函数。

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

clip_image080[1]

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

配置提示：

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

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

clip_image082[1]

6.6.2. 调整动作顺序

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

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

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

clip_image083[1]

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

clip_image084[1]

6.7. 删除组件

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

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

clip_image085[1]

7. 模型实例

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

clip_image087[1]

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

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

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

clip_image088[1]

7.1. 模型实例配置

clip_image089[1]

属性名称

描述

src

定义模型实例使用一个后台静态的XML文件数据作为模型实例的数据源

标识

模型实例ID，是运行时引用模型实例的唯一标识

介质类型

模型实例的数据源类型，目前支持xml、json两种类型

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

clip_image091[1]

配置提示：

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

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

<transaction>

<date>2004-05-06</date>

<desc>Salery</desc>

<withdraw>false</withdraw>

<amount>5000.00</amount>

</transaction>

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

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

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

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

{

"options":[

{

"label":"PixUnit",

"value":"px"

},

{

"label":"percentUnit",

"value":"percent"

}

]

}

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

clip_image093[1]

7.2. 配置节点

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

clip_image094[1]

7.3. 查看XML

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

clip_image096[1]

7.4. 粘贴XML作为元素

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

clip_image098[1]

粘贴后的模型实例结构：

clip_image100[1]

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

7.5. 查看Json

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

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

clip_image102[1]

7.6. 粘贴json作为元素

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

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

clip_image104[1]

粘贴后的模型实例结构：

clip_image106[1]

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

7.7. 新增元素

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

7.8. 新增属性

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

7.9. 删除

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

7.10. 创建UI

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

clip_image107[1]

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

clip_image108[1]

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

控件

节点引用ref

groupbox

instance(‘instance1‘)/transaction

date

date

desc

desc

withdraw

withdraw

amount

amount

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

8. Web Service

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

8.1. 新建web服务

clip_image109[1]

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

第一步：指定web服务路径

clip_image111[1]

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

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

clip_image113[1]

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

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

clip_image115[1]

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

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

clip_image116[1]

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

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

clip_image117[1]

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

8.2. web服务视图

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

clip_image118[1]

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服务操作

clip_image119[1]

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

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

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

clip_image120[1]

构建的UI如上图所示。

8.3.3. 拖拽实例数据节点

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

8.3.4. 拖拽提交

clip_image121[1]

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

clip_image123[1]

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

9. XPath编辑器

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

clip_image125[1]

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

其中，选择区域：

  • 模型实例树：包含所有的模型实例数据节点，包括属性及元素，如果需要选择某个节点请双击或拖拽到编辑器区域即可。
  • 函数树：包含所有的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: ghpaas@163.com

 

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

 

 


联系
我们