# 介绍

「节点编程」指通过可视化配置的方式,定义图层组件之间的交互行为的模块。

本文档为您介绍节点编程的使用方法,帮助您自由管理大屏中多个组件之间的交互关系。

前提条件: 在开始节点编程之前,请先在设计器中准备好要交互的组件。

# 操作步骤

  1. 可从大屏设计器右上方菜单栏上的【节点编程】按钮进入节点编程页面;
  2. 从左侧节点列表把要编辑的组件拖入画布中;
  3. 根据交互逻辑进行节点连线;
  4. 在右侧的配置面板中,完成逻辑节点配置,包括上下游事件/动作以及处理方法等;
  5. 配置完成后,点击保存,在预览界面查看交互效果。

# 面板功能介绍

左侧为「组件节点」「逻辑节点」;
右侧为「属性面板」。

# 组件节点

在左侧组件节点面板中,可以查看在大屏设计器中添加的所有组件节点。
单击节点拖动到画布中,可添加节点。
在画布中选中某个节点,右键单击该节点,选择删除,可移除该节点。

左侧面板

# 逻辑节点

在画布中,单击节点与节点的连线,添加逻辑节点,并在右侧配置面板中进行配置,详情请参见 逻辑节点/概述

逻辑节点

# 右侧面板

在右侧面板中可根据节点之间的连线,选择上/下游组件事件说明中的选项,根据参数字段提示,配置该节点的处理方法。

右侧面板

1.上游组件事件说明

  • 点击 查看 data 参数字段提示 后弹出左边的提示面板,在数据定义中可查看上游组件包含的字段。

  • 在数据示例中可以查看上游数据的层级,然后在转换器的处理方法中使用。

右侧面板

2.下游组件动作说明

  • 点击 查看 data 参数字段提示 后弹出左边的提示面板,在数据定义中可查看下游组件包含的字段。

  • 在数据示例中可以查看下游数据的格式,然后复制到转换器的处理方法中,在 value 值的位置传入上游组件的参数。

右侧面板

3.逻辑节点修改名字

右侧面板

4.新增逻辑节点

右侧面板

# 工具栏

工具栏位于画布上方,包含以下按钮。

工具栏

  1. 左侧面板/右侧面板: 隐藏或展开左/右侧面板。
  2. 删除: 删除选中节点。
  3. 全部折叠/全部展开: 画布中所有节点展开/折叠。
  4. 适配画布: 画布中节点位置自适应适配画布。
  5. 重置位移: 画布中所有节点位置重置。
  6. 清空画布: 清空画布中所有节点。
  7. 启用: 选中节点停用或启用。
Last Updated: 10/28/2022, 3:41:15 PM