Benutzerdefinierte Blockierungen hinzufügen

Blockly definiert zwar eine Reihe von Standardblöcken, die meisten Anwendungen müssen jedoch Mindestens einige domainrelevante Blöcke definieren und implementieren

Blöcke bestehen aus drei Komponenten:

Blockdefinition – Objekt, das das Aussehen und Verhalten eines Blocks definiert, einschließlich Text, Farbe, Feldern und Verbindungen.
Toolbox-Referenz: Eine Referenz zum Blocktyp in der Toolbox-XML, sodass Nutzer zum Arbeitsbereich hinzufügen.
Generatorfunktion: Erzeugt den Codestring für diesen Block. Es ist immer die in JavaScript geschrieben sind, auch wenn die Zielsprache nicht JavaScript ist.

Blockdefinition

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

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 Namensraum haben, sollten Sie einen Namen verwenden, der aus Ihrer Kategorie (in diesem Fall string) gefolgt von der Funktion des Blocks (in diesem Fall length) besteht.
init: Mit dieser Funktion wird das Design des Blocks festgelegt.

Damit wird der folgende Block definiert:

Einen Block vom Typ „string_length“.

Details zu Blockdefinitionen finden Sie unter Blöcke definieren.

JSON-Array

Mithilfe eines JSON-Blockarrays können mehrere Blöcke gleichzeitig definiert werden. Definitionen.

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

Verwenden Sie nach der Definition den Namen des Typs, 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 Toolbox-Leitfaden.

Block-Code-Generator hinzufügen

Um den Block in Code umzuwandeln, verknüpfen Sie ihn abschließend mit einer Generatorfunktion. Generatoren sind spezifisch für die gewünschte Ausgabesprache, aber Standardgeneratoren haben in der Regel 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. Er rendert die Eingaben (die VALUE-Eingabe oben) in Codestrings und fügt sie dann zu einem größeren Ausdruck zusammen.

→ Weitere Informationen zu Block-Code-Generatoren