Les outils de développement Blockly
sont des outils de développement basés sur le Web qui automatisent certaines parties du processus de configuration de Blockly, y compris la création de blocs personnalisés, la création de votre boîte à outils et la configuration de votre espace de travail Blockly.
Le processus de développement Blockly à l'aide de l'outil se compose de trois parties:
- Créez des composants personnalisés à l'aide de Block Factory et de Block Exporter.
- Créez une boîte à outils et un espace de travail par défaut à l'aide de Workspace Factory.
- Configurez votre espace de travail à l'aide de Workspace Factory (actuellement une fonctionnalité Web uniquement).
Onglet "Factory" (Usine)
L'onglet "Usine de blocs" vous aide à créer des définitions de blocs et des générateurs de code de bloc pour les blocs personnalisés. Dans cet onglet, vous pouvez facilement créer, modifier et enregistrer des blocs personnalisés.
Définir un bloc
Cette vidéo explique en détail comment définir un bloc. L'interface utilisateur est obsolète, mais les fonctionnalités de blocage qu'elle met en avant sont toujours exactes.
Gérer la bibliothèque
Les blocs sont référencés par leur nom. Par conséquent, chaque bloc que vous souhaitez créer doit avoir un nom unique. L'UI applique cette règle et indique clairement si vous "enregistrez" un nouveau bloc ou si vous "modifiez" un bloc existant.
Vous pouvez passer d'un bloc que vous avez précédemment enregistré à un autre ou créer un bloc vide en cliquant sur le bouton "Bibliothèque". Modifier le nom d'un bloc existant est un autre moyen de créer rapidement plusieurs blocs avec des définitions similaires.
Exporter et importer une bibliothèque
Les blocs sont enregistrés dans l'espace de stockage local du navigateur. Si vous videz l'espace de stockage local du navigateur, vos blocages seront supprimés. Pour enregistrer vos blocs indéfiniment, vous devez télécharger votre bibliothèque. Votre bibliothèque de blocs est téléchargée au format XML, qui peut être importé pour définir votre bibliothèque de blocs sur l'état dans lequel elle se trouvait lorsque vous avez téléchargé le fichier. Notez que l'importation d'une bibliothèque de blocs remplace la vôtre actuelle. Vous pouvez donc d'abord exporter votre bibliothèque.
Les fonctionnalités d'importation et d'exportation sont également recommandées pour gérer et partager différents ensembles de blocs personnalisés.
Onglet "Bloquer l'exportateur"
Une fois que vous avez conçu vos blocs, vous devez exporter les définitions de bloc et les bouchons de générateur pour les utiliser dans une application. Pour ce faire, accédez à l'onglet "Block Exporter" (Exportateur de blocs).
Tous les blocs stockés dans votre bibliothèque de blocs s'affichent dans le sélecteur de blocs. Cliquez sur le bloc pour le sélectionner ou le désélectionner pour l'exportation. Si vous souhaitez sélectionner tous les blocs de votre bibliothèque, utilisez l'option "Sélectionner" → "Tous stockés dans la bibliothèque de blocs". Si vous avez créé votre boîte à outils ou configuré votre espace de travail à l'aide de l'onglet Workspace Factory, vous pouvez également sélectionner tous les blocs que vous avez utilisés en cliquant sur "Sélectionner" → "Tous utilisés dans Workspace Factory".
Les paramètres d'exportation vous permettent de choisir la langue générée que vous souhaitez cibler et si vous souhaitez les définitions, les bouchons de générateur ou les deux pour les blocs sélectionnés. Une fois ces éléments sélectionnés, cliquez sur "Exporter" pour télécharger vos fichiers.
Onglet Workspace Factory
La Workspace Factory permet de configurer facilement une boîte à outils et l'ensemble de blocs par défaut dans un espace de travail. Vous pouvez passer de la boîte à outils à l'espace de travail de démarrage à l'aide des boutons "Boîte à outils" et "Espace de travail".
Créer une boîte à outils
Cet onglet vous aide à créer le fichier XML d'une boîte à outils. Ce document suppose que vous connaissez les fonctionnalités d'une boîte à outils. Si vous disposez déjà d'un fichier XML pour une boîte à outils que vous souhaitez modifier ici, vous pouvez le charger en cliquant sur "Charger pour modifier".
Boîte à outils sans catégories
Si vous avez quelques blocs et que vous souhaitez les afficher sans aucune catégorie, il vous suffit de les faire glisser dans l'espace de travail. Vos blocs apparaîtront dans la boîte à outils de l'aperçu.
Boîte à outils avec catégories
Si vous souhaitez afficher des blocs dans des catégories, cliquez sur le bouton +, puis sélectionnez l'élément du menu déroulant correspondant à la nouvelle catégorie. Une catégorie est alors ajoutée à votre liste de catégories, que vous pouvez sélectionner et modifier. Sélectionnez "Catégorie standard" pour ajouter une catégorie standard Blockly individuelle (logique, boucles, etc.) ou "Boîte à outils standard" pour ajouter toutes les catégories standard Blockly. Utilisez les boutons fléchés pour réorganiser les catégories.
Pour modifier le nom ou la couleur de la catégorie sélectionnée, utilisez le menu déroulant "Modifier la catégorie". Si vous faites glisser un bloc dans l'espace de travail, il sera ajouté à la catégorie sélectionnée.
Blocs avancés
Par défaut, vous pouvez ajouter n'importe quel bloc standard ou n'importe quel bloc de votre bibliothèque à la boîte à outils. Si vous avez des blocs définis en JSON qui ne figurent pas dans votre bibliothèque, vous pouvez les importer à l'aide du bouton "Importer des blocs personnalisés".
Certains blocs doivent être utilisés ensemble ou inclure des valeurs par défaut. Pour ce faire, utilisez des groupes et des ombres. Tous les blocs connectés dans l'éditeur sont ajoutés à la boîte à outils en tant que groupe. Vous pouvez également convertir les blocs associés à un autre bloc en blocs d'ombre en sélectionnant le bloc enfant, puis en cliquant sur le bouton "Créer une ombre". Remarque: Seuls les blocs enfants qui ne contiennent pas de variable peuvent être convertis en blocs d'ombre.
Si vous incluez une variable ou un bloc de fonction dans la boîte à outils, incluez une catégorie "Variables" ou "Fonctions" pour permettre aux utilisateurs d'utiliser pleinement le bloc. En savoir plus sur les catégories "Variables" ou "Fonctions"
Configurer un espace de travail
Pour configurer différentes parties de votre espace de travail, accédez à l'onglet "Workspace Factory" (Usine d'espaces de travail) et sélectionnez "Workspace" (Espace de travail).
Choisir les options de l'espace de travail
Définissez différentes valeurs pour les options de configuration et affichez le résultat dans la zone d'aperçu. L'activation de la grille ou du zoom permet d'afficher d'autres options de configuration. De plus, passer aux catégories nécessite généralement un espace de travail plus complexe. Une corbeille et des barres de défilement sont ajoutées automatiquement lorsque vous ajoutez votre première catégorie.
Ajouter des blocs préchargés à l'espace de travail
Cette opération est facultative, mais peut être nécessaire si vous souhaitez afficher un ensemble de blocs dans l'espace de travail:
- Lorsque l'application se charge.
- Lorsqu'un événement (passer à un niveau, cliquer sur un bouton d'aide, etc.) est déclenché.
Faites glisser des blocs dans l'espace de modification pour les afficher dans l'aperçu de votre espace de travail. Vous pouvez créer des groupes de blocs, désactiver des blocs et faire en sorte que certains blocs soient des blocs d'ombre lorsque vous les sélectionnez.
Vous pouvez exporter ces blocs au format XML (voir ci-dessous). Ajoutez-les à votre espace de travail avec Blockly.Xml.domToWorkspace immédiatement après avoir créé votre espace de travail:
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);
Cet exemple de code ajoute un seul bloc math_number à l'espace de travail.
Exportation
Workspace Factory vous propose les options d'exportation suivantes:
- Code de démarrage: génère du code HTML et JavaScript de démarrage pour injecter votre espace de travail Blockly personnalisé.
- Boîte à outils: génère un fichier XML pour spécifier votre boîte à outils.
- Workspace Blocks: génère un fichier XML pouvant être chargé dans un espace de travail.