Ein Blockly-Arbeitsbereich ist die Komponente auf der obersten Ebene von Blockly. Es ist die Benutzeroberfläche, mit Blöcken zu programmieren.
Weitere Informationen zum Arbeitsbereich und seinen Unterkomponenten finden Sie in der Grafik Glossar.
Injection-Div
Ein Blockly-Arbeitsbereich muss in eine <div> injiziert werden, die als „Injection“ bezeichnet wird.
div" beginnen.
Die Größe des Injection-div-Elements kann statisch oder dynamisch Blockelemente innerhalb des div-Elements aktualisieren ihre wenn sich die Größe des Fensters ändert.
Das folgende Code-Snippet zeigt den HTML-Code für ein div-Element mit statischer Größe:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
Injektion
Beim Einschleusen werden alle HTML-Unterelemente erstellt, aus denen die Benutzeroberfläche eines Arbeitsbereich. Außerdem führt es die gesamte Initialisierung aus, die erforderlich ist, um den Arbeitsbereich zu erhalten. einsatzbereit.
Die Injection-Funktion kann die ID des Injection-div-Elements div-Element selbst:
// 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 mit zahlreichen Optionen (z. B. Layout und Stil) konfiguriert werden. während der Injektion.
Weitere Informationen zu Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.