blockly-android模块化可视化编程（三）——⾃定义块并增加
到项⽬中
块的定义⼀般⽤json⽂件来表⽰，如下图所⽰中由“_blocks”结尾的json⽂件。
当然，我们注意到了这点，那么我们也要规范⾃⼰的命名⽅式，⾃定义块⽂件以 “_blocks”结尾
对于初次接触块⽂件的⼈来说，json的内容让我们不明所以。
其实，我们⼤可不必强⾏理解它。因为Google为我们提供了图形化编程⼯具Blockly Developer Tools来⽣成这些block、toolbox、workspace并且⾃动⽣成解析generator模板，⾮常⽅便。
地址：
官⽅使⽤指导：
打开如下图所⽰：
接下来，我们来学习B lockly D e v e lop e r T ools的使⽤⽅法
1.⼯作模式切换
如下三个选项卡⽤于切换⼯作模式：
android编程入门指南 pdfBlock Factory⽤于制造block块
Block Exporter⽤于将制造好的block块导出⾄⽂件
Workspace Factory⽤于制造toolbox以及workspace
2.使⽤B lock F actor y制作b lock块
制作区同样也是⼀个可视化模块化编程区域，它同样拥有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代表明度，具体详见
颜⾊⽣成器：
如下以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.使⽤B lock E x p or te r导出块⾄⽂件
切换到Block Exporter，我们可以看到左边会将我们在Block Library中创造的Block全部展⽰出来，勾选我们需要的Block，并设置⽂件名称（需含拓展名），即可点击Export按钮进⾏导出块定义⽂件与解析模板⽂件
4.使⽤Wor ks p ace F actor y制作toolb ox和wor ks p ace
切换到 Block Exporter，我们通过中部⼏个符号进⾏创建分类、删除分类、上下移动分类。
创建分类后，可将左侧toolbox中的模块拖⼊其中，右侧可实时预览，制作完成后，可通过上⽅的Export按钮进⾏导出
5.使⽤⽣成的⽂件
将以上⽣成的块定义⽂件、代码解析⽂件、Toolbox⽂件、workspace⽂件复制到我们项⽬的资产⽬录中，在代码中增加对这些⽂件的关联（见第⼀篇⽂章）后即可使⽤
制作区同样也是⼀个可视化模块化编程区域，它同样拥有Toolbox，左侧的Input、Filed、Type、Colour就是分类
( C ategory)：
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中显⽰。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。