虽然 Blockly 定义了许多标准块,但大多数应用都需要定义和实现至少几个与网域相关的块。
版块由三部分组成:
- 块定义对象:定义块的外观和行为,包括文本、颜色、字段和连接。
- 工具箱参考文档:对工具箱 XML 中的块类型的引用,以便用户将其添加到工作区。
- 生成器函数:为此块生成代码字符串。并且始终使用 JavaScript 编写,即使目标语言不是 JavaScript。
块定义
用于网页的 Blockly 加载通过脚本文件屏蔽。blocks/
目录包含几个这样的标准块示例。假设您的组成要素不适合现有类别,请创建一个新的 JavaScript 文件。这个新的 JavaScript 文件需要添加到编辑器 HTML 文件的 <script ...>
标记列表中。
典型的块定义如下所示:
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');
}
};
string_length
:这是块的类型名称。由于所有块共用同一个命名空间,因此最好使用由类别(在本例中为string
)后跟块的函数(在本例中为length
)组成的名称。init
:此函数定义了代码块的外观和风格。
这定义了以下代码块:
如需详细了解块定义,请参阅定义块。
JSON 数组
使用 JSON 块定义数组,可以一次定义多个块。
JSON
Blockly.defineBlocksWithJsonArray([
// Block for colour picker.
{
"type": "colour_picker",
"message0": "%1",
"args0": [
{
"type": "field_colour",
"name": "COLOUR",
"colour": "#ff0000"
}
],
"output": "Colour",
"helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
"style": "colour_blocks",
"tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
"extensions": ["parent_tooltip_when_inline"]
},
// Block for random colour.
{
"type": "colour_random",
"message0": "%{BKY_COLOUR_RANDOM_TITLE}",
"output": "Colour",
"helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
"style": "colour_blocks",
"tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
}
]);
添加工具箱参考
定义后,使用类型名称将代码块引用到工具箱:
<xml id="toolbox" style="display: none">
<category name="Text">
<block type="string_length"></block>
</category>
...
</xml>
如需了解详情,请参阅工具箱指南。
添加块代码生成器
最后,如需将代码块转换为代码,请将代码块与生成器函数配对。生成器特定于所需的输出语言,但标准生成器通常采用以下格式:
javascriptGenerator.forBlock['text_length'] = function(block, generator) {
// String or array length.
var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
return [argument0 + '.length', Order.MEMBER];
};
生成器函数会接受对块的引用以进行处理。它会将输入(上面的 VALUE
输入)渲染为代码字符串,然后将它们串联成一个更大的表达式。
→ 详细了解块代码生成器...