如何实现跨屏联动

本文档以配置两个不同可视化应用上的Tab列表和通用标题之间联动为例，为您介绍如何使用蓝图编辑器实现跨屏联动效果。

前提条件

准备好您的交互需求。 本案例的交互需求为：主屏幕单击Tab列表来触发副屏幕通用标题的修改。

背景信息

本案例的适用场景：当您有多个可视化应用，并希望多个可视化应用内的组件能展示相互联动的效果。

理解案例交互

当前案例实现需要用户将交互转成节点和边的关联关系，需要使用的组件有满足需求的事件和动作才能进行配置，否则就无法实现。

• 组件：组件包含两种能力，事件抛出能力和动作执行能力。本案例使用了Tab列表和通用标题组件之间的联动。
  • Tab列表：这个组件具备点击事件的能力。
  • 通用标题：属于被联动组件，具有接收数据并执行动作的能力。
• 蓝图编辑器：通过建立两个屏幕的WebSocket服务，将上游组件的交互/事件与下游组件的执行动作绑定，从而实现单击主屏幕的Tab列表触发副屏幕通用标题的修改。

信息

说明

• WebSocket服务格式的详情请参见自建WebSocket节点服务说明。
• 蓝图编辑器配置完成后需要在预览页查看配置效果。

配置案例内主屏幕交互

1. 参考画布编辑器添加组件，在主屏幕的画布编辑器页面搭建所需要的Tab列表组件。
2. 单击画布编辑器图层栏内Tab列表组件，右键选择导出到蓝图编辑器。

3. 在画布编辑器页面左上角，单击蓝图编辑器图标，切换到蓝图编辑器配置页面。
4. 在蓝图编辑器配置页面，将左侧导入节点栏内的Tab列表节点和逻辑节点栏内的串行数据处理和WebScoket节点一起拖至画布中。
5. 配置画布中串行数据处理内的处理方法。
   1. 单击串行数据处理逻辑节点，进入右侧配置面板，选择面板内其他配置栏下方的处理方法，单击右侧箭头打开脚本编辑区域。
   2. 在脚本编辑区域，输入代码，单击完成。当前处理方法的示例代码如下。

return [{"value":data.content}];

6. 配置画布中WebScoket逻辑节点。

   1. 单击WebScoket逻辑节点，进入右侧配置面板，参见WebScoket配置项说明配置面板中的参数内容。

   2. 在socket服务地址区域，输入测试地址 。由于当前可视化应用是主屏幕，属于发送端，所以需要添加一个发送消息。

   3. 添加一个发送消息，并将消息名命名为下一个。

7. 在蓝图编辑器配置页面，将画布中的这三个节点按下图样式连线。

配置案例内副屏幕交互

1. 参考画布编辑器 添加组件]，在副屏幕的画布编辑器页面搭建所需要的通用标题组件。
2. 单击画布编辑器图层栏内通用标题组件，右键选择导出到蓝图编辑器。

3. 在画布编辑器页面左上角，单击蓝图编辑器图标，切换到蓝图编辑器配置页面。
4. 在蓝图编辑器配置页面，将左侧导入节点栏内的通用标题节点和逻辑节点栏内的WebScoket节点一起拖至画布中。

信息

说明 因为主屏幕内socket发出的消息已经处理，并且处理后的数据能够导入到副屏幕内的通用标题中，所以在副屏幕内不用再处理数据格式。

5. 配置画布中WebScoket逻辑节点。

   1. 单击WebScoket逻辑节点，进入右侧配置面板，参见WebScoket配置项说明配置面板中的参数内容。

   2. 在socket服务地址区域，输入和主屏幕相同的地址。由于当前可视化应用是主屏幕属于接收端，所以需要添加一个接收消息。

   3. 添加一个接收消息，并将消息名命名为下一个。

6. 将画布中的这两个节点按下图样式连线。

信息

注意 主屏幕和副屏幕的分组要一致，因为副屏幕是接收端，所以配置接收消息即可。

7. 单击蓝图编辑器配置页面右上角的预览图标，查看跨屏联动的交互效果。