• 沒有找到結果。

执行成功,界面上会返回设备对象中的全部信息,样例如下:

{ "interviewId": "002N000000edyfrHJiLV", "outputs": {}

步骤2 在创建标准页面对话框中,输入页面的“名称”、“标签”,单击“添加”。

2-95 添加标准页面

2-14 服务编排基本信息

参数名 参数说明 本实例需要填写的值

标签 服务编排用于展示的名称,创建后可修改。 helloPage 名称 服务编排在系统内的唯一标识,创建后不支

1. 创建页面对象模型“userInfo”,关联自定义对象

“CNAME__helloObject__CST”,后续将绑定页面表格。

a. 在页面底部单击“模型视图”,在“模型视图”中,单击“新增模型”。

2-96 新增模型

b. 设置“模型名称”为“userInfo”,“来源”选择“对象”,单击“下一 步”。

c. 设置“选择对象”为“CNAME__helloObject__CST”,并在“选择字段”

中,勾选“name”、“id”、“CNAME__detail__CST”、

“createdDate”,单击“下一步”,再单击“确定”。

d. 单击页面上部的 保存图标。

2. 创建页面服务模型“helloFlow”,关联服务编排“CNAME__helloFlow”,服务 编排的输入值,后续将绑定页面上表单中的输入框。

a. 在“模型视图”中,单击“新增模型”。

b. 设置“模型名称”为“helloFlow”,“来源”选择“服务”,单击“下一 步”。

c. 设置“选择服务类型”为“服务编排”,并在弹窗中,“选择项目”设置为

“我的第一个应用”,“搜索”中输入“CNAME__helloFlow”,在搜索结 果中选择“CNAME__helloFlow”,然后单击“确定”。如果未搜索到服务 编排,请检查服务编排是否已启用。

d. 单击“下一步”,再单击“确定”。

e. 单击页面上部的 保存图标。

步骤4 单击页面底部“设计视图”,切换到页面设计视图,在左侧上方单击“基本组件”,

展开组件列表,方便拖拽组件到页面。

2-97 展开组件列表

说明

标准页面有设计视图、模型视图、事件视图、样式代码以及更多中的组件代码、第三方库等,详 细介绍及用法请参见标准页面。

步骤5 拖拽组件,组装页面。

1. 拖拽一个“标题”组件到“页面内容”,并设置“标题”组件属性。

说明

在“设计视图”中,拖拽一个页面组件到页面中,选中该组件后,在右侧“属性”页签,

即可设置该组件的绑定数据、样式等属性。

a. 修改“标题内容”为“HelloWorld”。

b. 在“样式”属性中,设置标题“字体”为白色,大小“25px”,居中显示;

并设置标题背景为蓝色“#4A90E2”。

2-98 设置标题组件样式

说明

在配置使用组件前,在组件列表区,先将光标放在组件上,组件右上角将显示帮助信 息的问号图标,单击问号图标,即可进入该组件介绍页面。在组件介绍页面,您可以 了解并学习这些预置的前端组件的使用场景及参数配置方法,组件说明详细介绍,如 图2-99。

2-99 查看组件帮助信息

2. 拖拽一个“表单”组件到“标题”组件下,然后在数据绑定弹窗底部,单击“取 消”,创建一个空表单。

因为现在还不需要定义数据源,因此需要单击“取消”,创建一个空的表单组 件。

2-100 拖拽表单

3. 从左侧组件列表最底部“高级”中,拖拽一个“栅格容器”到“表单”。栅格容 器默认是1个分栏,2个栏,选中“分栏”,然后在属性的“行布局”下,单击PC

下的 ,将分栏设置为3栏。

2-101 拖拽栅格容器并设置为 3 栏

2-102 设置后显示为 3 栏

说明

栅格容器是一种灵活的容器类页面布局,可以将页面进行横向和纵向分割。

4. 向第1栏、第2栏分别拖拽一个“输入框”,第三栏中拖拽一个“按钮”组件。

2-103 拖拽输入框及按钮

5. 选中第1栏中的“输入框”,设置“标签”为“词条名”,“占位符”为“请输入 词条”。

6. 选中第2栏中的“输入框”,设置“标签”为“词条描述”,“占位符”为“请输 入词条描述”。

7. 选中“按钮”,设置“显示名称”为“新增”,“类型”为“主要按钮”,然后 选中按钮所在“栏”,设置“样式”中“布局”上边距为“20px”。

2-104 修改按钮属性

8. 拖拽一个“表格”到“表单”下(表单之外),并选中“表格容器”下“表 格”,在右侧属性最下端,关闭“多选”选项。

2-105 拖拽表格

9. 单击页面上方保存按钮 。

步骤6 绑定组件与页面模型,将前端页面与对象及服务编排关联。

1. 选中“词条名”输入框,在右侧“数据绑定”旁,单击 ,进入选中模型弹窗。

2. 在选择模型弹窗中,勾选“helloFlow”下“inputParam”的“name”,单击

“确定”。

2-106 选中模型字段

3. 同样方式,为“词条描述”绑定模型字段:选中“词条描述”输入框,在右侧

“数据绑定”下,单击 ,进入选中模型弹窗,勾选“helloFlow”下

“inputParam”的“detail”,单击“确定”。

绑定之后,由页面“词条名”、“词条描述”输入框输入的值将作为服务编排的 输入参数“name”、“detail”值,当页面调用服务编排时,即可将前端页面输 入的值写入到词条对象helloObject中。

4. 选中“表格容器”下的“表格”,在右侧“数据绑定”下,单击 ,然后在选择 模型弹窗中,勾选“userInfo”,单击“确定”。

2-107 选中对象模型 helloObject

表格绑定页面对象模型后,系统自动将对象字段做为表格的列名显示。如果对象 模型关联的自定义对象(这里是词条对象helloObject)中,有词条记录,将会自 动查询并显示在页面表格里。在表格的属性“表格列”中可调整列顺序。

2-108 绑定页面模型后

说明

$model.ref('helloFlow').run().then(() => { // 根据Name获取组件

var _table = context.$component.get('table_0');

_table.doQuery();

}).catch(e => { // 失败消息

context.$message.error('新增词条失败:' + e.resMsg, 5);

});

步骤9 在预览页面的输入框中,输入“helloworld”,单击“新增”,查看表格中新增的词 条记录。

----结束

相關文件