# 通过事件动作实现高级页面内组件的交互 #### 操作场景 华为云Astro轻应用低代码平台为组件设计了**事件-动作**机制，实现组件与组件、组件与页面之间的交互。 - 事件是应用在运行时，页面内发生的动作或者用户执行的操作（例如单击组件、组件加载等）。 - 动作是响应事件后，按照设定的方式，对事件做出回应（如页面跳转）。例如，用户在网页上单击一个按钮，通过显示一个信息框来响应这个动作。 本章节将向您介绍华为云Astro轻应用低代码平台预置的常用事件及动作，以及在高级页面中如何为组件配置事件。 #### 初识事件-动作 1. 查看组件可配置事件列表。 以雷达图组件为例，在画布中拖入并选中雷达图组件，在右侧"组件属性设置"栏中选择"事件"页签，会显示当前组件可配置的事件列表。 图1事件配置示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001913327302.png "点击放大") 表1预置事件列表 | 事件名称 | 事件说明 | |:---|:---| | 点击 | 通过鼠标左键，单击该组件时触发。 | | 双击 | 通过鼠标左键，双击该组件时触发。 | | 右击 | 通过鼠标右键，单击该组件时触发。 | | 右双击 | 通过鼠标右键，双击该组件时触发。 | | 鼠标滑过 | 鼠标光标滑过该组件时触发。 | | 组件加载 | 组件加载完成后触发。 | | 单击组件标题 | 单击组件标题时触发。 | | 当点击图例时 | 单击图例时触发。 | | 当点击数据时 | 单击数据时触发。 | [图1]所示的"跳转页面"事件，并非低代码平台预置的事件，而是在"雷达图"组件中注册的事件，当单击该组件标题时触发。即事件列表中也会展现该组件注册的事件，用于配置。组件中如何注册事件，请参见[通过事件动作实现高级页面内组件的交互](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9115.html)。 **事件在开发态（高级页面编辑页面）不能触发，只有在页面的运行态（应用运行状态或预览页面）才能触发生效。** 2. 配置事件触发时的响应动作。 单击事件名称后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945686381.png)，在弹出的"事件编辑"页面，可配置该事件触发时的响应动作。 图2配置事件示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001913487206.gif "点击放大") - "事件编辑"弹窗说明 如下图所示，其中标签1"**新建动作** "按钮，可为当前事件添加响应动作，标签2为当前事件已配置的动作列表，可在列表中操作列对其再次编辑或删除。 图3事件编辑弹窗 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001913327306.png "点击放大") - 预置动作说明 图4动作列表示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001934868052.png) 如上图所示，当单击"**新建动作**"按钮后，可展现当前事件可配置的动作列表。 表2预置动作列表 | 动作类别 | 动作名称 | 详细说明 | |:---|:---|:---| | 默认 | 页面跳转 | 跳转至其他页面，配置参数说明： - 页面类型：设置待跳转的页面是当前应用中的标准页面、高级页面或外部页面。 - 高级页面、标准页面、外部页面：选择高级页面、标准页面或输入外部页面的地址。 - 动作参数：通过页面宏传递参数，可暂且不关注。 - 页面打开方式：设置跳转页面的打开方式，可选项包含当前浏览器窗口打开或新窗口打开。 | | 默认 | 显示组件 | 选择要显示的组件。 | | 默认 | 隐藏组件 | 选择要隐藏的组件。 | | 自定义 | 自定义动作 | 自定义动作可通过代码，实现响应动作的逻辑。 ``` //var flag=true //{widgetxxx}.flag=flag; console.log('测试自定义动作'); ``` | | BPM动作 | 提交实例 | 工作流中一个重要的内容就是用户任务，而用户任务所有的交互都是通过页面实现的。工作流与页面的交互模式采用了业界"依赖反转"的设计模式。一般情况下，页面之间的跳转应该在页面的事件代码中定义，但在页面上是无法确定下一步应该做什么，因此，又需要依赖工作流进行页面的跳转，即"依赖反转"。这种做法的好处在于，可以复用页面而无需考虑页面的下一步是什么。 在高级页面的自定义事件中，内置了一些交互的API，但由于高级页面使用了懒加载的方式，故其API表达为闭包形式： - 获取变量： $工作流(op =\> op.loadVariables(variables)) - 提交实例： $工作流(op =\> op.submitInstance(variables)) - 提交任务： $工作流(op =\> op.submitTask(variables)) - 更改变量： $工作流(op =\> op.putVariables(variables)) 另外，在高级页面的自定义组件的JS文件中，也可以通过以下代码即可触发名称为"test工作流"的工作流流程，并将"test1"作为"val"变量的值传到工作流流程中。 ``` $工作流(op => op.submitInstance({ "name": "test工作流", "variables":{ "val": "test1" } })) ``` | | BPM动作 | 提交任务 | 工作流中一个重要的内容就是用户任务，而用户任务所有的交互都是通过页面实现的。工作流与页面的交互模式采用了业界"依赖反转"的设计模式。一般情况下，页面之间的跳转应该在页面的事件代码中定义，但在页面上是无法确定下一步应该做什么，因此，又需要依赖工作流进行页面的跳转，即"依赖反转"。这种做法的好处在于，可以复用页面而无需考虑页面的下一步是什么。 在高级页面的自定义事件中，内置了一些交互的API，但由于高级页面使用了懒加载的方式，故其API表达为闭包形式： - 获取变量： $工作流(op =\> op.loadVariables(variables)) - 提交实例： $工作流(op =\> op.submitInstance(variables)) - 提交任务： $工作流(op =\> op.submitTask(variables)) - 更改变量： $工作流(op =\> op.putVariables(variables)) 另外，在高级页面的自定义组件的JS文件中，也可以通过以下代码即可触发名称为"test工作流"的工作流流程，并将"test1"作为"val"变量的值传到工作流流程中。 ``` $工作流(op => op.submitInstance({ "name": "test工作流", "variables":{ "val": "test1" } })) ``` | | BPM动作 | 转派任务 | 工作流中一个重要的内容就是用户任务，而用户任务所有的交互都是通过页面实现的。工作流与页面的交互模式采用了业界"依赖反转"的设计模式。一般情况下，页面之间的跳转应该在页面的事件代码中定义，但在页面上是无法确定下一步应该做什么，因此，又需要依赖工作流进行页面的跳转，即"依赖反转"。这种做法的好处在于，可以复用页面而无需考虑页面的下一步是什么。 在高级页面的自定义事件中，内置了一些交互的API，但由于高级页面使用了懒加载的方式，故其API表达为闭包形式： - 获取变量： $工作流(op =\> op.loadVariables(variables)) - 提交实例： $工作流(op =\> op.submitInstance(variables)) - 提交任务： $工作流(op =\> op.submitTask(variables)) - 更改变量： $工作流(op =\> op.putVariables(variables)) 另外，在高级页面的自定义组件的JS文件中，也可以通过以下代码即可触发名称为"test工作流"的工作流流程，并将"test1"作为"val"变量的值传到工作流流程中。 ``` $工作流(op => op.submitInstance({ "name": "test工作流", "variables":{ "val": "test1" } })) ``` | | BPM动作 | 更改变量 | 工作流中一个重要的内容就是用户任务，而用户任务所有的交互都是通过页面实现的。工作流与页面的交互模式采用了业界"依赖反转"的设计模式。一般情况下，页面之间的跳转应该在页面的事件代码中定义，但在页面上是无法确定下一步应该做什么，因此，又需要依赖工作流进行页面的跳转，即"依赖反转"。这种做法的好处在于，可以复用页面而无需考虑页面的下一步是什么。 在高级页面的自定义事件中，内置了一些交互的API，但由于高级页面使用了懒加载的方式，故其API表达为闭包形式： - 获取变量： $工作流(op =\> op.loadVariables(variables)) - 提交实例： $工作流(op =\> op.submitInstance(variables)) - 提交任务： $工作流(op =\> op.submitTask(variables)) - 更改变量： $工作流(op =\> op.putVariables(variables)) 另外，在高级页面的自定义组件的JS文件中，也可以通过以下代码即可触发名称为"test工作流"的工作流流程，并将"test1"作为"val"变量的值传到工作流流程中。 ``` $工作流(op => op.submitInstance({ "name": "test工作流", "variables":{ "val": "test1" } })) ``` | [图4]中所示的"满月饼图"动作，并非低代码平台预置的动作，而是在"满月饼图"组件中注册的动作，即动作列表中也会展现在画布中所有组件注册的动作，用于配置。组件中如何注册事件，请参见[同页面内组件的交互]。 3. 配置完成后，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001913487210.png)，保存页面。 4. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001913327310.png)，进入预览页面，查看已配置的事件和动作是否能正常触发。 #### 自定义组件中事件、动作 如果低代码平台预置的事件与动作不能满足您的开发需求，还可以在组件中对其进行自定义，以实现业务逻辑。 低代码平台提供的组件模板中，包含了事件和动作的模板组件（widgetEventTemplate、widgetActionTemplate）。在环境配置的"维护 \> 全局元素 \> 页面资产管理 \> 组件模板"中，可查找并下载组件模板。如何下载组件模板，请参见[管理组件模板](https://support.huaweicloud.com/usermanual-astrozero/astrozero_06_2051.html) 图5事件、动作组件模板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002098828366.png "点击放大") 组件模板中包含多种功能的示例组件，可以参考组件模板开发自定义组件，组件模板的下载及说明请参见[在线开发华为云Astro轻应用高级页面自定义组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9110.html)。 在组件模板代码中，包含低代码平台定义的事件、动作的注册和触发**API** （应用程序接口），详细介绍如[表3]所示。 表3事件、动作API说明 | 类型 | 函数 | 功能及参数描述 | |:---|:---|:---| | 事件 | Studio.**registerEvents**( thisObj, "eventName", "Event Label", \[\] ); | 低代码平台定义的**注册** **事件**的API，只有通过此API注册后的事件，才会在组件的事件列表中展现。 - thisObj：当前组件实例对象，指为该组件注册事件。 - "eventName"：事件名称，应该与触发事件API中的第一个参数保持一致。 - "Event Label"：事件标签名，在事件列表中展示的事件标题。 - \[\]：定义该事件触发时传递的参数模型，例如\[{"name": "param"}\] 。 | | 事件 | thisObj.**triggerEvent**( "eventName", {} ); | 低代码平台定义的**触发** **事件**的API。 - "eventName"：指定触发的事件名称。 - {}：为事件触发时传递的参数赋值，例如{param: value}。 | | 动作 | Studio.**registerAction**( thisObj, "actionName", "Action Label", \[\], $.proxy(this.**receiveActionCbk**, this), \[\] ); | 低代码平台定义的**注册** **动作**的API，只有通过此API注册后的动作，才会在组件的动作列表中展现。 - thisObj：当前组件实例对象，指为该组件注册动作。 - "actionName"：动作名称。 - "Action Label"：动作标签名，在动作列表中展示的动作标题。 - \[\]：事件触发时传入的参数。 - $.proxy(this.**receiveActionCbk**, this)：该动作的回调函数，在回调函数中定义该动作的执行逻辑。 - \[\]：此参数在开发过程中置为空数组即可。 | 本章节以模板组件widgetEventTemplate、widgetActionTemplate为例，向您介绍上述关于事件和动作API的使用方法。 在事件和动作的模板组件中，主要实现如下图所示。单击widgetEventTemplate中的"trigger Event"按钮，可将此组件输入框中的文本传递给widgetActionTemplate组件，在widgetActionTemplate组件中执行动作，将文本显示到该组件的输入框中。 图6事件、动作组件示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002142461840.png "点击放大") 其主要实现如下： - **widgetEventTemplate组件** 在"widgetEventTemplate.js"文件中注册名称为"sendEvent"的事件，并在单击"trigger Event"按钮时触发"sendEvent"事件，代码如下所示。 - 注册"sendEvent"事件 ``` var sendEventConfig = [{ "name": "param1", "displayName": "Param1" }]; Studio.registerEvents( thisObj, "sendEvent", "Send Event", sendEventConfig ); ``` - 在"trigger Event"按钮的单击事件中，触发"sendEvent"事件。 ``` $("#triggerEvent", elem).bind('click', function () { if ($("#eventParam", elem).val()) { thisObj.triggerEvent("sendEvent", { param1: $("#eventParam", elem).val() }); } }) ``` - **widgetActionTemplate组件** 在widgetActionTemplate组件"widgetActionTemplate.js"文件中注册"receiveAction"动作，并定义"receiveActionCbk"作为该动作的回调函数，设置输入框的值。 - 注册"receiveAction"动作。 ``` Studio.registerAction( thisObj, "receiveAction", "Receive Action", [], $.proxy(this.receiveActionCbk, this), [] ); ``` - 定义"receiveActionCbk"回调函数。 ``` receiveActionCbk: function(data){ var thisObj = this; var elem = thisObj.getContainer(); $("#receivedParam",elem).val(data.eventParam.param1) } ``` #### 同页面内组件的交互 将模板组件widgetEventTemplate、widgetActionTemplate上传至组件库，并在高级页面中测试。 1. 参考[上传自定义组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9110.html#astrozero_05_9110__li115551942524)中操作，上传组件模板widgetEventTemplate、widgetActionTemplate。 2. 上传组件后，打开一个高级页面，在组件列表中将已上传的组件，拖拽到画布中。 图7使用事件、动作组件模板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002142319792.png "点击放大") 3. 配置事件、动作。 选中组件widgetEventTemplate，在"事件"页签下单击"sendEvent"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894299928.png)，选择"新建动作 \> widgetActionTemplate (widget数字) \> Receive Action"。 4. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894299944.png)，保存页面。 5. 保存成功后，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001934712208.png)，发布页面。 6. 成功发布后，单击 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936099601.png)，进入预览页面，查看效果。