Ajouter des blocs personnalisés

Alors que Blockly définit un certain nombre de blocs standards, la plupart des applications doivent définissez et implémentez au moins quelques blocs adaptés au domaine.

Les blocs sont composés de trois composants:

• 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.
• Référence de la boîte à outils: référence au type de bloc dans le fichier XML de la boîte à outils, afin que les utilisateurs vous pouvez l'ajouter à l'espace de travail.
• Fonction génératrice : génère la chaîne de code de ce bloc. Il est toujours écrit en JavaScript, même si le langage cible n'est pas JavaScript.

Définition du bloc

Blockly pour le Web charge des blocs via des fichiers de script. Le répertoire blocks/ inclut plusieurs exemples de ce type pour les blocs standards. En supposant que vos blocs ne correspondent pas aux catégories existantes, créez un nouveau fichier JavaScript. Cette nouvelle Le fichier JavaScript doit être inclus dans la liste des balises <script ...> du tag le fichier HTML de l'éditeur.

Remarque :La majeure partie d'un bloc peut être définie à l'aide de la classe Outils pour les développeurs Blockly au lieu de en créant manuellement le code ci-dessous.

Une définition de bloc typique 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 du bloc. Puisque tous les blocs partagent dans le même espace de noms, nous vous conseillons d'utiliser un nom composé de votre catégorie (dans ici string), suivie de la fonction de votre bloc (ici, length).

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

Cela définit le bloc suivant:

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

Tableau JSON

Vous pouvez définir plusieurs blocs à la fois en utilisant un tableau de blocs JSON et définitions.

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 défini, utilisez le nom de type pour faire référence au bloc 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 de la 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 se présentent généralement sous la forme suivante :

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 à traiter. Il convertit les entrées (l'entrée VALUE ci-dessus) en chaînes de code, puis les concatène en une expression plus grande.

→ En savoir plus sur les générateurs de code de bloc