Benutzerdefinierte Blöcke – Übersicht

Blockly bietet eine große Anzahl vordefinierter Blöcke, von mathematischen Funktionen bis hin zu Schleifenstrukturen. Die meisten Anwendungen müssen jedoch benutzerdefinierte Blöcke für ihre Domain definieren und implementieren. Eine Zeichenanwendung benötigt beispielsweise Blöcke zum Zeichnen von Linien und Kreisen, während eine Roboteranwendung Blöcke zum Bewegen eines Arms und zum Bedienen einer Klaue benötigt.

Wenn Sie einen neuen Blocktyp definieren und verwenden möchten, benötigen Sie drei Dinge:

  • Blockdefinition: Definiert das Erscheinungsbild eines Blocktyps sowie bestimmte Verhaltensweisen.
  • Block-Codegenerator: Generiert den Codestring für Blöcke dieses Typs. Sie wird immer in JavaScript geschrieben, auch wenn die Zielsprache nicht JavaScript ist.
  • Toolbox-Referenz: Eine Referenz auf den Blocktyp in der Toolbox, damit Nutzer ihn dem Arbeitsbereich hinzufügen können.

Block definition

Eine Blockdefinition definiert das Erscheinungsbild eines Blocks, z. B. seinen Text, seine Felder, seine Verbindungen und seine Farbe. Außerdem kann blockspezifisches Verhalten definiert werden, z. B. ein blockspezifischer Event-Handler. Beispiel:

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

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

Weitere Informationen zu Blockdefinitionen und ihrer Funktionsweise finden Sie unter Was ist eine Blockdefinition?.

Blockcode-Generatoren

Um einen Block in Code zu transformieren, benötigen Sie separate Generatorfunktionen für jede Sprache, die Sie generieren möchten. Hier sehen Sie ein Beispiel für einen Generator, der JavaScript generiert:

javascriptGenerator.forBlock['string_length'] = function(block, generator) {
   // String or array length.
   var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
   return [argument0 + '.length', Order.MEMBER];
};

Die Generatorfunktion akzeptiert den zu verarbeitenden Block und einen Sprachgenerator. Es wird Code für alle Blöcke generiert, die an Eingaben angehängt sind (z. B. die VALUE-Eingabe im Beispiel) und für alle Felder. Anschließend werden die resultierenden Strings zu einem größeren Ausdruck verkettet.

Weitere Informationen finden Sie unter Blockcodegeneratoren.

Toolbox-Referenz

Nachdem Sie den Blocktyp definiert haben, können Sie mit dem Typnamen in einer Toolbox darauf verweisen:

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

Weitere Informationen finden Sie unter Flyout-Toolbox definieren oder Kategorie-Toolbox definieren.