Bloki gotowe

Możesz skonfigurować (ustawić wstępnie) stan bloków w przyborniku. Możesz na przykład ustawić domyślną wartość pola lub połączyć ze sobą 2 bloki. Możesz też tworzyć bloki cieni, które służą jako domyślne bloki podrzędne.

Przykłady

Oto kilka przykładów wstępnie ustawionych bloków.

Blok z wstępnie ustawioną wartością pola

Oto blok math_number, którego pole wyświetla liczbę 42 zamiast domyślnej wartości 0:

Blok liczbowy, którego wartość jest wstępnie ustawiona na 42.

A oto przybornik, który ustawia to pole:

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>

Bloki połączone w trybie preconnect

Oto blok controls_for, do którego są połączone 3 bloki math_number:

Blok „count with i from value to value by value” (zliczaj z i od wartości do wartości o wartość). 3 wejścia wartości są połączone z blokami liczbowymi o wartościach 1, 10 i 1.

A oto przybornik, który łączy te bloki w trybie preconnect:

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>

Wyłączone bloki

Wyłączonych bloków nie można przeciągać z przybornika. Bloki można wyłączać pojedynczo za pomocą opcjonalnej właściwości disabled.

Menu wysuwane z 3 blokami. Trzeci blok jest wyłączony i wyszarzony.

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>

Możesz też programowo wyłączyć lub włączyć blok za pomocą funkcji setDisabledReason.

Konfigurowanie bloków

Blok w przyborniku możesz skonfigurować w dowolny sposób, w jaki możesz go skonfigurować w obszarze roboczym. Możesz na przykład ustawiać wartości pól, łączyć bloki z wejściami wartości lub instrukcji, dodawać komentarze oraz zwijać lub wyłączać bloki. Jest to możliwe, ponieważ przyborniki używają tego samego kodu do konfigurowania bloków, którego obszary robocze używają do ich serializacji.

Oznacza to również, że łatwo jest utworzyć konfigurację bloku. Wystarczy wczytać blok do obszaru roboczego, skonfigurować go w odpowiedni sposób i zserializować, uruchamiając w konsoli ten kod.

JSON

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

XML

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

Następnie możesz skopiować kod konfiguracji i wkleić go do przybornika. Pamiętaj, aby usunąć właściwości x, y i id, które są ignorowane przez przybornik.

Pola zmiennych

Pola zmiennych mogą wymagać innego określenia, gdy znajdują się w przyborniku, niż gdy są serializowane.

W szczególności, gdy pola zmiennych są zwykle serializowane do formatu JSON, zawierają tylko identyfikator reprezentowanej przez nie zmiennej, ponieważ nazwa i typ zmiennej są serializowane oddzielnie. Przyborniki nie zawierają jednak tych informacji, więc należy je uwzględnić bezpośrednio w polu zmiennej.

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

Bloki cieni

Bloki cieni to bloki zastępcze, które pełnią kilka funkcji:

  • Wskazują domyślne wartości bloku nadrzędnego.
  • Umożliwiają użytkownikom bezpośrednie wpisywanie wartości bez konieczności pobierania bloku liczby lub ciągu znaków.
  • W przeciwieństwie do zwykłego bloku są zastępowane, jeśli użytkownik upuści na nie blok.
  • Informują użytkownika o oczekiwanym typie wartości.

Aby utworzyć blok cienia, użyj właściwości shadow (JSON) lub tagu <shadow> (XML) zamiast właściwości block lub tagu <block>. Oto na przykład blok math_arithmetic, do którego są połączone 2 bloki cieni math_number:

Blok „math_arithmetic” z 2 wejściami wartości rozdzielonymi operatorem. W menu operatora wybrano operator dodawania. Każda wprowadzona wartość zawiera blok z liczbą w cieniu, który jest wyszarzony, aby pokazać, że można go zastąpić innym blokiem.

A oto przybornik, który używa tych bloków cieni:

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>