Blockly 创建自定义块-Blockly 开发者工具

 2018年06月18日    116     声明


Blockly Developer Tools是一个基于Web的开发者工具,它可以通过配置自动化的完成 Blockly 组件开发,包括创建自定义模块、建立工具箱、并配置 Web Blockly工作区。

  1. Block Factory标签
  2. Block Exporter标签
  3. Workspace Factory标签

使用工具的 Glockly 开发过程分为三部分:

  • 使用Block Factory 和 Block Exporter创建自定义块
  • 使用Workspace Factory构建工具箱和默认工作区
  • 使用Workspace Factory配置工作区(目前只有Web功能)

1. Block Factory标签

Block Factory标签用于在自定义块时的块定义代码生成。你可以通过这个标签简单的创建、修改、和保存块。


1.1 定义块

以下是 Blockly 官方的推出的,详细介绍定义块步骤视频的。其UI可能有些过时,但其对块定义的描述仍然是准确的。


1.2 库管理

所定义的块通过其名字进行引用,这就要求在创建块时名称必须唯一。Blockly UI会强制检查,在“保存”或“更新”时,如果名称不唯一会进行提示:

点击Block Library按钮,可以在之前保存的“块”之间进行切换或创建新块。修改现有块是一种快速创建块的方法,这样可以快速创建多个相似的块。


1.3 导入、导出库

块会被保存在浏览器本地存储中,如果清除了浏览器本地存储,那么块也会被删除。要将块持久化保存,就需要将库导出。你的Block Library可以做为一个XML文件被下载,而下载的文件又可以导入,以将Block Library设置为下载时的状态。但需要注意,导入时当前Block Library会被XML文件替换。

导入和导出特性是维护和共享不同自定义块的推荐方法。


2. Block Exporter标签

块设计好后,就需要导出块定义和生成器以在应用中使用它们。这些操作可以在Block Exporter标签完成。

每个保存在Block Library中的块都可以在Block Selector中显示出来。在“块”上点击可以从导出项中选择或取消,如果全部导出可以“Select”->“All Stored In Block Library”。

构建或配置工作区,可以使用Workspace Factory标签,也可以选择要使用的块后再“Select”->“All Used In Workspace Factory”。

在“导出设置”中你可以选择要导出的语言以及是否需要选定块的定义等。确认选择后,点击“Export”即可下载文件。


3. Workspace Factory标签

Workspace Factory标签可以帮助你配置工具箱和设置工作区中的默认块。Workspace Factory标签下有ToolboxWorkspace两个按钮:


3.1 构建工具箱

Toolbox可以为工具箱构建XML,如果你有一个编辑的工具箱的XML,那么可以通过单击“Load to Edi”来加载它。


3.2 无类别的工具箱

如果你有一些块要显示,但不想添加分类。你可以简单的将其拖到工作区,然后就可以在工作区中看到了。


3.3 有类别的工具箱

在如下所示的工作区中,如果你将“块”分类显示,那么可以点击“+”号并选择下拉列表项。其中,“New 将添加一个类别到您的类别列表中,你可以选择和编辑;而“Standard Category”会添加一个标准的 Blockly 分类(如:Logic、Loops等);“Standard Toolbox”会添加所有 Blockly 标准分类到工具箱。通过“上下箭头”可以对分类进行排序。

要修改已选择块的名称和颜色,可以使用“Edit Category”下拉选项。


3.4 高级块

默认你可以添加任何标准块或你库中的块到工具箱。如果你有在JSON文件中而非库中的块,这时可以通过“Import Custom Blocks”按钮将其导入。

有些块需要一起用或被包含到其它块中,任何在编辑器中的相关链的块都会做为一个分组被添加到工具箱中。选择子块并单击“Make Shadow”按钮,附加到另一个块的块也可以更改为阴影块。


3.5 配置工作区(Web Blockly)

要配置工作区的不同部分,则选择“Workspace Factory”再选择“Workspace”


“选择工作区”选项

配置选项中添加不同的值时,可以预览(Preview)区域中看到结果。启用网格(Grid)或缩放(Zoom)可以显示更多配置选项;除此之外,还可以设置是否显示垃圾桶(Trashcan)和滚动条(Scrollbars)等。


工作区添加预加载块

这是一个可选项,但如果你想显示一组工作区中的块是必要的:

  • 当应用加载时
  • 当事件触发时

将块拖拽到编辑区,就可以在工作区预览。选择块后就可以创建块分组、禁用块、使块做为阴影块。


3.6 导出

Workspace Factory提供了以下导出选项:

  • Starter Code:生成启动HTML和JavaScript注入到你所定制的工作区
  • Toolbox:生成你的工具箱的XML
  • Workspace Blocks:生成一个可以加载到工作区的XML