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

前提条件

准备好您的交互需求。

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

背景信息

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

理解案例交互

当前案例实现需要用户将交互转成节点和边的关联关系,需要使用的组件有满足需求的事件和动作才能进行配置,否则就无法实现。
  • 组件:组件包含两种能力,事件抛出能力和动作执行能力。本案例使用了Tab列表通用标题组件之间的联动。
    • Tab列表:这个组件具备点击事件的能力。
    • 通用标题:属于被联动组件,具有接收数据并执行动作的能力。
  • 蓝图编辑器:通过建立两个屏幕的WebSocket服务,将上游组件的交互/事件与下游组件的执行动作绑定,从而实现单击主屏幕的Tab列表触发副屏幕通用标题的修改。
    说明

配置案例内主屏幕交互

  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. 单击蓝图编辑器配置页面右上角的预览图标,查看跨屏联动的交互效果。
    交互展示