Blockly 开发者工具是一款基于网络的开发者工具,可自动执行 Blockly 配置流程的部分操作,包括创建自定义块、构建工具箱以及配置 Web Blockly 工作区。
使用该工具的 Blockly 开发者流程分为三个部分:
- 使用 Block Factory 和 Block Exporter 创建自定义块。
- 使用 Workspace Factory 构建工具箱和默认工作区。
- 使用 Workspace Factory(目前仅适用于网页版)配置工作区。
“Block Factory”标签页
“Block Factory”标签页可帮助您为自定义块创建块定义和块代码生成器。在此标签页中,您可以轻松创建、修改和保存自定义块。
定义代码块
此视频详细介绍了定义代码块的步骤。界面已过时,但它突出显示的屏幕截图功能仍然准确无误。
管理媒体库
块通过其名称进行引用,因此您要创建的每个块都必须具有唯一的名称。界面会强制执行此操作,并明确说明您是在“保存”新分块还是“更新”现有分块。
您可以点击“库”按钮,在之前保存的块之间切换,也可以创建新的空白块。更改现有代码块的名称是快速创建具有类似定义的多个代码块的另一种方法。
导出和导入库
代码块会保存到浏览器的本地存储空间。清除浏览器的本地存储空间会删除您的屏蔽内容。如需永久保存您的屏蔽内容,您必须下载媒体库。您的屏蔽列表会以 XML 文件的形式下载,您可以导入该文件,将屏蔽列表设为下载文件时的状态。请注意,导入的功能块库会替换您当前的功能块库,因此您可能需要先导出。
导入和导出功能也是维护和共享不同组自定义块的推荐方式。
“Block Exporter”标签页
设计好块后,您需要导出块定义和生成器桩,以便在应用中使用它们。这可以在“块导出器”标签页上完成。
存储在“块库”中的每个块都会显示在“块选择器”中。 点击相应分块以选择或取消选择要导出的内容。如果您想选择库中的所有代码块,请使用“选择”→“存储在代码块库中的所有代码块”选项。如果您使用“Workspace Factory”标签页构建了工具箱或配置了工作区,还可以通过点击“选择”→“Workspace Factory 中使用的所有内容”来选择您使用的所有块。
通过导出设置,您可以选择要定位到的生成语言,以及是否要为所选代码块导出定义和/或生成器桩。选择完毕后,点击“导出”即可下载文件。
“Workspace Factory”标签页
借助 Workspace Factory,您可以轻松配置工作区的工具箱和默认的块集。您可以使用“工具箱”和“工作区”按钮在修改工具箱和启动工作区之间切换。
构建工具箱
此标签页可帮助您为 Toolbox 构建 XML。本资料假定您熟悉 Toolbox 的功能。如果您已经有要在此处修改的工具箱的 XML,可以点击“加载以修改”将其加载。
不分类的 Toolbox
如果您有多个块,并且希望在没有任何类别的情况下显示它们,只需将它们拖动到工作区,您就会在预览中的工具箱中看到这些块。
包含类别的工具箱
如果您想在类别中显示广告连播,请点击“+”按钮,然后选择新类别对应的下拉菜单项。这会在您的类别列表中添加一个类别,您可以选择和修改该类别。选择“标准类别”可添加单个标准 Blockly 类别(逻辑、循环等),选择“标准工具箱”可添加所有标准 Blockly 类别。使用箭头按钮重新排列类别。
如需更改所选类别的名称或颜色,请使用“修改类别”下拉菜单。将某个块拖动到工作区会将其添加到所选类别。
高级版块
默认情况下,您可以将库中的任何标准块或任何块添加到工具箱。如果您在 JSON 中定义了不在库中的块,可以使用“导入自定义块”按钮进行导入。
有些代码块应搭配使用或包含默认值。这可以通过组和阴影来实现。在编辑器中连接的所有块都会作为一个组添加到工具箱中。您还可以通过选择子块并点击“创建阴影”按钮,将附加到其他块的块更改为阴影块。注意:只有不包含变量的子块才能更改为阴影块。
如果您在工具箱中添加了变量或函数块,请在工具箱中添加“变量”或“函数”类别,以便用户充分利用该块。详细了解“变量”或“函数”类别。
配置工作区(适用于 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 工作区。
- Toolbox:生成 XML 以指定您的 Toolbox。
- Workspace 块:生成可加载到工作区中的 XML。