Benutzerdefinierte Blockierungen hinzufügen

Obwohl Blockly eine Reihe von Standardblöcken definiert, müssen die meisten Anwendungen mindestens einige domainrelevante Blöcke definieren und implementieren.

Blöcke bestehen aus drei Komponenten:

• Blockdefinitionsobjekt: Definiert das Aussehen und Verhalten eines Blocks, einschließlich Text, Farbe, Felder und Verbindungen.
• Toolbox-Referenz: Eine Referenz zum Blocktyp in der Toolbox-XML, damit Nutzer ihn dem Arbeitsbereich hinzufügen können.
• Generatorfunktion: Erzeugt den Codestring für diesen Block. Sie ist immer in JavaScript geschrieben, auch wenn die Zielsprache nicht JavaScript ist.

Definition blockieren

Blockly für das Web lädt Blocks über Skriptdateien. Das Verzeichnis blocks/ enthält mehrere Beispiele für die Standardblöcke. Falls Ihre Blockierungen nicht in die vorhandenen Kategorien passen, erstellen Sie eine neue JavaScript-Datei. Diese neue JavaScript-Datei muss in die Liste der <script ...>-Tags in der HTML-Datei des Editors aufgenommen werden.

Hinweis: Der Großteil eines Blocks kann mit den Blockly Developer Tools definiert werden, anstatt den Code unten manuell zu erstellen.

Eine typische Blockdefinition sieht so aus:

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: Dies ist der Typname des Blocks. Da alle Blöcke denselben Namespace haben, empfiehlt es sich, einen Namen zu verwenden, der aus Ihrer Kategorie besteht (in diesem Fall string), gefolgt von der Funktion des Blocks (in diesem Fall length).

• init: Diese Funktion definiert das Design des Blocks.

Definiert den folgenden Block:

Die Details zu Blockdefinitionen finden Sie unter Blöcke definieren.

JSON-Array

Mithilfe eines Arrays von JSON-Blockdefinitionen können mehrere Blöcke gleichzeitig definiert werden.

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}"
  }
]);

Toolbox-Referenz hinzufügen

Nach der Definition verwenden Sie den Typnamen, um den Block auf die Toolbox zu verweisen:

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

Weitere Informationen finden Sie im Leitfaden zur Toolbox.

Blockcode-Generator hinzufügen

Um den Block schließlich in Code zu transformieren, kombinieren Sie den Block mit einer Generatorfunktion. Generatoren sind spezifisch für die gewünschte Ausgabesprache, haben jedoch im Allgemeinen das folgende Format:

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];
};

Die Generatorfunktion verwendet zur Verarbeitung einen Verweis auf den Block. Die Eingaben (die VALUE-Eingabe oben) werden in Codestrings gerendert und dann zu einem größeren Ausdruck verkettet.

→ Weitere Informationen zu Blockcode-Generatoren...