Blockly 开发者工具

Blockly Developer Tools 是一种基于网络的开发者工具,可自动执行 Blockly 配置流程的某些部分,包括创建自定义块、构建工具箱以及配置 Web Blockly 工作区。

使用该工具的 Blockly 开发者流程包括三个部分:

  • 使用 Block Factory 和 Block Exporter 创建自定义块。
  • 使用 Workspace Factory 构建工具箱和默认工作区。
  • 使用 Workspace Factory(目前仅适用于网页功能)配置工作区。

屏蔽工厂标签页

Block Factory 标签页可帮助您为自定义块创建块定义块代码生成器。在此标签页上,您可以轻松创建、修改和保存自定义组成要素。

定义块

本视频详细介绍了定义组成要素的步骤。界面已过时,但它突出显示的屏蔽功能仍然准确。

管理库

块是通过其名称引用的,因此您要创建的每个块都必须具有唯一的名称。界面会强制执行此限制条件,并在您“保存”新块或“更新”现有块时进行明确说明。

您可以在之前保存的分块之间切换,也可以点击“库”按钮来创建新的空块。更改现有块的名称是快速创建多个具有相似定义的块的另一种方法。

导出和导入库

块会保存到浏览器的本地存储空间。清除浏览器的本地存储后,系统会删除您的块。如需无限期保存块,您必须下载库。您的 Block Library 将以 XML 文件的形式下载,导入该文件即可将您的 Block Library 设为您下载文件时的状态。请注意,导入块库会替换当前的块库,因此您可能需要先导出。

建议使用导入和导出功能来维护和共享不同的自定义块集。

“屏蔽导出程序”标签页

设计块后,您需要导出块定义和生成器存根,以在应用中使用它们。此操作在“块导出器”标签页中完成。

您的区块库中存储的每个区块都会显示在区块选择器中。 点击要导出的屏蔽设置,可视需要选择或取消选择此屏蔽对象。如果您要选择库中的所有块,请使用“选择”→“所有存储在块库中”选项。如果您构建了工具箱或使用“Workspace Factory”标签页配置了工作区,则还可以通过点击“选择”→“Workspace Factory 中已使用的所有产品”来选择您使用的所有块。

通过导出设置,您可以选择要以哪种生成语言为目标,以及是需要所选块的定义和/或生成器存根。选择这些文件后,点击“导出”即可下载文件。

工作区“工厂”标签页

借助工作区工厂,您可以轻松配置工具箱和工作区中的默认块集。您可以使用“工具箱”和“工作区”按钮在修改工具箱和起始工作区之间切换。

构建工具箱

此标签有助于为 Toolbox 构建 XML。本材料假定您熟悉工具箱的功能。如果您已有要在此处修改的工具箱的 XML,则可以点击“Load to Edit”加载该 XML。

无类别工具箱

如果您有几个块,并且想在不分类的情况下显示它们,只需将它们拖动到工作区中,您会在预览的工具箱中看到这些块。

包含类别的工具箱

如果您希望按类别显示屏蔽设置,请点击“+”按钮,然后选择新类别的下拉菜单项。此操作会向您的类别列表 添加一个可供选择并修改的类别选择“Standard Category”(标准类别)可添加单个标准 Blockly 类别(Logic、Loops 等),或选择“Standard Toolbox”(标准工具箱)以添加所有标准 Blockly 类别。使用箭头按钮可对类别重新排序。

如需更改所选类别的名称或颜色,请使用“修改类别”下拉菜单。将某个块拖到工作区中,即可将其添加到所选类别中。

高级组成要素

默认情况下,您可以将库中的任何标准代码块或任何代码块添加到工具箱中。如果您有用 JSON 定义的块,但这些块不在库中,您可以使用“导入自定义块”按钮将其导入。

一些代码块应一起使用或包含默认值。这是通过组和阴影来实现的。在编辑器中连接的任何块都将作为一个组添加到工具箱中。连接到另一个块的块也可以更改为影子块,只需选择子块并点击“Make Shadow”按钮即可。注意:只有不含变量的子块可以更改为影子块。

如果您在工具箱中添加变量或功能块,请在工具箱中添加“变量”或“函数”类别,以便用户充分利用该块。详细了解“变量”或“函数”类别

配置工作区(适用于 Web Blockly)

如需配置工作区的不同部分,请转到“Workspace Factory”标签页,然后选择“Workspace”。

选择工作区选项

配置选项设置不同的值,并在预览区域查看结果。启用网格缩放可显示更多选项来配置。此外,改用类别通常需要更复杂的工作区;当您添加第一个类别时,系统会自动添加垃圾桶和滚动条。

将预加载块添加到工作区

此为可选操作,但如果您想在工作区中显示一组块,则可能必须要这样做:

  • 当应用加载时。
  • 触发某个事件(进入下一关、点击帮助按钮等)时。

将方块拖到编辑空间中,即可在工作区预览时看到它们。 您可以创建块组、停用块,并在选择某些块时为其创建阴影块。

您可以将这些块导出为 XML 文件(见下文)。创建工作区后,请立即使用 Blockly.Xml.domToWorkspace 将它们添加到您的工作区:

var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
    '<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);

此示例代码会向工作区添加一个 math_number 块。

正在导出

Workspace Factory 为您提供以下导出选项:

  • 起始代码:生成起始 HTML 和 JavaScript 以注入您的自定义 Blockly 工作区。
  • 工具箱:生成用于指定工具箱的 XML。
  • 工作区块:生成可加载到工作区中的 XML。