Предустановленные блоки

Вы можете настроить (предустановить) состояние блоков в панели инструментов. Например, можно задать для поля значение по умолчанию или соединить два блока. Также можно создавать теневые блоки , которые будут служить значениями по умолчанию для дочерних блоков.

Примеры

Вот несколько примеров предустановленных блоков.

Блок с предустановленным значением поля

Вот блок math_number , поле которого отображает число 42 вместо значения по умолчанию 0:

Числовой блок, значение которого предварительно установлено на 42.

А вот набор инструментов, который задает это поле:

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>

Предварительно подключенные блоки

Вот блок controls_for , к которому подключены три блока math_number :

Блок «счёт с i от значения до значения по значению». Три входа значений подключены к числовым блокам со значениями 1, 10 и 1.

А вот набор инструментов, который предварительно соединяет эти блоки:

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>

Отключенные блоки

Отключённые блоки нельзя перетаскивать из панели инструментов. Блоки можно отключать по отдельности с помощью необязательного свойства disabled .

Выпадающее меню с тремя блоками. Третий блок отключен и отображается серым цветом.

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>

Вы также можете программно отключить или включить блок с помощью setDisabledReason .

Настройте свои блоки

Вы можете настроить блок в панели инструментов так же, как и в рабочей области. Например, вы можете задать значения полей, подключить блоки к полям ввода значений или операторов, добавить комментарии, а также свернуть или отключить блоки. Это возможно, поскольку панели инструментов используют тот же код для настройки блоков, что и рабочие области для их сериализации.

Это также означает, что создать конфигурацию блока легко. Просто загрузите блок в рабочее пространство, настройте его нужным образом и сериализуйте, выполнив следующий код в консоли.

JSON 

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

XML 

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

Затем вы можете скопировать код конфигурации и вставить его в панель инструментов. Не забудьте удалить свойства x , y и id , которые панель инструментов игнорирует.

Переменные поля

Переменные поля, возможно, придется указывать по-разному, когда они находятся в наборе инструментов и когда они сериализованы.

В частности, когда поля переменных обычно сериализуются в JSON, они содержат только идентификатор переменной, которую представляют, поскольку имя и тип переменной сериализуются отдельно. Однако наборы инструментов не содержат этой информации, поэтому её необходимо включить непосредственно в поле переменной.

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

Теневые блоки

Теневые блоки — это блоки-заполнители, которые выполняют несколько функций:

  • Они указывают значения по умолчанию для своего родительского блока.
  • Они позволяют пользователям вводить значения напрямую, без необходимости извлекать числовой или строковый блок.
  • В отличие от обычного блока, они заменяются, если пользователь кладет на них блок.
  • Они информируют пользователя о типе ожидаемого значения.

Чтобы создать теневой блок, используйте свойство shadow (JSON) или тег <shadow> (XML) вместо свойства block или тега <block> . Например, вот блок math_arithmetic , к которому подключены два теневых блока math_number :

Блок `math_arithmetic` с двумя входами значений, разделёнными раскрывающимся списком операторов, в котором выбран оператор «плюс». Каждый вход содержит блок скрытого числа, который отображается серым цветом, чтобы показать, что другой блок может его заменить.

А вот набор инструментов, который использует эти теневые блоки:

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>