变量是一个重要的编程概念。Blockly 支持动态 Python 和 JavaScript 等其他类型的语言,并且只需进行一些额外的工作, 可以添加信息来支持强类型语言 (例如 Java 或 C)。
点击此处了解详情 动态类型语言与静态类型语言的相关信息。
Blockly 提供变量字段,这些字段是动态下拉框, 用户提供的变量的名称。下面是一个示例。
默认情况下,Blockly 允许将任何类型分配给变量, Blockly 提供的生成器适用于动态类型的语言。如果您 而是使用类型化语言,则可以将 Blockly 配置为支持该语言 以下:
非类型变量块
访问和操控变量的最基本块是 getter 和 setter 代码块我们来了解一下 Blockly 的 getter 和 setter 代码块 提供什么。
JSON
// Block for variable getter.
{
"type": "variables_get",
"message0": "%1",
"args0": [
{ // Beginning of the field variable dropdown
"type": "field_variable",
"name": "VAR", // Static name of the field
"variable": "%{BKY_VARIABLES_DEFAULT_NAME}" // Given at runtime
} // End of the field variable dropdown
],
"output": null, // Null means the return value can be of any type
...
},
// Block for variable setter.
{
"type": "variables_set",
"message0": "%{BKY_VARIABLES_SET}",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "%{BKY_VARIABLES_DEFAULT_NAME}"
},
{
"type": "input_value", // This expects an input of any type
"name": "VALUE"
}
],
...
}
JavaScript
// Block for variable getter.
Blockly.Blocks['variables_get'] = {
init: function() {
this.appendDummyInput()
.appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME");
this.setOutput(true, null);
...
}
};
// Block for variable setter.
Blockly.Blocks['variables_set'] = {
init: function() {
this.appendValueInput("NAME")
.setCheck(null)
.appendField("set")
.appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME")
.appendField("to");
this.setOutput(true, null);
...
}
};
这会创建以下两个代码块:
一个需要注意的重要细节是,通过设置变量 getter 的“output” 为 null,返回值可以是任何类型。另请注意, setter 的输入未指定任何检查。因此,可以设置 任意类型的值。
类型化变量块
您可以添加强制执行类型检查的 getter 和 setter。例如,如果您 创建了一个“Panda”类型的变量,以下定义将创建一个 getter 和 setter。
JSON
// Block for Panda variable getter.
{
"type": "variables_get_panda",
"message0": "%1",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
"variableTypes": ["Panda"], // Specifies what types to put in the dropdown
"defaultType": "Panda"
}
],
"output": "Panda", // Returns a value of "Panda"
...
},
// Block for Panda variable setter.
{
"type": "variables_set_panda",
"message0": "%{BKY_VARIABLES_SET}",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
"variableTypes": ["Panda"],
"defaultType": "Panda"
},
{
"type": "input_value",
"name": "VALUE",
"check": "Panda" // Checks that the input value is of type "Panda"
}
],
"previousStatement": null,
"nextStatement": null,
...
}
JavaScript
// Block for variable getter.
Blockly.Blocks['variables_get_panda'] = {
init: function() {
this.appendDummyInput()
.appendField(new Blockly.FieldVariable(
"VAR_NAME", ['Panda'], 'Panda'), "FIELD_NAME");
this.setOutput(true, 'Panda');
...
}
};
// Block for variable setter.
Blockly.Blocks['variables_set_panda'] = {
init: function() {
this.appendValueInput("NAME")
.setCheck('Panda')
.appendField("set")
.appendField(new Blockly.FieldVariable(
"VAR_NAME", null, ['Panda'], 'Panda'), "FIELD_NAME")
.appendField("to");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
...
}
};
这会创建两种类型的块,即 getter 和 setter。仅他们自己的下拉菜单
显示变量。其输入和输出仅接受
与“熊猫”类型相关联。该字段的 defaultType
必须设置为 1
variableTypes
数组中值的个数。在下列情况下,未设置 defaultType
:
提供 variableTypes
数组会导致系统抛出错误。
默认情况下,系统没有直观的指示符来告诉用户当前是什么类型 。区分变量类型的一种简单方法是按颜色区分。
将变量添加到 Toolbox
为了让这种新型变量对您的用户有用,您需要添加一种方式, 创建和使用新变量。
创建新的动态类别 (如果您还没有创建的话)。
将新的 getter 和 setter 添加到该类别中。
“创建变量”按钮
接下来,您的用户需要通过某种方式创建变量。最简单的方法是使用 “创建变量”按钮。
创建按钮时,进行回调调用
Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace(), null, 'panda');
系统将创建一个熊猫型变量!
允许用户创建多种类型的变量的最简单方法是将 一个“create”按类型(例如“创建字符串变量”“创建数字”)的按钮 变量,即创建熊猫变量)。
如果您的变量类型超过两个或三个, 按钮过多。在这种情况下,不妨考虑使用 @blockly/plugin-typed-variable-modal 显示一个弹出式窗口,用户可以从中选择所需的变量类型。
定义生成器
最后,您需要定义块码生成器 为新的变量块创建映像您还可以直接访问变量列表 与 Blockly.Workspace.getAllVariables() 获取所有类型的所有变量,或 Blockly.Workspace.getVariablesOfType() 以获取特定类型的所有变量。