3. 自定义积木
虽然Blockly定义了许多标准积木，但大多数应用程序需要定义和实现至少一些域相关积木，这也是Scartch3.0 Blocks使用Blockly的原因，可扩展性强。
积木由三个部分组成：
积木定义对象：定义积木的外观和行为，包括文本，颜色，字段和连接。
添加积木到Toolbox：工具箱XML中对积木类型的引用，因此用户可以将其添加到工作区。
添加积木代码：生成此积木的代码字符串。它是用JavaScript编写的，即使目标语言不是JavaScript，甚至是用于Android端的Blockly。
积木定义
用于Web加载的Blockly通过脚本文件加载积木。在“blocks/”目录中包含几个标准积木的示例。假设您的积木不适合现有分类，需要创建一个新的JavaScript文件。这个新的JavaScript文件需要包含在编辑器HTML文件的script标签列表中。
注意：大多数积木都可以使用Blockly Developer Tools定义，而不是手动创建下面的代码。
典型的积木定义如下所示，Json语言版本：
Blockly.Blocks['string_length'] = {
init: function() {
this.jsonInit({
"message0": 'length of %1',
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": "String"
}
],
"output": "Number",
"colour": 160,
"tooltip": "Returns number of letters in the provided text.",
"helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
});
}
};
此处添加了一个名为VALUE的的积木，输入一个字符串（String）参数，输出为数字（Number）,积木显示内容为length of。
将积木添加到Toolbox
定义后，使用类型名称将积木引用到工具箱：
<xml id="toolbox" style="display: none">
<category name="Text">
<block type="string_length"></block>
</category>
...
</xml>
添加积木对应的代码
最后，要将积木转换为代码，请将积木与生成器函数配对。每个积木都对应有生成器函数，多个积木形成积木组，多个生成器函数，形成代码片段，片段就可以执行。生成器特定于所需的输出语言，但标准生成器通常采用以下格式：
Blockly.JavaScript['text_length'] = function(block) {
// String or array length.
var argument0 = Blockly.JavaScript.valueToCode(block, 'VALUE',
Blockly.JavaScript.ORDER_FUNCTION_CALL) || '\'\'';
return [argument0 + '.length', Blockly.JavaScript.ORDER_MEMBER];
}
Blockly可以将积木导出为许多编程语言，包括这些流行的选项：JavaScript、Python、PHP、Lua、Dart
4. Events
工作区上的每个更改都会触发一个事件。这些事件完整地描述了每个变化的前后状态。
监听事件
工作区具有可用于侦听事件流的addChangeListener方法和removeChangeListener方法。以下示例检测用户何时创建其第一条评论，然后停止监听。
function onFirstComment(event) {
if (event.type == Blockly.Events.CHANGE &&
event.element == 'comment' &&
!event.oldValue && event.newValue) {
alert('Congratulations on creating your first comment!')
workspace.removeChangeListener(onFirstComment);
}
}
workspace.addChangeListener(onFirstComment);
积木也可以定义onchange函数，只要积木的工作空间发生更改，就会调用该函数。
事件类型
| 名称 | 类型 | 描述 |
|---|---|---|
| type | 串 | 积木事件、变量事件 |
| workspaceId | 串 | 作区的UUID。可以找到工作区Blockly.Workspace.getById(event.workspaceId) |
| blockId | 串 | 积木的UUID。该积木可以找到workspace.getBlockById(event.blockId) |
| group | 串 | 组的UUID。某些事件是不可分割的组的一部分，例如在堆栈中插入语句 |
积木创建事件（ Blockly.Events.BLOCK_CREATE）
积木删除事件（ Blockly.Events.BLOCK_DELETE）
积木变更事件（ Blockly.Events.BLOCK_DCHANGE）
积木移动事件（ Blockly.Events.BLOCK_MOVE）
变量创建事件（ Blockly.Events.VAR_CREATE）
变量删除事件（ Blockly.Events.VAR_DELETE）
变量重命名事件(Blockly.Events.VAR_RENAME)
UI事件(lockly.Events.UI)：例如滚动，缩放，拖动气泡等事件。
5. 代码编辑器
生成代码
第一步是导入相关语言的生成器。 Blockly包括以下生成器：
javascript_compressed.js
python_compressed.js
php_compressed.js
lua_compressed.js
dart_compressed.js
应该在blockly_compressed.js之后包含代码生成器。例如，以下是包含的JavaScript生成器：
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
通过此调用，用户的块可以随时从您的应用程序导出到代码：
var code = Blockly.JavaScript.workspaceToCode(workspace);
在前面两行中用Python， PHP， Lua或Dart替换JavaScript以切换生成的语法。
实时生成
通过向Blockly的change事件添加一个监听器来实时生成和显示代码：
function myUpdateFunction(event) {
var code = Blockly.JavaScript.workspaceToCode(workspace);
document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);
