Blocos predefinidos

É possível configurar (predefinir) o estado dos blocos em uma caixa de ferramentas. Por exemplo, é possível definir um campo com um valor padrão ou conectar dois blocos. Também é possível criar blocos de sombra, que servem como padrões para blocos filhos.

Exemplos

Confira alguns exemplos de blocos predefinidos.

Bloquear com um valor de campo predefinido

Confira um bloco math_number em que o campo mostra o número 42 em vez do padrão 0:

Um bloco numérico com valor predefinido como 42.

E aqui está uma caixa de ferramentas que define esse 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>

Blocos pré-conectados

Confira um bloco controls_for com três blocos math_number conectados a ele:

Um bloco &quot;contar com i de valor para valor por valor&quot;. As três entradas de valor
são conectadas a blocos numéricos com os valores 1, 10 e
1.

E aqui está uma caixa de ferramentas que pré-conecta esses blocos:

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>

Blocos desativados

Não é possível arrastar blocos desativados da caixa de ferramentas. Os blocos podem ser desativados individualmente usando a propriedade opcional disabled.

Um menu pop-up com três blocos. O terceiro bloco está desativado e esmaecido.

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>

Também é possível desativar ou ativar um bloqueio de maneira programática usando setDisabledReason.

Configurar bloqueios

É possível configurar um bloco em uma caixa de ferramentas da mesma forma que em um espaço de trabalho. Por exemplo, é possível definir valores de campo, conectar blocos a entradas de valor ou instrução, adicionar comentários e recolher ou desativar blocos. Isso é possível porque as caixas de ferramentas usam o mesmo código para configurar blocos que os espaços de trabalho usam para serializar.

Isso também significa que é fácil criar uma configuração de bloqueio. Basta carregar o bloco em um espaço de trabalho, configurar como quiser e serializar executando o seguinte código no console.

JSON

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

XML

console.log(Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()));

Em seguida, copie o código de configuração e cole na caixa de ferramentas. Remova as propriedades x, y e id, que são ignoradas pela caixa de ferramentas.

Campos variáveis

Os campos de variáveis podem precisar ser especificados de maneira diferente quando estão em uma caixa de ferramentas e quando são serializados.

Em particular, quando os campos de variáveis são normalmente serializados em JSON, eles contêm apenas o ID da variável que representam, porque o nome e o tipo da variável são serializados separadamente. No entanto, as caixas de ferramentas não contêm essas informações, então elas precisam ser incluídas diretamente no campo da variável.

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

Blocos de sombra

Os blocos de sombra são blocos de marcador de posição que executam várias funções:

  • Eles indicam os valores padrão do bloco principal.
  • Eles permitem que os usuários digitem valores diretamente sem precisar buscar um número ou um bloco de string.
  • Ao contrário de um bloco normal, eles são substituídos se o usuário soltar um bloco em cima deles.
  • Eles informam ao usuário o tipo de valor esperado.

Para criar um bloco de sombra, use a propriedade shadow (JSON) ou a tag <shadow> (XML) em vez da propriedade block ou da tag <block>. Por exemplo, veja um bloco math_arithmetic com dois blocos de sombra math_number conectados a ele:

Um bloco &quot;math_arithmetic&quot; com duas entradas de valor separadas por um menu suspenso de operador em que o operador de adição é escolhido. Cada entrada de valor contém um bloco de número fantasma, que fica acinzentado para mostrar que outro bloco pode substituí-lo.

E aqui está uma caixa de ferramentas que usa esses blocos de 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>