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

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

Примеры

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

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

Вот блок 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>