Vous pouvez choisir parmi plusieurs paradigmes lorsque vous concevez une application qui utilise Blockly. Ces choix doivent être pris en compte dès le début, car ils affectent les blocs dont l'utilisateur aura besoin.
Configuration
De nombreuses applications Blockly sont utilisées pour décrire des configurations plutôt que des programmes exécutables. Les applications de configuration commencent généralement par initialiser un bloc de niveau racine dans l'espace de travail. Un bon exemple est l'onglet "Block Factory" des outils pour les développeurs Blockly :
Blockly.Blocks['factory_base'] = {
init: function() {
this.setDeletable(false);
this.setMovable(false);
this.setEditable(false);
// etc...
}
}
Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);
Cela crée un bloc non supprimable et non déplaçable qui contient toute la configuration de l'utilisateur. L'espace de travail peut être sérialisé à tout moment pour déterminer la configuration actuelle.
Ces applications peuvent désactiver automatiquement tout bloc non connecté au bloc racine. Pour cela, il suffit d'une ligne :
workspace.addChangeListener(Blockly.Events.disableOrphans);
Programme série
La majorité des applications Blockly sont conçues pour créer des programmes séquentiels. Les utilisateurs empilent des blocs qui sont exécutés dans l'ordre.
Chaque bloc (non désactivé) de l'espace de travail fera partie du programme. S'il existe plusieurs piles de blocs, celles qui sont plus hautes sont exécutées en premier. (Si deux piles ont à peu près la même hauteur, la priorité est donnée à celles de gauche (ou de droite en mode RTL).)
L'espace de travail peut être exporté vers un code exécutable à tout moment. Ce code peut être exécuté côté client en JavaScript (à l'aide de eval ou de l'interpréteur JS) ou côté serveur dans n'importe quel langage.
import {javascriptGenerator} from 'blockly/javascript';
var code = javascriptGenerator.workspaceToCode(workspace);
Programme parallèle
Certaines applications Blockly choisissent d'exécuter toutes les piles de blocs en parallèle, plutôt que de manière séquentielle. Par exemple, une application musicale dans laquelle une boucle de batterie s'exécute en même temps qu'une mélodie.
L'une des méthodes d'implémentation de l'exécution parallèle consiste à générer le code pour chaque bloc individuellement :
import {javascriptGenerator} from 'blockly/javascript';
var json = Blockly.serialization.workspaces.save(workspace);
// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice(); // Create shallow copy.
blocks.length = 0;
// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
var block = topBlocks[i];
blocks.push(block);
Blockly.serialization.workspaces.load(json, headless);
allCode.push(javascriptGenerator.workspaceToCode(headless));
blocks.length = 0;
}
Si la langue cible est JavaScript, le tableau allCode peut ensuite être utilisé pour créer plusieurs interprètes JS pour une exécution simultanée. Si le langage cible est Python, par exemple, le tableau allCode peut être assemblé en un seul programme qui utilise un module de threading.
Comme pour tout programme parallèle, des décisions doivent être prises avec soin concernant les ressources partagées telles que les variables et les fonctions.
Programme basé sur des événements
Les gestionnaires d'événements ne sont que des fonctions appelées par le système, plutôt que par le programme. Ces blocs peuvent soit encadrer la pile de blocs à exécuter, soit être des en-têtes placés au-dessus d'une pile de blocs.
Certains développeurs aiment ajouter un "chapeau" en haut des blocs d'événements pour qu'ils se distinguent des autres blocs. Ce n'est pas l'apparence par défaut de Blockly, mais elle peut être ajoutée en remplaçant la constante du moteur de rendu ADD_START_HATS par true (Atelier de programmation sur les moteurs de rendu personnalisés : remplacer les constantes) ou en ajoutant un thème et en définissant l'option de chapeau sur le style de bloc. Pour en savoir plus sur la définition de chapeaux sur des blocs dans le cadre de thèmes, consultez Style de bloc dans la documentation sur les thèmes.
Dans un modèle événementiel, il peut être judicieux de créer également un gestionnaire pour le démarrage du programme. Dans ce modèle, tout bloc de l'espace de travail non connecté à un gestionnaire d'événements serait ignoré et ne s'exécuterait pas.
Lorsque vous concevez un système qui utilise des événements, déterminez s'il est possible ou souhaitable de prendre en charge plusieurs instances du même gestionnaire d'événements.
Mise en page de l'espace de travail
Il existe deux façons raisonnables de mettre en page un écran de gauche à droite. L'une d'elles commence par la barre d'outils à gauche, l'espace de travail au milieu et la visualisation des résultats à droite. Cette mise en page est utilisée par la version 1 de Scratch, ainsi que par Made with Code.
L'autre méthode commence par la visualisation de la sortie à gauche, la barre d'outils au milieu et l'espace de travail à droite. Cette mise en page est utilisée par la version 2 de Scratch, ainsi que par la plupart des applications Blockly.
Dans les deux cas, l'espace de travail doit s'étendre pour occuper la taille d'écran disponible. Les utilisateurs ont besoin d'autant d'espace que possible pour programmer. Comme vous pouvez le voir dans les captures d'écran ci-dessus, la première mise en page est peu performante sur les écrans larges, car le code de l'utilisateur et la visualisation de la sortie sont séparés. Le deuxième permet de laisser plus d'espace pour les programmes plus longs, tout en gardant les trois sections proches les unes des autres.
Il est également logique que les utilisateurs commencent par réfléchir au problème qu'ils tentent de résoudre, puis qu'ils examinent les outils fournis et qu'ils commencent seulement ensuite à programmer.
Bien sûr, l'ordre de toute la commande doit être inversé pour les traductions en arabe et en hébreu.
Dans certains cas, par exemple lorsque vous utilisez un petit nombre de blocs simples, il peut être judicieux de placer la boîte à outils au-dessus ou en dessous de l'espace de travail. Blockly est compatible avec le défilement horizontal dans la boîte à outils pour ces cas, mais il doit être utilisé avec précaution.
Recommandation : placez la visualisation du programme à côté de la barre d'outils.