Un'area di lavoro Blockly è il componente di livello più alto di Blockly. È l'interfaccia utente che utilizzi per programmare con i blocchi.
Per saperne di più sullo spazio di lavoro e sui relativi componenti secondari, consulta il glossario visivo.
Div di inserimento
Uno spazio di lavoro Blockly deve essere inserito in un <div>, chiamato "div di inserimento".
L'inserimento div può essere dimensionato staticamente o
dinamicamente. Gli elementi Blockly all'interno di div aggiornano le proprie
dimensioni quando la finestra viene ridimensionata.
Il seguente snippet di codice mostra l'HTML per un'iniezione di dimensioni statiche
div:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
Iniezione
L'inserimento crea tutti gli elementi secondari HTML che compongono la UI di uno spazio di lavoro. Esegue anche tutta l'inizializzazione necessaria per preparare lo spazio di lavoro all'uso.
La funzione di inserimento può accettare l'ID dell'inserimento div o l'inserimento div stesso:
// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });
// Passes the injection div.
const workspace = Blockly.inject(
document.getElementById('blocklyDiv'), { /* config */ });
Configurazione
Lo spazio di lavoro può essere configurato con numerose opzioni (come layout e stile) durante l'inserimento.
Per ulteriori informazioni sulle opzioni di configurazione, consulta Opzioni di configurazione.