Blok preset

Anda dapat mengonfigurasi (menetapkan) status blok di toolbox. Misalnya, Anda dapat menetapkan kolom ke nilai default atau menghubungkan dua blok. Anda juga dapat membuat blok bayangan, yang berfungsi sebagai default untuk blok turunan.

Contoh

Berikut beberapa contoh blok yang telah ditetapkan.

Blok dengan nilai kolom yang telah ditetapkan

Berikut adalah blok math_number yang kolomnya menampilkan angka 42, bukan default 0:

Blok angka yang nilainya telah ditetapkan ke 42.

Berikut adalah toolbox yang menetapkan kolom ini:

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>

Blok yang terhubung sebelumnya

Berikut adalah blok controls_for yang memiliki tiga blok math_number yang terhubung dengannya:

Blok &quot;count with i from value to value by value&quot;. Tiga input nilai
terhubung ke blok angka dengan nilai 1, 10, dan
1.

Berikut adalah toolbox yang menghubungkan blok ini sebelumnya:

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>

Blok yang dinonaktifkan

Blok yang dinonaktifkan tidak dapat ditarik dari toolbox. Blok dapat dinonaktifkan satu per satu menggunakan properti disabled opsional.

Menu flyout dengan tiga blok. Blok ketiga dinonaktifkan dan berwarna abu-abu.

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>

Anda juga dapat menonaktifkan atau mengaktifkan blok secara terprogram menggunakan setDisabledReason.

Mengonfigurasi blok

Anda dapat mengonfigurasi blok di toolbox dengan cara apa pun yang dapat Anda gunakan untuk mengonfigurasinya di ruang kerja. Misalnya, Anda dapat menetapkan nilai kolom, menghubungkan blok ke input nilai atau pernyataan, menambahkan komentar, serta menciutkan atau menonaktifkan blok. Hal ini dapat dilakukan karena toolbox menggunakan kode yang sama untuk mengonfigurasi blok yang digunakan ruang kerja untuk menserialisasinya.

Artinya, konfigurasi blok dapat dibuat dengan mudah. Cukup muat blok ke ruang kerja, konfigurasikan sesuai keinginan Anda, dan serialisasikan dengan menjalankan kode berikut di konsol.

JSON

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

XML

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

Kemudian, Anda dapat menyalin kode konfigurasi dan menempelkannya ke toolbox. Pastikan untuk menghapus properti x, y, dan id, yang diabaikan oleh toolbox.

Kolom variabel

Kolom variabel mungkin perlu ditentukan secara berbeda saat berada di toolbox dibandingkan saat diserialisasikan.

Secara khusus, saat kolom variabel biasanya diserialisasikan ke JSON, kolom tersebut hanya berisi ID variabel yang diwakilinya, karena nama dan jenis variabel diserialisasikan secara terpisah. Namun, toolbox tidak berisi informasi tersebut, sehingga harus disertakan langsung di kolom variabel.

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

Blok bayangan

Blok bayangan adalah blok placeholder yang menjalankan beberapa fungsi:

  • Blok ini menunjukkan nilai default untuk blok induknya.
  • Blok ini memungkinkan pengguna mengetik nilai secara langsung tanpa perlu mengambil blok angka atau string.
  • Tidak seperti blok biasa, blok ini akan diganti jika pengguna menjatuhkan blok di atasnya.
  • Blok ini memberi tahu pengguna tentang jenis nilai yang diharapkan.

Untuk membuat blok bayangan, gunakan properti shadow (JSON) atau tag <shadow> (XML), bukan properti block atau tag <block>. Misalnya, berikut adalah blok math_arithmetic yang memiliki dua blok bayangan math_number yang terhubung dengannya:

Blok `math_arithmetic` dengan dua input nilai yang dipisahkan oleh dropdown operator yang memilih operator plus. Setiap input nilai berisi
blok angka bayangan, yang berwarna abu-abu untuk menunjukkan bahwa blok lain dapat menggantikannya.

Berikut adalah toolbox yang menggunakan blok bayangan ini:

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>