蓝图编辑器一般称为visual programming或者flow based programming，即通过可视化连线的方式，定义图层与图层之间的交互行为。本文档为您介绍DataV蓝图编辑器的使用方法，帮助您自由管理可视化应用中多个组件之间的交互关系。

版本更新迁移说明

节点编程已经升级为蓝图编辑器，首次进入蓝图编辑器时，您需要将旧版本的交互配置迁移至蓝图编辑器中，以使用更丰富的功能。

在蓝图编辑器迁移对话框中，按照以下说明选择迁移方式，完成后单击确认迁移即可。

蓝图编辑器迁移对话框
  • 从已应用的配置迁移
    如果您的可视化应用已经应用了旧版本的交互配置，可以选择此方式。
    注意 由于已应用配置的布局信息已丢失，迁移后将重新计算节点位置。
  • 从未应用的配置迁移

    如果可视化应用没有应用过旧版本的交互配置，可以选择此方式。

蓝图编辑器的优势

  • 蓝图编辑器区别于之前的回调ID，可以保证交互和数据的实时性和同步性。
  • 蓝图编辑器支持数据请求合并和数据分发的功能。
  • 蓝图编辑器可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。
  • 蓝图编辑器支持原厂组件和第三方组件。该功能对开发者型用户较为便利。
    注意 用户自行开发的第三方组件，必须是在遵循开发者规范的前提下，才能在DataV中的蓝图编辑器页面无缝衔接使用。

前提条件

在开始配置蓝图编辑器之前，请先准备好组件的交互需求，并将需要交互的组件在画布编辑器中搭建完成，详情请参见添加组件。

操作步骤

  1. 登录DataV控制台。
  2. 在我的可视化页面中，选择一个可视化应用，单击编辑。
  3. 在画布编辑器页面，单击顶部工具栏的蓝图编辑器图标。
    蓝图编辑器图标
  4. 在蓝图编辑器页面，将左侧的导入节点和逻辑节点拖入画布中。
    说明 如果左侧导入节点，可返回画布编辑器，选中图层，右键导出到蓝图编辑器。
  5. 根据交互逻辑进行节点连线。
  6. 在右侧的配置面板中，完成逻辑节点配置，包括节点名称、上下游事件、上下游动作以及处理方法等。

    添加组件、组件连线、逻辑节点配置的详细操作方法，请参见操作示例和蓝图编辑器详细功能介绍。

  7. 配置完成后，单击页面右上角的预览（预览图标）图标，查看可视化应用交互效果。
  8. 预览成功后，单击页面右上角的发布（发布图标）图标，发布可视化应用。

操作示例

下面以Tab列表和通用标题组件为例，为您演示蓝图编辑器的具体使用方法。

  1. 整理Tab列表和通用标题组件的交互需求。

    例如单击Tab列表中的某一列，可将该列表项中的文本直接显示在通用标题组件上。

  2. 在可视化画布编辑器页面，搭建所需要的Tab列表和通用标题组件。
    添加案例组件
  3. 在图层栏内，分别右键单击Tab列表和通用标题组件，选择导出到蓝图编辑器。
    导出到蓝图编辑器
  4. 成功导出后，单击画布编辑页面左上角的蓝图编辑器图标。
    蓝图编辑器图标
  5. 在蓝图编辑器页面，将导入节点面板中的Tab列表和通用标题，拖至画布上并连线。
    说明 每次在两个节点之间连线都会默认自动在连线之间添加一个串行数据处理节点。您如果不需要使用该逻辑节点可以自行删除。
    组件连线
    注意 如果导入节点面板不显示，可单击上方工具栏的导入节点图标（导入节点图标），显示导入节点面板。
  6. 在逻辑节点面板中，将分支判断节点拖动到画布上并连线到串行数据处理节点之前。
  7. 在右侧分支判断配置面板中，配置具体上下游情况和处理方式，设置单击可执行的触发判断条件。
    配置分支判断节点
    上图中的示例触发判断条件如下。 
    return data.id>1;
  8. 以同样的方式，配置右侧的串行数据处理节点（此步骤作用是将列表的数据格式转换成标题的数据格式）。
    配置串行数据节点
    上图中的示例转换格式的规则如下。 
    return [
 {
   value:data.content
 }
];
  9. 单击右上角的预览图标（预览图标），在预览页面进行交互操作（例如单击列表某一格等），查看交互效果。
    预览交互效果

    如果需求中有多个组件需要配置交互链路，则重复以上几步直至满足全部交互需求。

  10. 配置并预览成功后，单击左上角的发布图标（发布图标）。选择发布样式后，即可在线展示具有交互功能的可视化应用。