Was ist eine Blockdefinition?

Eine Blockdefinition ist ein Objekt, das einen benutzerdefinierten Block definiert. So werden beispielsweise das Erscheinungsbild des Blocks (Text, Felder, Verbindungen, Farbe usw.) sowie sein Verhalten (Ereignishandler auf Blockebene usw.) definiert.

Beispiel:

Einen Block vom Typ „string_length“.

kann in JSON oder JavaScript so definiert werden:

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

defineBlocksWithJsonArray erstellt eine Blockdefinition aus einem JSON-Objekt.

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');
   }
};

Wenn Sie JavaScript verwenden, erstellen Sie die Blockdefinition direkt.

Funktionsweise von Blockdefinitionen

Eine Blockdefinition ist ein Mixin mit funktionswertigen Eigenschaften. Wenn ein neuer Block instanziiert wird, werden diese Eigenschaften in das neu erstellte Blockobjekt kopiert. Blockly ruft diese Funktionen auf, um benutzerdefiniertes Verhalten auszulösen.

Da die Definitionen in das Blockobjekt eingefügt werden:

  • Das Schlüsselwort this in Definitionsfunktionen bezieht sich auf das Blockobjekt. Das heißt, es kann verwendet werden, um auf die öffentlichen Methoden und Eigenschaften der Klasse Block (oder BlockSvg) zuzugreifen.

In Blockly gibt es eine kleine Anzahl von Funktionen, mit denen Sie Blöcke anpassen können. Am häufigsten wird init verwendet, das Blockly zum Initialisieren eines Blocks aufruft und zum Definieren des Erscheinungsbildes des Blocks verwendet. Eine vollständige Liste finden Sie in den Klassen Block und BlockSvg. Diese Properties bilden eine Schnittstelle für die Implementierung von Blockdefinitionen. Sie sind alle optional.

Blockdefinitionen können auch benutzerdefinierte Funktionen haben, die in Blockly jedoch nicht direkt aufgerufen werden. Stattdessen können sie zur Implementierung anderer Funktionen verwendet werden. So kann ein Ereignishandler auf Blockebene (die Eigenschaft Block.onchange) beispielsweise verschiedene Ereignisse an verschiedene benutzerdefinierte Funktionen delegieren.

Blockdefinitionen erstellen

Es gibt mehrere Möglichkeiten, Blockdefinitionen zu erstellen:

  • Mit den Blockly-Entwicklertools können Sie das Design Ihres Blocks festlegen. Kopieren Sie den generierten JSON- oder JavaScript-Code in Ihren Code und fügen Sie bei Bedarf benutzerdefinierten Code hinzu. Weitere Informationen finden Sie unter Blockly-Entwicklertools.
  • Suchen Sie nach einem ähnlichen Block, kopieren Sie die Definition und ändern Sie sie nach Bedarf. Weitere Informationen finden Sie unter Vorhandene Definitionen ändern.
  • Schreiben Sie eine Blockdefinition von Hand. Weitere Informationen finden Sie unter JSON und JavaScript.