组件交互-华为云

ASTRO轻应用 ASTROZERO-通过事件动作实现AstroZero高级页面内组件的交互:操作场景

操作场景 AstroZero低代码平台为组件设计了事件-动作机制，实现组件与组件、组件与页面之间的交互。事件是应用在运行时，页面内发生的动作或者用户执行的操作（例如单击组件、组件加载等）。动作是响应事件后，按照设定的方式，对事件做出回应（如页面跳转）。例如，用户在网页上单击一个按钮，通过显示一个信息框来响应这个动作。本章节将向您介绍AstroZero低代码平台预置的常用事件及动作，以及在高级页面中如何为组件配置事件。

ASTRO轻应用 ASTROZERO 添加事件或宏实现AstroZero高级页面组件交互

ASTRO大屏应用 ASTROCANVAS-组件响应动作实现:响应动作函数

响应动作函数以数据刷新的响应动作函数为例，向您介绍组件的响应动作函数。 /** * 数据刷新的响应动作函数示例 * 文件global_SelectWidget.js中, 与render函数平级定义 */ confirmLocationWidgetCbk: function (param) { if (param && param.eventParam && this.vm) { this.vm.getDataEntry(param.eventParam); } }, // 获取当前输入框值 getInputValue: function () { if (this.vm && this.vm.selectConfObj) { return this.vm.selectConfObj.selectValue; } }, // 设置组件双向绑定的值 setInputWidgetValue: function (value) { this.vm.selectConfObj.selectValue = value; if (this.editVm?.selectConfObj) { this.editVm.selectConfObj.selectValue = value; } this.advanceEditvm?.save(); }, // 更新组件配置 setWidgetProperties: function (selectConfObj) { magno.savePropertiesForWidget({ selectConfObj: JSON.stringify(selectConfObj), }); }, setInput: function (value) { this.vm.selectConfObj.selectValue = value.customizeVal; if (this.editVm?.selectConfObj) { this.editVm.selectConfObj.selectValue = value.customizeVal; } this.advanceEditvm?.save(); },

ASTRO大屏应用 ASTROCANVAS 组件交互

ASTRO大屏应用 ASTROCANVAS-组件响应动作实现:注册动作

注册动作在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例 */ Studio.registerAction( thisObj, 'confirmLocationWidgetCbk', 'confirmLocationWidgetCbk', [], $.proxy(thisObj.confirmLocationWidgetCbk, thisObj), [], ); Studio.registerAction(thisObj, 'getInputValue', 'getInputValue', [], $.proxy(thisObj.getInputValue, thisObj), []); Studio.registerAction( thisObj, 'setInputWidgetValue', 'setInputWidgetValue', [], $.proxy(thisObj.setInputWidgetValue, thisObj), [], ); Studio.registerAction( thisObj, 'setWidgetProperties', 'setWidgetProperties', [], $.proxy(thisObj.setWidgetProperties, thisObj), [], ); Studio.registerAction( thisObj, 'setInput', 'setInput', [{ name: 'customizeVal', type: 'text' }], $.proxy(thisObj.setInput, thisObj), [], );

ASTRO大屏应用 ASTROCANVAS 组件交互

ASTRO轻应用 ASTROZERO-通过宏实现AstroZero高级页面间组件的交互:操作场景

操作场景页面间组件的交互，除了需要事件-动作机制，还需要用到低代码中的页面宏。本章节通过具体示例，为您介绍页面间组件交互的方法。如图1所示，高级页面Page1中包含示例组件widgetEventTemplate，高级页面Page2中包含示例组件widgetPageMacroTemplate，单击Page1页面中的OK按钮，输入框中的数据会通过页面宏传递给Page2。图1 页面间组件交互场景示例页面间的组件交互原理如下图所示，在配置事件时，选择“默认”类别中的页面跳转，并通过新增动作参数将事件的参数传给页面宏，在跳转的目标页面中读取页面宏数据。图2 Page传值原理主要实现原理如下： widgetPageMacroTemplate 在widgetPageMacroTemplate.editor.js文件中定义页面宏数据。 propertiesConfig: [ { config: [ { "type": "text", "name": "pageMacro", "label": "Page Macro", "value": "${pm.pageMacro}", "validation": { "rules": {} } }] }]; 表1 页面宏数据配置项说明配置项参数说明 propertiesConfig 配置组件的自定义属性。 type 配置项的数据类型，本例中配置为text（文本）。 name 配置项的变量名称，本例中设置为“pageMacro”。通过获取组件自定义配置属性的API，来获取该值。 label 配置项的展示标签。 value 配置项的默认值，本例中设置为${pm.pageMacro}。其中，pageMacro为页面宏变量名，${pm.}为低代码平台定义的固定语法。 validation 无需关注此配置项。在widgetPageMacroTemplate.js文件中读取页面宏数据，并将其显示到页面中。 var widgetProperties = thisObj.getProperties();//获取该组件自定义配置属性的API。 ... var pageMacro = widgetProperties.pageMacro || ""; $("#macro",elem).html(pageMacro); 上述示例代码中widgetProperties.pageMacro的PageMacro，即表1中name配置项设置的变量名称。 widgetEventTemplate：关于widgetEventTemplate的介绍，请参见通过事件动作实现AstroZero高级页面内组件的交互。

ASTRO轻应用 ASTROZERO 添加事件或宏实现AstroZero高级页面组件交互

ASTRO轻应用 ASTROZERO-页面间组件交互:使用说明

使用说明页面间组件的交互，除了需要事件-动作机制，还需要用到低代码中的页面宏。本章节通过具体示例，为您介绍页面间组件交互的方法。如图1所示，高级页面Page1中包含示例组件widgetEventTemplate，高级页面Page2中包含示例组件widgetPageMacroTemplate，单击Page1页面中的OK按钮，输入框中的数据会通过页面宏传递给Page2。图1 页面间组件交互场景示例页面间的组件交互原理如下图所示，在配置事件时，选择“默认”类别中的页面跳转，并通过新增动作参数将事件的参数传给页面宏，在跳转的目标页面中读取页面宏数据。图2 Page传值原理主要实现原理如下： widgetPageMacroTemplate 在widgetPageMacroTemplate.editor.js文件中定义页面宏数据。 propertiesConfig: [ { config: [ { "type": "text", "name": "pageMacro", "label": "Page Macro", "value": "${pm.pageMacro}", "validation": { "rules": {} } }] }]; 表1 页面宏数据配置项说明配置项参数说明 propertiesConfig 配置组件的自定义属性。 type 配置项的数据类型，本例中配置为text（文本）。 name 配置项的变量名称，本例中设置为“pageMacro”。通过获取组件自定义配置属性的API，来获取该值。 label 配置项的展示标签。 value 配置项的默认值，本例中设置为${pm.pageMacro}。其中，pageMacro为页面宏变量名，${pm.}为低代码平台定义的固定语法。 validation 无需关注此配置项。在widgetPageMacroTemplate.js文件中读取页面宏数据，并将其显示到页面中。 var widgetProperties = thisObj.getProperties();//获取该组件自定义配置属性的API。 ... var pageMacro = widgetProperties.pageMacro || ""; $("#macro",elem).html(pageMacro); 上述示例代码中widgetProperties.pageMacro的PageMacro，即表1中name配置项设置的变量名称。 widgetEventTemplate：关于widgetEventTemplate的介绍，请参见同页面内组件的交互。

ASTRO轻应用 ASTROZERO 如何实现组件交互

ASTRO轻应用 ASTROZERO-通过事件动作实现AstroZero高级页面内组件的交互:操作场景

操作场景 AstroZero低代码平台为组件设计了事件-动作机制，实现组件与组件、组件与页面之间的交互。事件是应用在运行时，页面内发生的动作或者用户执行的操作（例如单击组件、组件加载等）。动作是响应事件后，按照设定的方式，对事件做出回应（如页面跳转）。例如，用户在网页上单击一个按钮，通过显示一个信息框来响应这个动作。本章节将向您介绍AstroZero低代码平台预置的常用事件及动作，以及在高级页面中如何为组件配置事件。

ASTRO轻应用 ASTROZERO 添加事件或宏实现AstroZero高级页面组件交互

ASTRO轻应用 ASTROZERO-初识事件-动作:初识事件-动作

初识事件-动作查看组件可配置事件列表。以雷达图组件为例，在画布中拖入并选中雷达图组件，在右侧“组件属性设置”栏中选择“事件”页签，会显示当前组件可配置的事件列表。图1 事件配置示例表1 预置事件列表事件名称事件说明点击通过鼠标左键，单击该组件时触发。双击通过鼠标左键，双击该组件时触发。右击通过鼠标右键，单击该组件时触发。右双击通过鼠标右键，双击该组件时触发。鼠标滑过鼠标光标滑过该组件时触发。组件加载组件加载完成后触发。单击组件标题单击组件标题时触发。当点击图例时单击图例时触发。当点击数据时单击数据时触发。图1所示的“跳转页面”事件，并非低代码平台预置的事件，而是在“雷达图”组件中注册的事件，当单击该组件标题时触发。即事件列表中也会展现该组件注册的事件，用于配置。组件中如何注册事件，请参见同页面内组件的交互。事件在开发态（高级页面编辑页面）不能触发，只有在页面的运行态（应用运行状态或预览页面）才能触发生效。配置事件触发时的响应动作。单击事件名称后的，在弹出的“事件编辑”页面，可配置该事件触发时的响应动作。图2 配置事件示例 “事件编辑”弹窗说明如下图所示，其中标签1“新建动作”按钮，可为当前事件添加响应动作，标签2为当前事件已配置的动作列表，可在列表中操作列对其再次编辑或删除。图3 事件编辑弹窗预置动作说明图4 动作列表示例如上图所示，当单击“新建动作”按钮后，可展现当前事件可配置的动作列表。表2 预置动作列表动作类别动作名称详细说明默认页面跳转跳转至其他页面，配置参数说明：页面类型：设置待跳转的页面是当前应用中的标准页面、高级页面或外部页面。高级页面、标准页面、外部页面：选择高级页面、标准页面或输入外部页面的地址。动作参数：通过页面宏传递参数，可暂且不关注。页面打开方式：设置跳转页面的打开方式，可选项包含当前浏览器窗口打开或新窗口打开。自定义自定义动作自定义动作可通过代码，实现响应动作的逻辑。 //var flag=true //{widgetxxx}.flag=flag; console.log('测试自定义动作'); BPM动作提交实例详细介绍，请参见BPM如何与页面交互。提交任务转派任务更改变量图4中所示的“满月饼图”动作，并非低代码平台预置的动作，而是在“满月饼图”组件中注册的动作，即动作列表中也会展现在画布中所有组件注册的动作，用于配置。组件中如何注册动作，请参见同页面内组件的交互。配置完成后，单击页面上方的，保存页面。单击，进入预览页面，查看已配置的事件和动作是否能正常触发。

ASTRO轻应用 ASTROZERO 如何实现组件交互

ASTRO轻应用 ASTROZERO-组件自定义事件实现:注册自定义事件

注册自定义事件自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例：在文件global_SelectWidget.editor.js中定义事件 eventConfig: { sendSelect: { desc: { zh_CN: "当选中选项时", en_US: "Select Choose" }, fields: [ { name: "selectValue", desc: { zh_CN: "选项值", en_US: "Select Choose" }, }, ], }, }, 在文件global_SelectWidget.js的init钩子中注册事件 * @params thisObj: 组件实例，等同于this * @params "sendSelect": 事件key值 * @params { "zh_CN": "当选中选项时", "en_US": "Select Choose" }: 事件描述，国际化 * @params []: 空数组，固定写法（内部组件暂时没有用到过） */ Studio.registerEvents(thisObj, "sendSelect", { "zh_CN": "当选中选项时", "en_US": "Select Choose" }, []); 图1 配置后效果表1 eventConfig字段说明字段类型说明 sendSelect String 自定义事件的key值。 desc Object 自定义事件的中英文描述。 fields Array 自定义事件中，暴露给全局变量的内容。

ASTRO轻应用 ASTROZERO 组件交互

ASTRO轻应用 ASTROZERO-组件响应动作实现:响应动作函数

响应动作函数 /** * 数据刷新的响应动作函数示例 * 文件global_SelectWidget.js中, 与render函数平级定义 * @params event: 保存着事件发出的参数，itemVal为配置动作时将事件抛出的参数复制到itemVal中 */ setSelectVal(event) { this.readerVm.$set(this.readerVm.selectConf, "selectValue", event.itemVal); },

ASTRO轻应用 ASTROZERO 组件交互

ASTRO轻应用 ASTROZERO-组件响应动作实现:注册动作

注册动作图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params this: 组件实例 * @params "setSelectedItem": 动作名称 * @params { zh_CN: "设置选中选项", en_US: "Set Selected item" }：响应动作的描述，需要国际化 * @params [{ name: "itemVal", type: "text" }]：配置动作时可以配置itemVal的值为${e.xxx}将事件抛出的xxx参数复制到itemVal中，然后select组件内统一从itemVal获取数据 * @params this.setSelectVal.bind(this): this.setSelectVal 为响应动作函数 */ Studio.registerAction( this, "setSelectedItem", { zh_CN: "设置选中选项", en_US: "Set Selected item" }, [{ name: "itemVal", type: "text" }], // 配置动作时可以配置itemVal的值为${e.xxx}将事件抛出的xxx参数复制到itemVal中。然后select组件内统一从itemVal获取数据 this.setSelectVal.bind(this) );

ASTRO轻应用 ASTROZERO 组件交互

APPCUBE-初识事件-动作:初识事件-动作

初识事件-动作查看组件可配置事件列表。以雷达图组件为例，在画布中拖入并选中雷达图组件，在右侧“组件属性设置”栏中选择“事件”页签，会显示当前组件可配置的事件列表。图1 事件配置示例表1 预置事件列表事件名称事件说明点击通过鼠标左键，单击该组件时触发。双击通过鼠标左键，双击该组件时触发。右击通过鼠标右键，单击该组件时触发。右双击通过鼠标右键，双击该组件时触发。鼠标滑过鼠标光标滑过该组件时触发。组件加载组件加载完成后触发。单击组件标题单击组件标题时触发。当点击图例时单击图例时触发。当点击数据时单击数据时触发。图1所示的“跳转页面”事件，并非低代码平台预置的事件，而是在“雷达图”组件中注册的事件，当单击该组件标题时触发。即事件列表中也会展现该组件注册的事件，用于配置。组件中如何注册事件，请参见同页面内组件的交互。事件在开发态（高级页面编辑页面）不能触发，只有在页面的运行态（应用运行状态或预览页面）才能触发生效。配置事件触发时的响应动作。单击事件名称后的，在弹出的“事件编辑”页面，可配置该事件触发时的响应动作。图2 配置事件示例 “事件编辑”弹窗说明如下图所示，其中标签1“新建动作”按钮，可为当前事件添加响应动作，标签2为当前事件已配置的动作列表，可在列表中操作列对其再次编辑或删除。图3 事件编辑弹窗预置动作说明图4 动作列表示例如上图所示，当单击“新建动作”按钮后，可展现当前事件可配置的动作列表。表2 预置动作列表动作类别动作名称详细说明默认页面跳转跳转至其他页面，配置参数说明：页面类型：设置待跳转的页面是当前应用中的标准页面、高级页面或外部页面。高级页面、标准页面、外部页面：选择高级页面、标准页面或输入外部页面的地址。动作参数：通过页面宏传递参数，可暂且不关注。页面打开方式：设置跳转页面的打开方式，可选项包含当前浏览器窗口打开或新窗口打开。自定义自定义动作自定义动作可通过代码，实现响应动作的逻辑。 //var flag=true //{widgetxxx}.flag=flag;console.log('测试自定义动作'); BPM动作提交实例详细介绍，请参见在高级页面中与工作流交互。提交任务转派任务更改变量图4中所示的“满月饼图”动作，并非低代码平台预置的动作，而是在“满月饼图”组件中注册的动作，即动作列表中也会展现在画布中所有组件注册的动作，用于配置。组件中如何注册动作，请参见同页面内组件的交互。配置完成后，单击页面上方的，保存页面。单击，进入预览页面，查看已配置的事件和动作是否能正常触发。

APPCUBE 如何实现组件交互

云服务器内容精选

组件交互

7*24

备案

专业服务

退订

建议反馈

售前咨询热线