Ruang kerja berukuran tetap

Cara paling sederhana untuk memasukkan Blockly ke dalam halaman web adalah dengan menyisipkannya ke dalam tag 'div' kosong.

1. Mendapatkan kode

Dapatkan kode dengan cara apa pun yang paling sesuai untuk aplikasi Anda.

2. Menentukan area

Tambahkan div kosong di suatu tempat di isi halaman dan tetapkan ukurannya:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. Menyuntikkan ruang kerja

Tentukan struktur toolbox:

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

Terakhir, panggil kode berikut untuk menyuntikkan Blockly ke div yang Anda tentukan.

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

Variabel workspace saat ini tidak digunakan, tetapi akan menjadi penting nanti saat seseorang ingin menyimpan blok atau membuat kode. Jika lebih dari satu instance Blockly disisipkan ke halaman yang sama, pastikan setiap ruang kerja yang ditampilkan disimpan dalam variabel yang berbeda.

Sekarang Anda dapat menguji halaman di browser. Anda akan melihat editor Blockly mengisi div, dengan tujuh blok di toolbox. Berikut demo langsungnya.