配置蓝图编辑器
蓝图编辑器一般称为 visual programming 或者 flow based programming ，即通过可视化连线的方式，定义图层与图层之间的交互行为。本文档为您介绍 Uniplore 蓝图编辑器的使用方法，帮助您自由管理可视化应用中多个组件之间的交互关系。
蓝图编辑器的优势
- 蓝图编辑器可以保证交互和数据的实时性和同步性。
- 蓝图编辑器支持数据请求合并和数据分发的功能。
- 蓝图编辑器可模块化拆分，专注单个的交互链路，不需要考虑代码的整理和规范，只需要专注于业务规则和交互需求即可。
前提条件
在开始配置蓝图编辑器之前，请先准备好组件的交互需求，并将需要交互的组件在画布编辑器中搭建完成，详情请参见添加组件。
操作步骤
- 登录 Uniplore 大屏控制台。
- 在我的大屏页面中，选择一个 可视化应用，单击编辑。
- 在画布编辑器页面，单击顶部工具栏的蓝图编辑器图标。
- 在蓝图编辑器页面，将左侧的导入节点和逻辑节点拖入画布中。
信息
说明：如果左侧没有导入节点，可返回画布编辑器，选中图层，右键导出到蓝图编辑器。
-
根据交互逻辑进行节点连线。
-
在右侧的配置面板中，完成逻辑节点配置，包括节点名称、上下游事件、上下游动作以及处理方法等。添加组件、组件连线、逻辑节点配置的详细操作方法，请参见操作示例和蓝图编辑器详细功能介绍。
-
配置完成后，单击页面右上角的保存（
）图标，将现有改动进行保存。 -
保存完成后，单击页面右上角的预览（
）图标，查看可视化应用交互效果。 -
预览成功后，单击页面右上角的发布（
）图标，发布可视化应用。
操作示例
下面以“Tab列表”和“通用标题”组件为例，为您演示蓝图编辑器的具体使用方法。
-
整理“Tab列表”和“通用标题”组件的交互需求。例如单击“Tab列表”中的某一列，可将该列表项中的文本直接显示在“通用标题”组件上。
-
在可视化画布编辑器页面，搭建所需要的“Tab列表”和“通用标题”组件。
- 在图层栏内，分别右键单击“Tab列表”和“通用标题”组件，选择“导出到蓝图编辑器”。
- 成功导出后，单击画布编辑页面左上角的“蓝图编辑器”图标。
- 在蓝图编辑器页面，点击“导入节点”面板中的“Tab列表”和“通用标题”，两组件将自动出现在画布上。
- 在“逻辑节点”面板中，将“串行数据处理”和“分支判断”节点单击加入画布，并如图连线。
- 在右侧“分支判断”配置面板中，配置具体上下游情况和处理方式，设置单击可执行的触发判断条件，设置完成后点击右上角保存。
上图中的示例触发判断条件如下。
return data.id>1;
- 以同样的方式，配置右侧的“串行数据处理”节点（此步骤作用是将列表的数据格式转换成标题的数据格式）。
上图中的示例转换格式的规则如下。
return [
{
value:data.content
}
];
- 单击右上角的“预览”图标（），在预览页面进行交互操作（例如单击列表某一格等），查看交互效果。
如果需求中有多个组件需要配置交互链路，则重复以上几步直至满足全部交互需求。
- 配置并预览成功后，单击左上角的“发布”图标（）。选择发布样式后，即可在线展示具有交互功能的可视化应用。