Benutzerdefinierte Blöcke – Übersicht

Blockly bietet eine große Anzahl vordefinierter Blöcke, von mathematischen Funktionen bis hin zu Schleifenstrukturen. Bei den meisten Anwendungen müssen jedoch benutzerdefinierte Blöcke für die Domain definiert und implementiert werden. Eine Zeichenanwendung benötigt beispielsweise Blöcke zum Zeichnen von Linien und Kreisen und eine Roboteranwendung benötigt Blöcke zum Bewegen eines Arms und zum Bedienen einer Klaue.

Um einen neuen Blocktyp zu definieren und zu verwenden, benötigen Sie drei Dinge:

  • Blockdefinition: Hiermit wird das Erscheinungsbild eines Blocktyps sowie bestimmte Verhaltensweisen definiert.
  • Block-Codegenerator: Er 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, Verbindungen und seine Farbe. Außerdem kann blockspezifisches Verhalten definiert werden, z. B. ein blockspezifischer Event-Handler. 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"
}]);

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?

Block-Code-Generatoren

Um einen Block in Code umzuwandeln, benötigen Sie separate Generatorfunktionen für jede Sprache, die Sie generieren möchten. Hier ist beispielsweise ein 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 generiert Code für alle Blöcke, die an Eingaben angehängt sind (z. B. die VALUE-Eingabe im Beispiel), und alle Felder und fügt die resultierenden Strings dann zu einem größeren Ausdruck zusammen.

Weitere Informationen finden Sie unter Block-Codegeneratoren.

Toolbox-Referenz

Nachdem Sie den Blocktyp definiert haben, verwenden Sie den Typnamen, um in einer Toolbox darauf zu 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.