Qu'est-ce qu'une définition de bloc ?

Une définition de bloc est un objet qui définit un bloc personnalisé. Par exemple, il définit l'apparence du bloc (texte, champs, connexions, couleur, etc.), ainsi que son comportement (gestionnaire d'événements au niveau du bloc, etc.).

Par exemple, ce bloc:

Un bloc "string_length".

peut être défini en JSON ou en JavaScript comme suit:

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

defineBlocksWithJsonArray crée une définition de bloc à partir d'un objet JSON.

JavaScript

Blockly.Blocks['string_length'] = {
   init: function() {
     this.appendValueInput('VALUE')
         .setCheck('String')
         .appendField('length of');
     this.setOutput(true, 'Number');
     this.setColour(160);
     this.setTooltip('Returns number of letters in the provided text.');
     this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
   }
};

Lorsque vous utilisez JavaScript, vous créez directement la définition du bloc.

Fonctionnement des définitions de bloc

Une définition de bloc est un mixin contenant des propriétés à valeur de fonction. Lorsqu'un nouveau bloc est instancié, ces propriétés sont copiées dans l'objet de bloc nouvellement créé. Blockly appelle ces fonctions pour appeler un comportement personnalisé.

Étant donné que les fonctions de définition sont mélangées à l'objet de bloc:

  • Le mot clé this dans les fonctions de définition fait référence à l'objet de bloc. Autrement dit, il peut être utilisé pour accéder aux méthodes et propriétés publiques de la classe Block (ou BlockSvg).

Blockly définit un petit nombre de fonctions que vous pouvez utiliser pour personnaliser les blocs. Le plus courant est init, que Blockly appelle pour initialiser un bloc et qui permet de définir l'apparence du bloc. Pour obtenir la liste complète, consultez les propriétés à valeur de fonction dans les classes Block et BlockSvg. Ces propriétés forment en fait une interface à implémenter pour les définitions de blocs. Elles sont toutes facultatives.

Les définitions de blocs peuvent également comporter des fonctions personnalisées, bien que Blockly ne les appelle pas directement. Ils peuvent être utilisés pour implémenter d'autres fonctions. Par exemple, un gestionnaire d'événements au niveau du bloc (propriété Block.onchange) peut déléguer différents événements à différentes fonctions personnalisées.

Créer des définitions de bloc

Il existe plusieurs façons de créer des définitions de bloc:

  • Utilisez les outils pour les développeurs Blockly pour définir l'apparence de votre bloc. Copiez le code JSON ou JavaScript généré dans votre code, puis ajoutez du code personnalisé si nécessaire. Pour en savoir plus, consultez les outils de développement Blockly.
  • Recherchez un bloc similaire, copiez sa définition et modifiez-la si nécessaire. Pour en savoir plus, consultez Modifier les définitions existantes.
  • Rédigez une définition de bloc à la main. Pour en savoir plus, consultez JSON et JavaScript.