Blockly Developer Tools est un outil Web pour les développeurs qui peut vous aider à créer des blocs personnalisés et à les inclure dans votre application.
Définir un bloc
L'espace de travail Block Factory commence par un bloc de configuration vide. Vous pouvez ajouter des entrées et des champs au bloc en faisant glisser des blocs depuis les catégories respectives de la boîte à outils. Vous pouvez également définir le texte de l'info-bulle, l'URL d'aide, la couleur et les vérifications de connexion pour le bloc en modifiant le bloc de configuration.
La fabrique de blocs ne peut créer qu'un seul type de bloc à la fois. Si vous souhaitez concevoir plusieurs blocs interconnectés, vous devez concevoir les blocs séparément et les connecter dans la définition de la boîte à outils. De plus, les blocs peuvent comporter des fonctionnalités avancées telles que des mutateurs, mais celles-ci ne peuvent pas être créées dans la fabrique. Une fois que vous avez créé la forme de base du bloc, vous devez modifier la définition du bloc en suivant les instructions de la documentation.
Lorsque vous modifiez le bloc de configuration dans l'espace de travail, l'aperçu du bloc est automatiquement mis à jour. Le code que vous devrez ajouter à votre application sera également mis à jour automatiquement.
Configuration de sortie
Blockly accepte différentes méthodes de définition de blocs et de chargement de Blockly lui-même, ainsi que de plusieurs langages de génération de code intégrés. La façon dont vous définissez vos blocs et vos générateurs de code de bloc dépend de ces facteurs. Vous pouvez donc les définir dans la fabrique de blocs pour modifier le code de sortie.
Format d'importation Blockly
Vous pouvez charger Blockly via des balises <script> en HTML ou à l'aide d'instructions import si vous utilisez un outil de compilation avec votre application. Ce choix a une incidence sur la façon dont vous référencez certaines parties de l'API Blockly. Pour en savoir plus sur votre choix, consultez la documentation sur le chargement de Blockly.
Quelle que soit la méthode utilisée, veillez à sélectionner l'option correspondante dans la fabrique de blocs afin que le code que vous ajouterez à votre application soit correct.
Format de définition des blocs
Blockly accepte la définition de blocs en JSON ou JavaScript. Le format JSON est préférable, mais si vous souhaitez ajouter des fonctionnalités avancées telles que des mutateurs, vous pouvez utiliser le format JavaScript.
Langage du générateur de code
Blockly est fourni avec plusieurs langages de génération de code. Choisissez la ou les langues dont votre application a besoin pour afficher le bouchon correspondant du générateur de code de bloc. Si vous utilisez un générateur de langage personnalisé, vous pouvez modifier le nom de votre classe CodeGenerator personnalisée après avoir copié le code dans votre application.
Résultat du code
Les sections suivantes de Block Factory présentent le code que vous devez copier dans votre application pour charger le bloc que vous avez créé. L'endroit où vous copiez le code dépend de la façon dont vous avez structuré votre application, mais vous devez généralement exécuter les en-têtes de code avant la définition et le générateur de code de bloc, les définitions de bloc avant d'essayer de les utiliser dans une boîte à outils et les générateurs de code de bloc avant d'essayer de générer du code pour un espace de travail. Pour chacune des sections, vous pouvez utiliser le bouton de copie pour copier l'intégralité du bloc de code de cette section.
Si vous ne savez toujours pas comment utiliser la sortie du code, vous pouvez consulter l'application exemple, qui propose des exemples de blocs personnalisés et de générateurs de code de bloc.
En-têtes de code
La section "En-têtes de code" affiche le code nécessaire pour charger la bibliothèque Blockly principale et le générateur de langage que vous avez choisi. Il peut également y avoir d'autres configurations à ce niveau. Par exemple, certains champs que vous pouvez inclure dans un bloc proviennent de plug-ins Blockly. Ces plug-ins auront leurs propres instructions d'importation et éventuellement d'autres codes que vous devrez exécuter pour initialiser le champ. Ce code doit être inclus avant l'une des sections suivantes.
Définition des blocs
La définition du bloc vous permet d'indiquer à Blockly la forme de votre bloc, comme les champs et les entrées qu'il contient, sa couleur, etc. Une fois que vous aurez exécuté ce code, Blockly saura comment créer un bloc uniquement en fonction de son type.
Si vous utilisez l'application exemple, vous pouvez inclure ce code dans un fichier situé dans le répertoire blocks/. Si vous disposez de votre propre structure d'application, veillez à inclure ce code avant d'essayer de référencer un bloc par son nom, par exemple dans une définition de la boîte à outils. Quoi qu'il en soit, assurez-vous que les en-têtes de code sont présents dans le fichier où vous incluez ce code.
Bouchon de générateur
Le générateur de code de bloc vous permet de décrire le code à générer pour un bloc. Le bouchon de générateur créé par la fabrique de blocs vous fournit le code de base permettant d'obtenir les valeurs des entrées et des champs de votre bloc. C'est à vous de combiner ces valeurs dans le code final qui sera généré.
Si vous utilisez l'application exemple, vous pouvez inclure ce code dans un fichier situé dans le répertoire generators/. Si vous disposez de votre propre structure d'application, veillez à inclure ce code avant d'essayer de générer du code pour un espace de travail comprenant vos blocs personnalisés. Quoi qu'il en soit, assurez-vous que les en-têtes de code sont présents dans le fichier où vous incluez ce code.
Vidéo de visite
Cette vidéo décrit en détail les étapes de définition d'un bloc. L'UI est obsolète, mais les fonctionnalités de bloc qu'il met en évidence sont encore plus ou moins précises.
Bloquer la bibliothèque
Les blocs sont automatiquement enregistrés dans le stockage local du navigateur chaque fois que vous modifiez le bloc. Vous pouvez créer un bloc ou charger un bloc existant à partir de votre espace de stockage local en cliquant sur les boutons correspondants dans la barre d'outils supérieure.
Importer depuis l'ancienne fabrique de blocs
Si vous avez utilisé l'ancienne fabrique de blocs et que vous souhaitez migrer vos définitions de bloc existantes vers le nouvel outil, procédez comme suit:
Dans l'ancienne fabrique de blocs, cliquez sur le bouton
Export Block Librarydans la barre d'outils. Un fichier contenant toutes vos définitions de bloc est alors téléchargé.
Dans la nouvelle Block Factory, cliquez sur le bouton
Load blockdans la barre d'outils.Sélectionnez l'option "Import from Block Factory" (Importer depuis Block Factory) dans le menu.
Importez le fichier que vous avez téléchargé à l'étape 1.
Vos définitions de bloc devraient être automatiquement converties au nouveau format et seront désormais disponibles dans le menu
Load block. Les blocs peuvent avoir été renommés en cas de conflit avec des blocages existants.Si des erreurs se sont produites lors de l'analyse de l'un de vos blocs, nous ne serons pas en mesure de les charger. Vous pouvez nous aider en signalant un bug sur des échantillons bloc, et en incluant le fichier qui ne serait pas analysé.