Spazio di lavoro con 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 più adatto alla 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 barra degli strumenti:

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 inserire Blockly nel div definito.

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

La variabile workspace non viene attualmente utilizzata, ma diventerà importante in un secondo momento quando si vorranno salvare i blocchi o generare codice. Se viene inserita più di un'istanza di Blockly nella stessa pagina, assicurati che ogni spazio di lavoro restituito sia memorizzato in una variabile diversa.

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