Présentation des blocs personnalisés

Blockly est fourni avec un grand nombre de blocs prédéfinis, des fonctions mathématiques aux structures de boucle. Toutefois, 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 de bloc: 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 le JavaScript.
• Référence de 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 au bloc, tel qu'un gestionnaire d'événements spécifique au bloc. Par exemple, ce bloc:

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 bloc et leur fonctionnement, consultez Qu'est-ce qu'une définition de bloc ?.

Générateurs de code de bloc

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 (telles que 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 la section Générateurs de code de bloc.

Documentation de référence de 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 à développer ou Définir une boîte à outils de catégorie.