Blockly使用二

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。

自定义积木 -c

将积木添加到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);