Blockly/Scratch BlocksBlockly开发文档中文翻译

blockly二次开发中文文档——3.3添加自定义块

2019-08-22  本文已影响0人  小二特别二

添加自定义块

虽然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"
    });
  }
};

JavaScript语言版本:

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

这定义了以下块:


text-length.png

块定义的详细信息可以《块的定义》中找到。

添加工具箱的方法,仅供参考

定义后,使用类型名称将块引用到工具箱:

<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];
};

生成器函数引用块进行处理。它将输入(上面的VALUE输入)呈现为代码字符串,然后将它们连接成更大的表达式。

有关详细信息,请参阅《使用自定义生成器》。

上一篇 下一篇

猜你喜欢

热点阅读