Blocs personnalisés: Paradigmes de blocs

Vous avez le choix entre plusieurs paradigmes lorsque vous concevez une application utilisant Blockly. Vous devez prendre en compte ces choix le plus tôt possible, car ils affectent les blocages 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 sur l'espace de travail. L'onglet "Block Factory" des outils pour les développeurs Blockly en est un bon exemple:

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 impossible à supprimer et 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 ce faire, utilisez une seule ligne:

workspace.addChangeListener(Blockly.Events.disableOrphans);

Programme Serial

La majorité des applications Blockly sont conçues pour créer des programmes en série. Les utilisateurs empilent les blocs qui s'exécutent dans l'ordre.

Chaque bloc (non désactivé) de l'espace de travail fera partie du programme. S'il existe plusieurs piles de blocs, les blocs les plus élevés sont exécutés en premier. (Si deux piles ont à peu près la même hauteur, celles qui se trouvent à gauche (à droite en mode d'affichage de droite à gauche) sont prioritaires.)

L'espace de travail peut être exporté vers du code exécutable à tout moment. Ce code peut être exécuté côté client en JavaScript (à l'aide d'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 qu'en série. Prenons l'exemple d'une application musicale dans laquelle une boucle de batterie s'exécute simultanément avec une mélodie.

Une façon de mettre en œuvre l'exécution parallèle consiste à générer le code de 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 le langage cible est JavaScript, le tableau allCode peut ensuite être utilisé pour créer plusieurs interpréteurs JS pour une exécution simultanée. Si le langage cible est semblable à Python, le tableau allCode peut être assemblé dans un seul programme utilisant un module de thread.

Comme pour tout programme parallèle, des décisions éclairées doivent être prises concernant les ressources partagées telles que les variables et les fonctions.

Programme basé sur les é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 contenir la pile de blocs à exécuter ou il peut s'agir d'en-têtes posés sur une pile de blocs.

Certains développeurs aiment ajouter un "chapeau" en haut des blocs d'événements afin qu'ils se distinguent des autres blocs. Il ne s'agit pas de l'apparence par défaut de Blockly, mais vous pouvez l'ajouter 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 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, cliquez ici.

Dans un modèle basé sur des événements, il peut également être judicieux de créer un gestionnaire pour le démarrage du programme. Selon 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.

Lors de la conception d'un système qui utilise des événements, déterminez s'il est possible ou souhaitable d'accepter plusieurs instances du même gestionnaire d'événements.