Sabit Boyutlu Çalışma Alanı

Blockly'yi bir web sayfasına yerleştirmenin en basit yolu, onu boş bir "div" etiketine yerleştirmektir.

1. Kodu alın

Uygulamanız için en uygun şekilde kodu alın.

2. Alanı tanımlama

Sayfanın gövdesine bir yere boş bir div ekleyin ve boyutunu ayarlayın:

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

3. Çalışma alanını ekleme

Araç kutusu yapısını tanımlayın:

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"
    },
  ]
}

Son olarak, Blockly'yi tanımlanmış div'inize yerleştirmek için aşağıdakileri çağırın.

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

workspace değişkeni şu anda kullanılmamaktadır ancak daha sonra blokları kaydetmek veya kod oluşturmak istediğinizde önemli olacaktır. Aynı sayfaya birden fazla Blockly örneği eklenirse döndürülen her çalışma alanının farklı bir değişkende depolandığından emin olun.

Artık sayfayı bir tarayıcıda test edebilirsiniz. Blockly'nin düzenleyicisinin div'i araç kutusuna yedi blokla doldurduğunu görürsünüz. Canlı bir demo aşağıda verilmiştir.