Ajouter des blocs personnalisés

Bien que Blockly définisse un certain nombre de blocs standards, la plupart des applications doivent définir et implémenter au moins quelques blocs pertinents pour le domaine.

Les blocs se composent de trois éléments:

• Objet de définition de bloc: définit l'apparence et le comportement d'un bloc, y compris le texte, la couleur, les champs et les connexions.
• Documentation de référence sur la boîte à outils: référence au type de bloc dans le code XML de la boîte à outils, afin que les utilisateurs puissent l'ajouter à l'espace de travail.
• Fonction du générateur: génère la chaîne de code pour ce bloc. Il est toujours écrit en JavaScript, même si le langage cible n'est pas JavaScript.

Définition du bloc

Blockly pour les chargements Web Blocs à l'aide de fichiers de script. Le répertoire blocks/ inclut plusieurs exemples de ce type pour les blocs standards. En supposant que vos blocs n'appartiennent pas aux catégories existantes, créez un nouveau fichier JavaScript. Ce nouveau fichier JavaScript doit être inclus dans la liste des balises <script ...> du fichier HTML de l'éditeur.

Remarque :La majeure partie d'un bloc peut être définie à l'aide des outils pour les développeurs Blockly, au lieu de créer manuellement le code ci-dessous.

Une définition de bloc type se présente comme suit:

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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');
  }
};

• string_length: nom du type de bloc. Étant donné que tous les blocs partagent le même espace de noms, il est recommandé d'utiliser un nom composé de votre catégorie (dans ce cas string) suivi de la fonction de votre bloc (dans ce cas, length).

• init: cette fonction définit l'apparence du bloc.

Ce champ définit le bloc suivant:

Pour en savoir plus sur les définitions de bloc, consultez Définir des blocs.

Tableau JSON

Vous pouvez définir plusieurs blocs à la fois à l'aide d'un tableau de définitions de bloc JSON.

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

Ajouter une référence à la boîte à outils

Une fois le bloc défini, utilisez le nom du type pour le référencer dans la boîte à outils:

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

Pour en savoir plus, consultez le guide Boîte à outils.

Ajouter un générateur de code de bloc

Enfin, pour transformer le bloc en code, associez-le à une fonction de générateur. Les générateurs sont spécifiques à la langue de sortie souhaitée, mais les générateurs standards prennent généralement le format suivant:

javascriptGenerator.forBlock['text_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 utilise une référence au bloc pour le traitement. Elle restitue les entrées (l'entrée VALUE ci-dessus) dans des chaînes de code, puis les concatène dans une expression plus grande.

→ Plus d'informations sur les générateurs de code de bloc