Puedes configurar (predeterminar) el estado de los bloques en una caja de herramientas. Por ejemplo, puedes establecer un campo en un valor predeterminado o conectar dos bloques. También puedes crear bloques de sombra, que funcionan como valores predeterminados para los bloques secundarios.
Ejemplos
Estos son algunos ejemplos de bloques predeterminados.
Bloquea con un valor de campo predeterminado
Este es un bloque math_number cuyo campo muestra el número 42 en lugar del valor predeterminado de 0:
Y aquí tienes una caja de herramientas que establece este campo:
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "math_number",
"fields": {
"NUM": 42
}
},
]
}
<xml id="toolbox" style="display: none">
<block type="math_number">
<field name="NUM">42</field>
</block>
</xml>
Bloques preconectados
Este es un bloque controls_for que tiene tres bloques math_number conectados a él:
Y aquí hay una caja de herramientas que conecta estos bloques de forma previa:
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "controls_for",
"inputs": {
"FROM": {
"block": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
"TO": {
"block": {
"type": "math_number",
"fields": {
"NUM": 10
}
}
},
"BY": {
"block": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
}
},
]
}
<xml id="toolbox" style="display: none">
<block type="controls_for">
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
<value name="BY">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
</block>
</xml>
Bloques inhabilitados
No se pueden arrastrar bloques inhabilitados desde la caja de herramientas. Los bloques se pueden inhabilitar de forma individual con la propiedad opcional disabled.
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type":"math_number"
},
{
"kind": "block",
"type": "math_arithmetic"
},
{
"kind": "block",
"type": "math_single",
"disabled": "true"
}
]
}
<xml id="toolbox" style="display: none">
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="math_single" disabled="true"></block>
</xml>
También puedes inhabilitar o habilitar un bloque de forma programática con setEnabled.
Configura tus bloques
Puedes configurar un bloque en una caja de herramientas de la misma manera que lo puedes hacer en un espacio de trabajo. Por ejemplo, puedes establecer valores de campo, conectar bloques a entradas de valor o de sentencia, agregar comentarios y contraer o inhabilitar bloques. Esto es posible porque las toolboxes usan el mismo código para configurar los bloques que usan los espacios de trabajo para serializarlos.
También significa que es fácil crear una configuración de bloque. Solo carga tu bloque en un espacio de trabajo, configúralo como quieras y ejecútalo para serializarlo. Para ello, ejecuta el siguiente código en la consola.
console.log(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace()));
console.log(Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()));
Luego, puedes copiar el código de configuración y pegarlo en tu caja de herramientas. Asegúrate de quitar las propiedades x, y y id, que la caja de herramientas ignora.
Campos de variables
Es posible que los campos de variables deban especificarse de manera diferente cuando están en una caja de herramientas y cuando se serializan.
En particular, cuando los campos de variables se serializan normalmente a JSON, solo contienen el ID de la variable que representan, ya que el nombre y el tipo de la variable se serializan por separado. Sin embargo, los conjuntos de herramientas no contienen esa información, por lo que se debe incluir directamente en el campo de la variable.
{
"kind": "flyoutToolbox",
"content": [
{
"kind": "block",
"type": "controls_for",
"fields": {
"VAR": {
"name": "index",
"type": "Number"
}
}
}
]
}
Bloques de sombras
Los bloques de sombra son bloques de marcador de posición que realizan varias funciones:
- Indican los valores predeterminados de su bloque superior.
- Permiten que los usuarios escriban valores directamente sin necesidad de recuperar un número o un bloque de cadena.
- A diferencia de un bloque normal, se reemplazan si el usuario coloca un bloque encima de ellos.
- Le informan al usuario el tipo de valor esperado.
Para crear un bloque de sombra, usa la propiedad shadow (JSON) o la etiqueta <shadow> (XML) en lugar de la propiedad block o la etiqueta <block>. Por ejemplo, este es un bloque math_arithmetic que tiene dos bloques de sombra math_number conectados a él:
Y aquí hay una caja de herramientas que usa estos bloques de sombras:
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "math_arithmetic",
"fields": {
"OP": "ADD"
},
"inputs": {
"A": {
"shadow": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
},
"B": {
"shadow": {
"type": "math_number",
"fields": {
"NUM": 1
}
}
}
}
},
]
}
<xml id="toolbox" style="display: none">
<block type="math_arithmetic">
<field name="OP">ADD</field>
<value name="A">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="B">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
</xml>