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 :

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 blocage

Une définition de bloc est un mixin contenant des propriétés de 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 invoquer un comportement personnalisé.

Étant donné que les fonctions de définition sont intégré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. La plus courante de ces fonctions est init, que Blockly appelle pour initialiser un bloc et qui est utilisée pour 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 une interface pour les définitions de blocs à implémenter. 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 plutôt ê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 blocs

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

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