积木开发系列----自定义Block的过程

基本过程

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还很很多细节上的配置，这里主要说一说这个过程。后续将会详细讲解这个内容。