Creación de lugares de trabajo

Un lugar de trabajo de Blockly es el componente de nivel más alto de Blockly. Es la IU la que que usas para programar con bloques.

Para obtener más información sobre el lugar de trabajo y sus subcomponentes, consulta el elemento visual glosario.

División de inyección

Un espacio de trabajo de Blockly debe inyectarse en un <div>, llamado div”.

Se puede establecer el tamaño del elemento div de inyección de manera estática o de forma dinámica. Los elementos Blockly dentro del div actualizan su cuando se cambia el tamaño de la ventana.

En el siguiente fragmento de código, se muestra el código HTML de un div de inyección de tamaño estático:

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

Inyección

La inyección crea todos los subelementos HTML que conforman la IU de un Workspace. También realiza toda la inicialización necesaria para obtener el espacio de trabajo lista para usar.

La función de inyección puede tomar el ID del div de inyección “div”:

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

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

Configuración

El lugar de trabajo se puede configurar con varias opciones (como el diseño y el estilo) durante la inyección.

Para obtener más información sobre las opciones de configuración, consulta Opciones de configuración.