Sabit boyutlu çalışma alanı

Blockly'yi bir web sayfasına yerleştirmenin en basit yolu, Blockly'yi 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 boş bir div ekleyin ve boyutunu ayarlayın:

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

3. Çalışma alanını yerleştirme

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ımladığınız div içine 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 blokları kaydetmek veya kod oluşturmak istediğinizde önemli hale gelecektir. Aynı sayfaya Blockly'nin birden fazla örneği yerleştirilirse döndürülen her çalışma alanının farklı bir değişkende depolandığından emin olun.

Artık sayfayı tarayıcıda test edebilirsiniz. Blockly'nin düzenleyicisinin div alanını doldurduğunu ve araç kutusunda yedi blok olduğunu görürsünüz. Canlı bir demo için tıklayın.