Blockly Developer Tools
es una herramienta para desarrolladores basada en la Web que automatiza partes del proceso de configuración de Blockly, como la creación de bloques personalizados, la compilación de tu caja de herramientas y la configuración de tu lugar de trabajo web en Blockly.
El proceso para desarrolladores de Blockly con la herramienta consta de tres partes:
- Crea bloques personalizados con Block Factory y Block Exporter.
- Compilar una caja de herramientas y un lugar de trabajo predeterminado con Workspace Factory
- Configura tu lugar de trabajo con Workspace Factory (actualmente, una función solo en la Web).
Bloquear pestaña de fábrica
La pestaña Fábrica de bloques te ayuda a crear definiciones de bloques y generadores de código de bloque para bloques personalizados. En esta pestaña, puedes crear, modificar y guardar bloques personalizados con facilidad.
Cómo definir un bloque
En este video, se explican en detalle los pasos para definir un bloque. La IU está desactualizada, pero las funciones de bloqueo que destaca siguen siendo precisas.
Administra la biblioteca
Se hace referencia a los bloques por su nombre, de modo que cada bloque que desees crear debe tener un nombre único. La IU aplica esto y deja en claro cuándo estás "guardando" un bloque nuevo o "actualizando" un bloque existente.
Puedes alternar entre bloques que guardaste anteriormente o crear un bloque vacío nuevo si haces clic en el botón Biblioteca. Cambiar el nombre de un bloque existente es otra forma de crear rápidamente varios bloques con definiciones similares.
Importa y exporta una biblioteca
Los bloqueos se guardan en el almacenamiento local del navegador. Si borras el almacenamiento local del navegador, se borrarán tus bloques. Para guardar tus bloques de forma indefinida, debes descargar tu biblioteca. Esta se descarga como un archivo en formato XML que se puede importar para establecer la biblioteca de Blocks en el estado que tenía cuando descargaste el archivo. Ten en cuenta que la importación de una biblioteca de bloques reemplaza la actual, por lo que te recomendamos exportarla primero.
Las funciones de importación y exportación también son la forma recomendada de mantener y compartir diferentes conjuntos de bloques personalizados.
Pestaña Bloquear exportador
Una vez que hayas diseñado tus bloques, deberás exportar las definiciones de bloques y los stubs de generador para usarlos en una app. Esto se hace en la pestaña Bloquear exportador.
Cada bloque almacenado en la Biblioteca de bloques se mostrará en el selector de bloques. Haz clic en el bloque para seleccionarlo o anular la selección para exportarlo. Si deseas seleccionar todos los bloques de tu biblioteca, usa la opción "Select" → "All Stored In Block Library". Si creaste la caja de herramientas o configuraste el lugar de trabajo con la pestaña Workspace Factory, también puedes seleccionar todos los bloques que usaste. Para ello, haz clic en “Select” → “All Usage Factory”.
La configuración de exportación te permite elegir para qué idioma generado deseas segmentar los anuncios y si deseas las definiciones, los stubs de generador o ambos para los bloques seleccionados. Una vez que los hayas seleccionado, haz clic en “Exportar” para descargar los archivos.
Pestaña de fábrica de Workspace
La fábrica de lugar de trabajo facilita la configuración de una caja de herramientas y el conjunto de bloques predeterminado en un lugar de trabajo. Puedes alternar entre la edición de la caja de herramientas y el lugar de trabajo inicial con los botones “Caja de herramientas” (Toolbox) y “Espacio de trabajo” (Workspace).
Crear una caja de herramientas
Esta pestaña ayuda a compilar el XML para Toolbox. En el material, se asume que conoces las funciones de Toolbox. Si ya tienes XML para una caja de herramientas que deseas editar aquí, puedes cargarlo haciendo clic en "Load to Edit".
Caja de herramientas sin categorías
Si tienes algunos bloques y deseas mostrarlos sin categorías, simplemente arrástralos al lugar de trabajo y verás que los bloques aparecen en la caja de herramientas en la vista previa.
Caja de herramientas con categorías
Si deseas mostrar bloques en categorías, haz clic en el botón "+" y selecciona el elemento desplegable para la nueva categoría. Esto agregará una categoría a tu lista de categorías que puedes seleccionar y editar. Selecciona "Standard Category" para agregar una categoría estándar de Blockly (lógica, bucles, etc.) o "Standard Toolbox" para agregar todas las categorías estándar de Blockly. Usa los botones de flecha para cambiar el orden de las categorías.
Para cambiar el nombre o el color de la categoría seleccionada, usa el menú desplegable "Edit Category". Arrastra un bloque al lugar de trabajo para agregarlo a la categoría seleccionada.
Bloqueos avanzados
De forma predeterminada, puedes agregar a la caja de herramientas cualquiera de los bloques estándar o de cualquier bloque de la biblioteca. Si tienes bloques definidos en JSON que no están en la biblioteca, puedes importarlos con el botón "Import Custom Blocks".
Algunos bloques se deben usar juntos o incluir valores predeterminados. Esto se hace con grupos y sombras. Cualquier bloque que esté conectado en el editor se agregará a la caja de herramientas como un grupo. Los bloques que están unidos a otro bloque también se pueden cambiar a bloques de sombra seleccionando el bloque secundario y haciendo clic en el botón "Make Shadow". Nota: Solo los bloques secundarios que no contengan una variable se pueden cambiar a bloques de sombra.
Si incluyes una variable o un bloque de función en su caja de herramientas, incluye una categoría "Variables" o "Funciones" en tu caja de herramientas para permitir que los usuarios utilicen el bloque por completo. Obtén más información sobre las categorías "Variables" o "Funciones".
Configura un lugar de trabajo (para la versión web de Blockly)
Para configurar diferentes partes de tu lugar de trabajo, ve a la pestaña “Fábrica del lugar de trabajo” y selecciona “Lugar de trabajo”.
Elige opciones de lugar de trabajo
Establece diferentes valores para las opciones de configuración y observa el resultado en el área de vista previa. Habilitar la cuadrícula o el zoom revela más opciones para configurar. Además, el uso de categorías suele requerir un lugar de trabajo más complejo. Se agregan automáticamente una papelera y barras de desplazamiento cuando agregas la primera categoría.
Agrega bloques precargados al lugar de trabajo
Esto es opcional, pero puede ser necesario si quieres mostrar un conjunto de bloques en el lugar de trabajo:
- Cuando se carga la aplicación.
- Cuando se activa un evento (como avanzar de nivel, hacer clic en un botón de ayuda, etc.)
Arrastra bloques al espacio de edición para verlos en tu espacio de trabajo en la vista previa. Puedes crear grupos de bloques, inhabilitar bloques y crear determinados bloques con sombra cuando los seleccionas.
Puedes exportar estos bloques como XML (consulta a continuación). Agrégalos a tu lugar de trabajo con Blockly.Xml.domToWorkspace inmediatamente después de crearlo:
var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);
Este código de muestra agrega un solo bloque math_number al lugar de trabajo.
Se está exportando
Workspace Factory te brinda las siguientes opciones de exportación:
- Código de partida: Produce el código HTML y JavaScript de inicio para insertar el espacio de trabajo de Blockly personalizado.
- Toolbox: genera XML para especificar tu caja de herramientas.
- Bloques del espacio de trabajo: Produce un archivo XML que se puede cargar en un espacio de trabajo.