Area di lavoro di dimensioni fisse

Il modo più semplice per inserire Blockly in una pagina web è iniettarlo in un tag "div" vuoto.

1. Ottieni il codice

Ottieni il codice nel modo migliore per la tua applicazione.

2. Definisci l'area

Aggiungi un div vuoto da qualche parte nel corpo della pagina e impostane le dimensioni:

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

3. Inserisci lo spazio di lavoro

Definisci la struttura della cassetta degli attrezzi:

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

Infine, chiama quanto segue per iniettare Blockly nel div definito.

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

La variabile workspace non è attualmente in uso, ma diventerà importante in seguito, quando vorrai salvare i blocchi o generare codice. Se più istanze di Blockly vengono inserite nella stessa pagina, assicurati che ogni area di lavoro restituita sia archiviata in una variabile diversa.

Ora puoi testare la pagina in un browser. Dovresti vedere l'editor di Blockly che riempie il div, con sette blocchi nella cassetta degli attrezzi. Ecco una demo dal vivo.