Как создать рабочую область

Рабочее пространство Blockly — это компонент самого высокого уровня Blockly. Это пользовательский интерфейс, который используется для программирования с использованием блоков.

Более подробную информацию о рабочем пространстве и его подкомпонентах см. в визуальном глоссарии .

Инъекционный див

Рабочее пространство Blockly должно быть внедрено в <div> , называемый «injection div».

Размер блока div может изменяться статически или динамически . Блочные элементы внутри блока div изменяют свой размер при изменении размера окна.

В следующем фрагменте кода показан HTML для статического размера инъекционного div :

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

Инъекция

Инъекция создаёт все HTML-подэлементы, составляющие пользовательский интерфейс рабочего пространства. Она также выполняет всю инициализацию, необходимую для подготовки рабочего пространства к использованию.

Функция инъекции может принимать идентификатор инъекционного div или сам инъекционный div :

// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });

// Passes the injection div.
const workspace = Blockly.inject(
    document.getElementById('blocklyDiv'), { /* config */ });

Конфигурация

Во время инъекции можно настроить рабочее пространство с помощью многочисленных параметров (таких как макет и стиль).

Дополнительную информацию о параметрах конфигурации см. в разделе Параметры конфигурации .