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

块的定义一般用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就是分类(Category)：        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文件复制到我们项目的资产目录中，在代码中增加对这些文件的关联（见第一篇文章）后即可使用
制作区同样也是一个可视化模块化编程区域，它同样拥有Toolbox，左侧的Input、Filed、Type、Colour就是分类(Category)：        Input代表可输入的块，块必须基于它而制造，它有三种类型：
                value input：用于接收一些值
                statement input：用于接收一些动作
                dummy input：“空输入”，它不接收输入，可用于定义变量或声明明某一动作等，如下是对ture的定义：制作过程：    首先，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中显示。