本文通过一个具体配置示例介绍配置完区块中的数据接口、事件接口及动作接口后,如何通过区块编辑器内的蓝图编辑器实现区块内部和外部的数据传输。

背景信息

区块示例说明中定义的区块需求为例,在区块编辑器中配置区块接口并使用示例接口。

在区块编辑器中配置使用区块接口

  1. 参见创建空白区块,创建一个区块。
  2. 单击新创建的空白区块,进入区块编辑器。
  3. 在区块编辑器中,添加轮播列表ECharts玫瑰图垂直胶囊柱状图三个组件。
    添加组件
  4. 全选这三个组件,右键选择导出到蓝图编辑器
    导出到蓝图编辑器
  5. 单击区块编辑器右上角的数据接口设置图标图标,在数据接口设置页签中配置如下图所示的数据接口样式。区块内数据接口具体配置操作,请参见数据接口配置说明
    数据接口配置样式
  6. 单击区块编辑器右上角的事件接口图标图标,在事件设置页签中配置如下图所示的事件样式。区块内事件接口具体配置操作,请参见事件接口配置说明
    事件配置示例样式
  7. 单击区块编辑器右上角的动作图标图标,在动作设置页签中配置如下图所示的动作样式。区块内动作接口具体配置操作,请参见动作接口配置说明
    动作配置样式面板
  8. 完成区块各接口的配置后,单击区块编辑器左上角的蓝图编辑器入口图标,进入蓝图编辑器页面。
  9. 将蓝图编辑器页面中的三个区块接口,分别拖入到蓝图编辑器画布中。可查看到每个区块接口都是对应上述步骤定义完成的内容。
    拖入画布
  10. 您可以通过蓝图编辑器节点连线的方法,将区块接口节点与对应的组件节点连线,完成所需的业务逻辑的配置。当前区块示例需求的业务逻辑如下图所示。如何配置蓝图连线请参见蓝图编辑器详细功能介绍
    完成蓝图连线

在画布编辑器中配置使用区块接口

  1. 在区块编辑器中,配置完示例区块各接口内容和区块内部蓝图逻辑交互后,您可以对区块进行预览和测试各接口内容,接口内容测试无误后,再发布该示例区块,详情请参见预览区块发布区块
  2. 切换到控制台上的我的可视化页面,您可以单击选择一个可视化应用,进入画布编辑器中。
  3. 单击资产列表打开全部资产列表,选择区块模块,在区块列表内可查看到发布后的所有区块内容。
  4. 在画布编辑器页面,单击左上角的资产列表图标,展开全部资产区域。
  5. 全部资产区域中,单击左侧导航栏内的区块,在区块列表内可查看到发布后的所有区块内容。单击所需示例区块,即可添加该区块到画布编辑器中。
  6. 单击画布中的区块,在右侧配置面板中选中数据页签,在数据页签可查看到该区块的数据接口中的所有配置信息,您可以参见配置组件数据设置组件数据源,修改区块的数据内容。
    查看区块数据接口内容
  7. 单击交互页签,在交互页签可查看到该区块的事件接口中的所有配置信息,您可以参见配置数字翻牌器组件的回调ID,修改区块的交互事件内容。
    交互面板事件信息查看
  8. 在画布中单击选中目标区块,右键选择导出到蓝图编辑器
    导出区块到蓝图编辑器
  9. 单击画布编辑器页面左上角的蓝图图标图标进入蓝图编辑器。
  10. 将示例区块节点拖动到蓝图编辑器的画布中,即可查看区块内所有事件和动作接口的信息。区块蓝图参数中的事件动作接口,可以在蓝图编辑器内通过连线和配置逻辑节点的方法,被其他组件调用,详情请参见蓝图编辑器详细功能介绍
    区块动作信息面板