页面交互事件

适配器与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. },

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

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