5.用block开发者工具去创建自定义块

原文:https://developers.google.com/blockly/guides/create-custom-blocks/overview
Blockly带有大量的预定义块。从数学函数到循环结构等等。但是,为了与外部应用程序接口,我们必须创建自定义块来形成API。例如,在创建[绘图程序]时,可能需要创建一个"绘制半径为R的圆"块。

创建自定义块的两种方法

在大多数情况下,最简单的方法是找到一个已经存在的,并且非常相似的块,复制它并根据需要进行修改。
前面也说到过,通创建一个工具块有两种方法:一种是写代码(格式有javascript和json),另而一种是使用blockly提供的开发者工具。
如下:

image.png

地址
要注意两点:

  1. 这是一个纯web工具:只能在线上使用。
  2. 你创建的工具或者工作区的信息要自己导出来使用。

下面介绍块开发工具的基本使用

1. 块开发工具 Blockly Developer Tools

[块开发工具](https://blockly-demo.appspot.com/static/demos/blockfactory/index.html
是一款基于web的开发工具,可自动执行Blockly配置过程的各个部分,包括创建自定义块,构建工具箱以及配置Web Blockly工作区。

开发人员可以在三个层面上使用它:

  1. 使用Block Factory和Block Exporter创建自定义块。
  2. 使用Workspace Factory构建工具箱和默认工作区。
  3. 使用Workspace Factory配置工作空间。

1.1 Block Factory选项卡

“块工厂”选项卡可帮助您 为自定义块创建 块定义代码生成器。在此选项卡上,您可以轻松创建,修改和保存自定义块。

定义一个块

下面的视频介绍了如何使用block开发者工具来定义一个工具块

https://www.youtube.com/watch?v=VQ4L7ThqWMs

管理库

块由它们的名称来引用,因此每个要创建的块都必须具有唯一的名称。UI强制执行此操作,并在您“保存”新块或“更新”现有块时明确指出。你使用块开发工具时会明确地感知到这一点。您可以通过单击库按钮在先前保存的块之间切换或创建新的空白块。更改现有块的名称是另一种快速创建具有相似定义的多个块的方法。

导出和导入库

当你在block开发者工具这个网页上操作时,块的信息实质上被保存到浏览器的本地存储。清除浏览器的本地存储将删除您的块。

为了无限期地保存你的块,你必须通过导出功能下载你的库。导入和导出功能也是维护和共享不同组自定义块的推荐方式。导入和导出功能在这个开发工具的界面上有现成的按钮使用。

块导出器选项卡

一旦你设计了你的块,你将需要导出块定义和生成器存根以在应用程序中使用它们。这是在“块导出器”选项卡上完成的。


image.png

存储在块库中的每个块都将显示在块选择器中。单击该块以选择或取消选择该输出。如果要选择库中的所有块,请使用“选择”→“全部存储在块库”选项。如果您使用工作区工厂选项卡构建了工具箱或配置了工作区,也可以通过单击“选择”→“工作区工厂中全部使用”来选择所使用的所有区块。

通过导出设置,您可以选择要生成的目标语言以及是否需要所选块的定义,生成器桩或两者。一旦你选择了这些,点击'导出'下载你的文件。

注意:如果在Mac上使用保存对话框,则一次只能下载 一个文件

工作区工厂Workspace Factory选项卡

image.png

Workspace Factory可以轻松配置工具箱和工作区中默认的块。您可以在“工具箱”和“工作区”按钮之间切换编辑工具箱和起始工作区。

上面只是创建了工具,你还需要一个工具箱来装这些工具。

建立一个工具箱

该选项卡可帮助构建工具箱的XML。假定您熟悉Toolbox的功能。如果您已经在此处编辑了一个工具箱的XML,则可以通过单击“加载到编辑”来加载它。

没有类别的工具箱

如果您有几个块,并且想要在没有任何类别的情况下显示它们,只需将它们拖到工作区中,并且您会在预览中看到您的块出现在工具箱中。


image.png
带有类别的工具箱

如果您想要在类别中显示块,请单击“+”按钮并为新类别选择下拉项目。这会将一个类别添加到您的类别列表中,您可以选择和编辑。选择“标准类别”添加单个标准块类别(逻辑,循环等)或“标准工具箱”以添加所有标准块类别。使用箭头按钮重新排列类别。

image.png

注意:标准类别和工具箱包括Playground中的所有块 。这组块不适合大多数应用程序,应根据需要进行修剪。此外,某些模块在移动设备上尚不受支持。
要更改所选类别的名称或颜色,请使用“编辑类别”下拉菜单。将块拖动到工作区中会将其添加到选定的类别中。

image.png

高级块

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

一些块应该一起使用或包含默认值。这是通过组和阴影来完成的 。在编辑器中连接的任何块将作为一个组添加到工具箱中。通过选择子块并单击“制作阴影”按钮,也可以将附加到其他块的块更改为阴影块。注意:只有不包含变量的子块才可以更改为影子块。

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

1.2 配置工作区(对于Web Blockly)

要配置工作区的不同部分,请转到“工作区工厂”选项卡并选择“工作区”。

选择工作区选项

配置选项设置不同的值, 并在预览区域查看结果。启用 网格或 缩放可以显示更多配置选项。另外,切换到使用类别通常需要更复杂的工作空间; 当您添加第一个类别时,会自动添加垃圾箱和滚动条。

将预先加载的块添加到工作区

这是可选的,但如果要在工作区中显示一组块就可能需要预先加载块了:

  1. 应用程序加载时。
  2. 当一个事件(推进一个级别,点击一个帮助按钮等)被触发。

将块拖动到编辑空间中以在预览中的工作区中查看它们。您可以创建块组,禁用块,并在选择某些块阴影块时进行设置。

导出

工作区工厂为您提供以下导出选项:

  1. 入门代码:生成入门html和javascript以注入您自定义的Blockly工作区。
  2. 工具箱生成XML来指定您的工具箱。
  3. 工作空间块生成可以加载到工作空间中的XML。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容