Blockly Developer Tools
est un outil Web pour les développeurs qui automatise une partie 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 Web Blockly.
Le processus de développement Blockly utilisant l'outil comprend trois étapes:
- Créer des blocs personnalisés à l'aide de la fabrique de blocs et de l'exportateur de blocs
- Créer 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 "Bloquer la fabrique"
L'onglet "Fabrique de blocs" vous permet de 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 volume
Cette vidéo décrit en détail les étapes de définition d'un bloc. L'UI est obsolète, mais les caractéristiques de bloc qu'elle met en évidence 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'interface utilisateur applique cette règle et indique clairement lorsque vous enregistrez un nouveau bloc ou mettez à jour un bloc existant.
Vous pouvez passer d'un bloc à 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. Le fait de vider le stockage local du navigateur supprimera vos blocs. 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 forme de fichier XML qui peut être importé pour la définir sur l'état dans lequel elle se trouvait au moment du téléchargement du fichier. Notez que l'importation d'une bibliothèque de blocs remplace la bibliothèque actuelle. Vous pouvez donc commencer par l'exporter.
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'exportation"
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. Cette opération s'effectue dans l'onglet "Exportateur de blocs".
Chaque bloc stocké dans votre bibliothèque de blocs s'affiche dans le sélecteur de blocs. Cliquez sur le bloc afin de le sélectionner ou de 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 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 "Select" (Sélectionner) → "All Use In Workspace Factory" (Tous les blocs 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 utiliser les définitions, les bouchons de générateur ou les deux pour les blocs sélectionnés. Une fois que vous les avez sélectionnés, cliquez sur "Exporter" pour télécharger vos fichiers.
Onglet Workspace Factory
La fabrique d'espaces de travail facilite la configuration d'une boîte à outils et de l'ensemble de blocs par défaut dans un espace de travail. Vous pouvez basculer entre la modification de la boîte à outils et l'espace de travail de départ à l'aide des boutons "Boîte à outils" et "Espace de travail".
Création d'une boîte à outils
Cet onglet permet de créer le code XML d'une boîte à outils. Il part du principe 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 catégorie, il vous suffit de les faire glisser dans l'espace de travail. Ils apparaîtront alors 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 dans la liste déroulante pour la nouvelle catégorie. Une catégorie que vous pouvez sélectionner et modifier est alors ajoutée à votre liste. 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 flèches pour réorganiser les catégories.
Pour modifier le nom ou la couleur de la catégorie, utilisez le menu déroulant "Modifier la catégorie". Si vous faites glisser un bloc dans l'espace de travail, vous l'ajoutez à 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 n'importe quel bloc de votre bibliothèque. Si des blocs définis en JSON ne figurent pas dans votre bibliothèque, vous pouvez les importer à l'aide du bouton "Import Custom Blocks" (Importer des blocs personnalisés).
Certains blocs doivent être utilisés ensemble ou inclure des valeurs par défaut. Pour ce faire, utilisez les groupes et les ombres. Tous les blocs connectés dans l'éditeur seront ajoutés à la boîte à outils en tant que groupe. Vous pouvez également transformer les blocs rattachés à un autre bloc en blocs ombres en sélectionnant le bloc enfant et en cliquant sur le bouton "Créer une ombre". Remarque: Seuls les blocs enfants ne contenant pas de variable peuvent être transformés en blocs fantômes.
Si vous incluez une variable ou un bloc de fonction dans leur boîte à outils, incluez une catégorie "Variables" ou "Fonctions" pour permettre aux utilisateurs d'exploiter pleinement le bloc. En savoir plus sur les catégories "Variables" ou "Fonctions"
Configurer un espace de travail (pour le Web Blockly)
Pour configurer différentes parties de votre espace de travail, accédez à l'onglet "Workspace Factory" et sélectionnez "Espace de travail".
Choisir les options de l'espace de travail
Définissez des valeurs différentes pour les options de configuration et observez le résultat dans la zone d'aperçu. L'activation de la grille ou du zoom permet d'afficher d'autres options à configurer. 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 opération est facultative, mais elle peut être nécessaire si vous souhaitez afficher un ensemble de blocs dans l'espace de travail:
- Lors du chargement de l'application
- Lorsqu'un événement (passage d'un niveau, clic sur un bouton d'aide, etc.) est déclenché.
Faites glisser des blocs dans l'espace d'édition pour les afficher dans votre espace de travail dans l'aperçu. Vous pouvez créer des groupes de blocs, désactiver des blocs et faire en sorte que certains blocs soient fantômes lorsque vous les sélectionnez.
Vous pouvez exporter ces blocs au format XML (voir ci-dessous). Ajoutez-les à votre espace de travail à l'aide de 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 propose les options d'exportation suivantes:
- Code de démarrage: génère le code HTML et le code 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.