文档首页/ Astro轻应用 AstroZero/ 用户指南（低代码）/ 使用AstroZero开发应用前端/ 高级页面/ 添加事件或宏实现AstroZero高级页面组件交互/ 通过事件动作实现AstroZero高级页面内组件的交互
更新时间：2024-12-12 GMT+08:00
查看PDF
分享

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

操作场景

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

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

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

初识事件-动作

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

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

    图1 事件配置示例
    表1 预置事件列表

    事件名称

    事件说明

    点击

    通过鼠标左键，单击该组件时触发。

    双击

    通过鼠标左键，双击该组件时触发。

    右击

    通过鼠标右键，单击该组件时触发。

    右双击

    通过鼠标右键，双击该组件时触发。

    鼠标滑过

    鼠标光标滑过该组件时触发。

    组件加载

    组件加载完成后触发。

    单击组件标题

    单击组件标题时触发。

    当点击图例时

    单击图例时触发。

    当点击数据时

    单击数据时触发。

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

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

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

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

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

  3. 配置完成后，单击页面上方的，保存页面。
  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”事件，代码如下所示。

    • 注册“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. 参考上传自定义组件中操作，上传组件模板widgetEventTemplate、widgetActionTemplate。
  2. 上传组件后，打开一个高级页面，在组件列表中将已上传的组件，拖拽到画布中。

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

  3. 配置事件、动作。

    选中组件widgetEventTemplate，在“事件”页签下单击“sendEvent”后的，选择“新建动作 > widgetActionTemplate (widget数字) > Receive Action”。

  4. 单击页面上方的，保存页面。
  5. 保存成功后，单击，发布页面。
  6. 成功发布后，单击 ，进入预览页面，查看效果。

相关文档