Présentation des blocs personnalisés

Blockly est fourni avec un grand nombre de blocs prédéfinis, allant des fonctions mathématiques aux structures de boucles. Cependant, la plupart des applications doivent définir et implémenter des blocs personnalisés pour leur domaine. Par exemple, une application de dessin peut avoir besoin de blocs pour dessiner des lignes et des cercles, et une application de robotique peut avoir besoin de blocs pour déplacer un bras et manipuler une pince.

Pour définir et utiliser un nouveau type de bloc, vous avez besoin de trois éléments :

  • Définition de bloc : définit l'apparence d'un type de bloc ainsi que certains comportements.
  • Générateur de code par blocs : génère la chaîne de code pour les blocs de ce type. Il est toujours écrit en JavaScript, même si la langue cible n'est pas JavaScript.
  • Référence à la boîte à outils : référence au type de bloc dans la boîte à outils, afin que les utilisateurs puissent l'ajouter à l'espace de travail.

Définition du bloc

Une définition de bloc définit l'apparence d'un bloc, comme son texte, ses champs, ses connexions et sa couleur. Il peut également définir un comportement spécifique à un bloc, tel qu'un gestionnaire d'événements spécifique à un bloc. 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"
}]);

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');
   }
};

Pour en savoir plus sur les définitions de blocs et leur fonctionnement, consultez Qu'est-ce qu'une définition de bloc ?.

Générateurs de code par blocs

Pour transformer un bloc en code, vous avez besoin de fonctions de générateur distinctes pour chaque langage que vous souhaitez générer. Par exemple, voici un générateur qui génère du code JavaScript :

javascriptGenerator.forBlock['string_length'] = function(block, generator) {
   // String or array length.
   var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
   return [argument0 + '.length', Order.MEMBER];
};

La fonction de générateur accepte le bloc en cours de traitement et un générateur de langage. Il génère du code pour tous les blocs associés aux entrées (comme l'entrée VALUE dans l'exemple) et tous les champs, puis concatène les chaînes résultantes dans une expression plus grande.

Pour en savoir plus, consultez Générateurs de code par blocs.

Documentation de référence sur la boîte à outils

Une fois que vous avez défini votre type de bloc, utilisez le nom du type pour le référencer dans une boîte à outils :

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

Pour en savoir plus, consultez Définir une boîte à outils avec menu déroulant ou Définir une boîte à outils avec catégories.