通过事件动作实现AstroZero高级页面内组件的交互

操作场景

AstroZero低代码平台为组件设计了事件-动作机制，实现组件与组件、组件与页面之间的交互。

事件是应用在运行时，页面内发生的动作或者用户执行的操作（例如单击组件、组件加载等）。
动作是响应事件后，按照设定的方式，对事件做出回应（如页面跳转）。例如，用户在网页上单击一个按钮，通过显示一个信息框来响应这个动作。

本章节将向您介绍AstroZero低代码平台预置的常用事件及动作，以及在高级页面中如何为组件配置事件。

初识事件-动作

查看组件可配置事件列表。

以雷达图组件为例，在画布中拖入并选中雷达图组件，在右侧“组件属性设置”栏中选择“事件”页签，会显示当前组件可配置的事件列表。

图1 事件配置示例

表1 预置事件列表
事件名称	事件说明
点击	通过鼠标左键，单击该组件时触发。
双击	通过鼠标左键，双击该组件时触发。
右击	通过鼠标右键，单击该组件时触发。
右双击	通过鼠标右键，双击该组件时触发。
鼠标滑过	鼠标光标滑过该组件时触发。
组件加载	组件加载完成后触发。
单击组件标题	单击组件标题时触发。
当点击图例时	单击图例时触发。
当点击数据时	单击数据时触发。

图1所示的“跳转页面”事件，并非低代码平台预置的事件，而是在“雷达图”组件中注册的事件，当单击该组件标题时触发。即事件列表中也会展现该组件注册的事件，用于配置。组件中如何注册事件，请参见通过事件动作实现AstroZero高级页面内组件的交互。

事件在开发态（高级页面编辑页面）不能触发，只有在页面的运行态（应用运行状态或预览页面）才能触发生效。

配置事件触发时的响应动作。

单击事件名称后的，在弹出的“事件编辑”页面，可配置该事件触发时的响应动作。

图2 配置事件示例

“事件编辑”弹窗说明
 如下图所示，其中标签1“新建动作”按钮，可为当前事件添加响应动作，标签2为当前事件已配置的动作列表，可在列表中操作列对其再次编辑或删除。
图3 事件编辑弹窗

预置动作说明

图4 动作列表示例

如上图所示，当单击“新建动作”按钮后，可展现当前事件可配置的动作列表。

表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" } }))
	提交任务
	转派任务
	更改变量

图4中所示的“满月饼图”动作，并非低代码平台预置的动作，而是在“满月饼图”组件中注册的动作，即动作列表中也会展现在画布中所有组件注册的动作，用于配置。组件中如何注册事件，请参见同页面内组件的交互。

配置完成后，单击页面上方的，保存页面。
单击，进入预览页面，查看已配置的事件和动作是否能正常触发。

自定义组件中事件、动作

如果AstroZero低代码平台预置的事件与动作不能满足您的开发需求，还可以在组件中对其进行自定义，以实现业务逻辑。

AstroZero低代码平台提供的组件模板中，包含了事件和动作的模板组件（widgetEventTemplate、widgetActionTemplate）。在环境配置的“维护 > 全局元素 > 页面资产管理 > 组件模板”中，可查找并下载组件模板。如何下载组件模板，请参见管理组件模板

图5 事件、动作组件模板

组件模板中包含多种功能的示例组件，可以参考组件模板开发自定义组件，组件模板的下载及说明请参见在线开发AstroZero高级页面自定义组件。

在组件模板代码中，包含低代码平台定义的事件、动作的注册和触发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 事件、动作组件示例

其主要实现如下：

widgetEventTemplate组件

在“widgetEventTemplate.js”文件中注册名称为“sendEvent”的事件，并在单击“trigger Event”按钮时触发“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”作为该动作的回调函数，设置输入框的值。

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上传至组件库，并在高级页面中测试。

参考上传自定义组件中操作，上传组件模板widgetEventTemplate、widgetActionTemplate。
上传组件后，打开一个高级页面，在组件列表中将已上传的组件，拖拽到画布中。

图7 使用事件、动作组件模板
配置事件、动作。

选中组件widgetEventTemplate，在“事件”页签下单击“sendEvent”后的，选择“新建动作 > widgetActionTemplate (widget2) > Receive Action”。
单击页面上方的，保存页面。
保存成功后，单击，发布页面。
成功发布后，单击，进入预览页面，查看效果。