Ein Blockly-Arbeitsbereich ist die Komponente der obersten Ebene von Blockly. Das ist die Benutzeroberfläche, die Sie zum Programmieren mit Blöcken verwenden.
Weitere Informationen zum Arbeitsbereich und seinen Unterkomponenten finden Sie im visuellen Glossar.
Injection-Div
Ein Blockly-Arbeitsbereich muss in ein <div> namens „injection div“ eingefügt werden.
Die Einfügung div kann statisch oder dynamisch dimensioniert werden. Blockly-Elemente in div passen ihre Größe an, wenn sich die Fenstergröße ändert.
Das folgende Code-Snippet zeigt das HTML für eine statisch dimensionierte Einfügung div:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
Injektion
Durch das Einfügen werden alle HTML-Unterelemente erstellt, aus denen die Benutzeroberfläche eines Arbeitsbereichs besteht. Außerdem wird die gesamte Initialisierung durchgeführt, die erforderlich ist, um den Arbeitsbereich für die Verwendung vorzubereiten.
Die Einfügefunktion kann die ID des Einfügens div oder das Einfügen div selbst als Eingabe verwenden:
// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });
// Passes the injection div.
const workspace = Blockly.inject(
document.getElementById('blocklyDiv'), { /* config */ });
Konfiguration
Der Arbeitsbereich kann während der Einfügung mit zahlreichen Optionen (z. B. Layout und Stil) konfiguriert werden.
Weitere Informationen zu Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.