blockly-android模块化/可视化编程（三）——自定义块并增加到项目中

最新推荐文章于 2024-04-14 09:34:40 发布

Handev

最新推荐文章于 2024-04-14 09:34:40 发布

阅读量4.4k

点赞数 2

分类专栏：安卓-开源框架文章标签： blockly 模块化编程可视化编程儿童编程 scratch

本文链接：https://blog.csdn.net/hansion3333/article/details/79617435

版权

安卓-开源框架专栏收录该内容

6 篇文章 1 订阅

订阅专栏

块的定义一般用json文件来表示，如下图所示中由“_blocks”结尾的json文件。

当然，我们注意到了这点，那么我们也要规范自己的命名方式，自定义块文件以 “_blocks”结尾

对于初次接触块文件的人来说，json的内容让我们不明所以。

其实，我们大可不必强行理解它。因为Google为我们提供了图形化编程工具Blockly Developer Tools来生成这些block、toolbox、workspace并且自动生成解析generator模板，非常方便。

地址： https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

官方使用指导： https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools

打开如下图所示：

接下来，我们来学习Blockly Developer Tools的使用方法

1.工作模式切换

如下三个选项卡用于切换工作模式：

Block Factory用于制造block块

Block Exporter用于将制造好的block块导出至文件

Workspace Factory用于制造toolbox以及workspace

2.使用Block Factory制作block块

制作区同样也是一个可视化模块化编程区域，它同样拥有Toolbox，左侧的Input、Filed、Type、Colour就是分类

( C ategory)：

Input代表可输入的块，块必须基于它而制造，它有三种类型：

value input：用于接收一些值

statement input：用于接收一些动作

dummy input：“空输入”，它不接收输入，可用于定义变量或声明明某一动作等，如下是对ture的定义：

Field代表字段，返回一些诸如字符串、数字之类的值

Type代表类型，一般用于对value input接收的值的类型进行限定

Colour代表颜色，用于块颜色的定义

认识基本块：

name用于定义模块的名称

inputs仅用于接收input块

第一下拉框用于设定input块的展示样式，包括自动、拓展显示、行内显示

第二下拉框用于设置块的可连接方向

colour用于设置块的颜色，颜色采用HSV( Hue-Saturation-Value )颜色空间定义，H代表色调，S代表饱和度，V代表明度，具体详见 https://baike.baidu.com/item/HSV/547122?fr=aladdin&fromid=12630604&fromtitle=HSV%E9%A2%9C%E8%89%B2%E7%A9%BA%E9%97%B4

颜色生成器： https://www.rapidtables.com/web/color/color-picker.html

如下以if else模块为例，我们就可以贯通上面所有的讲述：

制作过程：

首先，if需要接收Boolean类型的参数，所以我们选择value input,并设置type为Boolean，加入文字显示“if”

其次，if执行的语句我们需要用statement input来接收，并加入文字显示“do”

再次，else部分无需任何输入，我们使用dummy input，加入显示文字“else”即可

最后，else执行的语句我们同样用 statement input来接收，并加入文字显示“do”

点击上方的保存，保存到Block Library中，下次打开网页依然可以进行编辑

到这里，你会发现预览模块和我们要做的样子并不完全一样，是的，我们还需要处理一些细节：

设置连接方式，这里设置为上下皆可连接：top+bottom connections

设置颜色，输入或拖动色彩盘，设置为345即可

至此，我们就完成了一个模块的创造，我们在右侧Block Definition中可以看到实时生成的代码，我们将其复制到我们项目的块定义文件中，并将此块添加到toolbox对应的分类中，即可在App中显示。

{
  "type": "if_else",
  "message0": "if %1 do %2 else %3 do %4",
  "args0": [
    {
      "type": "input_value",
      "name": "if_param",
      "check": "Boolean"
    },
    {
      "type": "input_statement",
      "name": "if_do"
    },
    {
      "type": "input_dummy"
    },
    {
      "type": "input_statement",
      "name": "else_do"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 345,
  "tooltip": "",
  "helpUrl": ""
}

代码的解析就依赖于右下角的Generator stub中生成的模板代码，我们将其复制到我们项目的代码解析文件中，进行针对行的修改，即可让此模块在App上转换成对应代码，如：

Blockly.JavaScript['if_else'] = function(block) {
  var value_if_param = Blockly.JavaScript.valueToCode(block, 'if_param', Blockly.JavaScript.ORDER_ATOMIC);
  var statements_if_do = Blockly.JavaScript.statementToCode(block, 'if_do');
  var statements_else_do = Blockly.JavaScript.statementToCode(block, 'else_do');
  var code = 'if('+value_if_param+') {\n'+statements_if_do+'} else {\n'+statements_else_do+'};\n';
  return code;
};

3.使用Block Exporter导出块至文件

切换到Block Exporter，我们可以看到左边会将我们在Block Library中创造的Block全部展示出来，勾选我们需要的Block，并设置文件名称（需含拓展名），即可点击Export按钮进行导出块定义文件与解析模板文件

4.使用Workspace Factory制作toolbox和workspace

切换到 Block Exporter，我们通过中部几个符号进行创建分类、删除分类、上下移动分类。

创建分类后，可将左侧toolbox中的模块拖入其中，右侧可实时预览，制作完成后，可通过上方的Export按钮进行导出

5.使用生成的文件

将以上生成的块定义文件、代码解析文件、Toolbox文件、workspace文件复制到我们项目的资产目录中，在代码中增加对这些文件的关联（见第一篇文章）后即可使用