基本过程
Blockly中提供了很多预先定义好的小积木,但当你涉及具体的领域的时候,这些预定义好的积木可能不能满足你的需求,这样,就需要定义自己独特的小积木来满足需求了。这一节,将会添加一个计算字符串长度的小积木来演示整个过程。
自定义Block的流程包括以下三个步骤:
1、定义积木:Blockly是可以通过外观来判断Block作用以及行为,这里就定义Block外观的步骤。
2、添加到工具箱中:定义好了以后需要添加到工具箱中以便后续引用。
3、为这个积木编写一段翻译代码,这段代码用于把BLOCK翻译成为响应的高级语言,比如JavaScript
定义Block
先上代码:
Blockly.Blocks['string_length'] = {
init: function() {
this.appendValueInput("VALUE")//添加一个输入参数
.setCheck("String")//检查输入参数,必须是字符串的输入
.setAlign(Blockly.ALIGN_RIGHT)
.appendField("输入字符串");//提示内容
this.setOutput(true, "Number");//输出
this.setColour(315);//Block的整体颜色
this.setTooltip("计算字符串的长度");//提示
this.setHelpUrl("");
}
};
这一段定义就得到这样的Block:
添加到自定义类别(MyTools)中
在Blockly的Workspace介绍中可以知道,ToolBox是配置成一段XML代码的,我们以之前的版本为基础,添加一个类别名叫MyTools,并在这个类别下添加这个Block:
<sep></sep>
<category name="MyTools" categorystyle="logic_category">
<block type="string_length"></block>
</category>
这里Block节点的type属性填写成上面代码中Blockly.Blocks[‘string_length’] 的”string_length“即可。
这样做了以后那么整个界面将会变成:
到此为止,就将我们自定义的Block注入到Workspace中了。接下就是编写一段翻译代码。
编写翻译代码
有了Block,最重要的就是让这个Block的行为转为JavaScript代码。我们这样写:
Blockly.JavaScript['string_length'] = function(block) {
//获取输入值
var input_value = Blockly.JavaScript.valueToCode(block, 'VALUE',
Blockly.JavaScript.ORDER_ATOMIC);
console.log(input_value);
var code = input_value + '.length';//等于与JS里的 "XXX.length"
console.log(code);
return [code, Blockly.JavaScript.ORDER_NONE];
};
测一测
完成后,界面会改变为这样,我们往里添加一个弹窗配置,看看效果:
执行以后我们得到了一个弹窗:
这样这个计算字符串长度的Block就全部完成了。自定义Block还很很多细节上的配置,这里主要说一说这个过程。后续将会详细讲解这个内容。