Bloques predeterminados

Puedes configurar (preestablecer) 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 sombra, que funcionan como valores predeterminados para los bloques secundarios.

Ejemplos

Estos son algunos ejemplos de bloques predeterminados.

Bloqueo con un valor de campo predeterminado

Aquí se muestra un bloque math_number cuyo campo muestra el número 42 en lugar del valor predeterminado 0:

Un bloque de números cuyo valor está preestablecido en 42.

Y aquí tienes un cuadro de herramientas que establece este campo:

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "kind": "block",
     "type": "math_number",
     "fields": {
       "NUM": 42
     }
   },
 ]
}

XML

<xml id="toolbox" style="display: none">
 <block type="math_number">
   <field name="NUM">42</field>
 </block>
</xml>

Bloques conectados previamente

A continuación, se muestra un bloque controls_for con tres bloques math_number conectados a él:

Un bloque &quot;count with i from value to value by value&quot;. Las tres entradas de valor están conectadas a bloques de números con los valores 1, 10 y 1.

Y aquí tienes una caja de herramientas que conecta previamente estos bloques:

JSON

{
 "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

<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

Los bloques inhabilitados no se pueden arrastrar desde la caja de herramientas. Los bloques se pueden inhabilitar de forma individual con la propiedad opcional disabled.

Un menú desplegable con tres bloques. El tercer bloque está inhabilitado y aparece en gris.

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "kind": "block",
     "type":"math_number"
   },
   {
     "kind": "block",
     "type": "math_arithmetic"
   },
   {
     "kind": "block",
     "type": "math_single",
     "disabled": "true"
   }
 ]
}

XML

<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 bloqueo de forma programática con setDisabledReason.

Configura tus bloqueos

Puedes configurar un bloque en una caja de herramientas de la misma manera en que lo harías en un espacio de trabajo. Por ejemplo, puedes establecer valores de campo, conectar bloques a entradas de valores o instrucciones, agregar comentarios y contraer o inhabilitar bloques. Esto es posible porque las cajas de herramientas usan el mismo código para configurar los bloques que los espacios de trabajo usan para serializarlos.

También significa que es fácil crear una configuración de bloqueo. Solo tienes que cargar tu bloque en un espacio de trabajo, configurarlo como quieras y serializarlo ejecutando el siguiente código en la consola.

JSON

console.log(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace()));

XML

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 variables

Es posible que los campos de variables deban especificarse de manera diferente cuando están en una caja de herramientas en comparación con cuando se serializan.

En particular, cuando los campos de variables se serializan normalmente en 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, las cajas de herramientas no contienen esa información, por lo que debe incluirse directamente en el campo de variables.

{
  "kind": "flyoutToolbox",
  "content": [
    {
      "kind": "block",
      "type": "controls_for",
      "fields": {
        "VAR": {
          "name": "index",
          "type": "Number"
        }
      }
    }
  ]
}

Bloques de sombra

Los bloques 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 bloque de números o cadenas.
  • A diferencia de un bloque normal, se reemplazan si el usuario suelta un bloque sobre ellos.
  • Informan al usuario sobre el tipo de valor esperado.

Para crear un bloque 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 secundarios math_number conectados a él:

Un bloque `math_arithmetic` con dos entradas de valor separadas por un menú desplegable de operadores en el que se elige el operador de suma. Cada entrada de valor contiene un bloque de números sombreado, que se muestra en gris para indicar que otro bloque puede reemplazarlo.

Y aquí tienes una caja de herramientas que usa estos bloques sombra:

JSON

{
 "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

<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>