Les anciens outils pour les développeurs Blockly sont des outils pour les développeurs 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 blocs personnalisés à l'aide de Block Factory et 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 (fonctionnalité actuellement disponible uniquement sur le Web).
Onglet "Block Factory"
L'onglet "Fabrique de blocs" vous aide à créer des définitions de blocs et des générateurs de code de blocs 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'UI 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. Chaque bloc que vous souhaitez créer doit donc avoir un nom unique. L'UI applique cette règle et indique clairement si vous "enregistrez" un nouveau bloc ou "mettez à jour" un bloc existant.
Vous pouvez passer d'un bloc que vous avez enregistré précédemment à un nouveau bloc vide en cliquant sur le bouton "Bibliothèque". Modifier le nom d'un bloc existant est une autre façon 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 sous la forme d'un fichier XML qui peut être importé pour rétablir l'état de votre bibliothèque de blocs au moment où vous avez téléchargé le fichier. Notez que l'importation d'une bibliothèque de blocs remplace celle que vous utilisez actuellement. Vous pouvez donc l'exporter d'abord.
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 "Block Exporter" (Exportateur de blocs)
Une fois que vous avez conçu vos blocs, vous devez exporter les définitions de blocs et les stubs de générateur pour les utiliser dans une application. Pour ce faire, accédez à l'onglet "Block Exporter" (Exportateur de blocs).
Chaque bloc stocké dans votre bibliothèque de blocs s'affiche 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 les blocs stockés dans la bibliothèque". Si vous avez créé votre boîte à outils ou configuré votre espace de travail à l'aide de l'onglet "Workspace Factory" (Atelier de l'espace de travail), vous pouvez également sélectionner tous les blocs que vous avez utilisés en cliquant sur "Select" (Sélectionner) → "All Used In Workspace Factory" (Tous ceux utilisés dans l'atelier de l'espace de travail).
Les paramètres d'exportation vous permettent de choisir la langue générée que vous souhaitez cibler et d'indiquer si vous souhaitez exporter les définitions, les stubs 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 modification de la boîte à outils à celle de l'espace de travail de départ à l'aide des boutons "Boîte à outils" et "Espace de travail".
Créer une boîte à outils
Cet onglet permet de créer le fichier XML pour une boîte à outils. Ce contenu 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 "Load to Edit" (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. Vous verrez alors vos blocs apparaître 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 "+" et sélectionnez l'élément de menu déroulant pour la nouvelle catégorie. Une catégorie sera ajoutée à votre liste de catégories. Vous pourrez la sélectionner et la modifier. Sélectionnez "Catégorie standard" pour ajouter une catégorie Blockly standard individuelle (logique, boucles, etc.) ou "Boîte à outils standard" pour ajouter toutes les catégories Blockly standards. 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". Faites glisser un bloc dans l'espace de travail pour l'ajouter à la catégorie sélectionnée.
Blocs avancés
Par défaut, vous pouvez ajouter à la boîte à outils n'importe quel bloc standard ou bloc de votre bibliothèque. Si vous avez défini des blocs au format 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. Les blocs associés à un autre bloc peuvent également être transformés en blocs fantômes en sélectionnant le bloc enfant et en cliquant sur le bouton "Créer un bloc fantôme". Remarque : Seuls les blocs enfants qui ne contiennent pas de variable peuvent être transformés en blocs fantômes.
Si vous incluez un bloc de variable ou de fonction dans leur boîte à outils, incluez une catégorie "Variables" ou "Fonctions" dans votre boîte à outils 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" (Atelier d'espaces de travail), puis 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 observez le résultat dans la zone d'aperçu. L'activation de Grille ou Zoom révèle d'autres options de configuration. De plus, le passage à l'utilisation de 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 étape 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 est déclenché (passage à un niveau supérieur, clic sur un bouton d'aide, etc.).
Faites glisser des blocs dans l'espace de modification pour les voir dans votre espace de travail dans l'aperçu. Vous pouvez créer des groupes de blocs, désactiver des blocs et transformer certains blocs en blocs fantômes 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 du code XML pour spécifier votre boîte à outils.
- Blocs Workspace : génère du code XML qui peut être chargé dans un espace de travail.