ROMA资产中心 ROMA EXCHANGE-页面交互事件

时间:2024-07-03 15:57:12

页面交互事件

适配器与Roma Exchange框架有多次交互,主要通过PostMessage和AddEventListener接口实现数据通信。对于适配器页面来说,有多次发送消息事件和接收消息事件,其中每次发送数据之后,ROMA Exchange都会根据监听到的事件名触发对应的动作。

以Astro轻应用适配器的资产对象选择页为例,五次发送消息事件和一次接收消息事件分别介绍如下:

  1. 触发数据传输事件

    发布者在资产发布页单击资产对象时,适配器资产对象选择页需要获取ROMA Exchange框架传来的“资产来源标识(sourceId)”、“资产来源参数(sourceAttributes)”。

    其中,“资产来源标识”用来调接口获取资产对象数据;“资产来源参数”包含了从草稿中获取的数据,用于数据回显;“地址信息”包含了适配器鉴权页的跳转地址,用于未授权情况下的页面跳转。

    因此,适配器需执行触发动作给ROMA Exchange,ROMA Exchange监听到该事件时,就会触发数据传递动作。

代码示例:

  1. created () {
  2. let eventObj = {
  3. eventName: 'PARENT_EVENT'
  4. params: {
  5. message: 'loading'
  6. }
  7. };
  8. parent.postMessage(JSON.stringify(eventObj),'*');
  9. },
    1. 传递页面高度数据

      资产对象选择页渲染前,会传递一个页面高度和宽度的数据给ROMA Exchange框架,用以调整弹窗的高度和宽度。

代码示例:

  1. mounted () {
  2. let div = document.getElementById("***AdaptorConfigWidget");
  3. let eventObj = {
  4. eventName: 'PAGELOAD_EVENT',
  5. params: {
  6. height: div.offsetHeight,
  7. width: div.offsetWidth
  8. }
  9. };
  10. parent.postMessage(JSON.stringify(eventObj),'*');
  11. },
    1. 确定事件后传递数据

      选择资产对象之后单击确认按钮,适配器会给ROMA Exchange框架传递选择的资产对象数据

      代码示例:

      confirmFun () {

  12. let eventObj = {
  13. eventName: 'CONFIRM_EVENT',
  14. params: {
  15. sourceAttributes:{
  16. items: this.items,
  17. sourceId: this.sourceId,
  18. assetData***: this.assetData***
  19. }
    1. }
  20. };
  21. parent.postMessage(JSON.stringify(eventObj),'*');
  22. },
    1. 取消事件后传递信息

      单击取消按钮后,适配器会给ROMA Exchange上架框架传递信息,以提示框架进行弹窗关闭操作。

      代码示例:

      cancelFun () {

  23. let eventObj = {
  24. eventName: 'CONCEL_EVENT',
  25. params: {
  26. message: 'Cancel!'
    1. }
  27. };
  28. parent.postMessage(JSON.stringify(eventObj),'*');
  29. },
    1. 传递提示信息

      当有警示信息或者异常情况时,适配器会传递提示信息给外层框架,以在外层展示提示信息。

      代码示例;

      messageFun () {

  30. let eventObj = {
  31. eventName: 'MESSAGE_EVENT',
  32. params: {
  33. message: 'Warning!'
    1. }
  34. };
  35. parent.postMessage(JSON.stringify(eventObj),'*');
  36. },
    1. 接收数据

      在触发事件传输事件之后,ROMA Exchange会传递资产来源的相关数据给适配器。

      代码示例;

      created() {

      const DICT = {

      DATA_EVENT: dataFun,

      }

      function dataFun (e) {

      this.sourceId = e.sourceId

      }

      window.addEventListener("message", function (e) {

      var event = JSON.parse(e.data)

      DICT[event.eventName](event.params)

      })

  37. },

    因此,适配器中资产对象选择页需要约定以下几个事件:

页面事件类型

事件名称

事件解释

Item消息发送事件

PARENT_EVENT

触发数据传输

PAGELOAD_EVENT

发送高度

CONFIRM_EVENT

确定

CANCEL_EVENT

取消

MESSAGE_EVENT

提示消息

Item消息接收事件

DATA_EVENT

接收数据

其他页面可以根据需求选择事件,但是事件名称应与上表中的一致。

support.huaweicloud.com/ref-romaexchange/exchange-05-0013.html