执行成功,界面上会返回设备对象中的全部信息,样例如下:
{ "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”,单击“新增”,查看表格中新增的词 条记录。
----结束