Blockstruktur in JavaScript

In diesem Dokument wird beschrieben, wie Sie mit JavaScript die Ein- und Felder (einschließlich Labels) in Ihrem Block definieren. Wenn Sie mit diesen Begriffen nicht vertraut sind, lesen Sie den Abschnitt Aufbau eines Blocks, bevor Sie fortfahren.

Sie können Ihre Eingaben, Felder und Verbindungen auch in JSON definieren.

Eingaben anhängen

Die JavaScript API enthält für jeden Eingabetyp eine append-Methode:

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

Ein Block mit vier Zeilen. Die erste Zeile enthält die Labels „for each“ (für jedes) und „item“ (Element) sowie ein Drop-down-Menü für Variablen mit der Auswahl „x“. Die zweite Zeile hat das Label „in list“ und eine Werteingabe. Die dritte Zeile hat das Label „do“ und eine Anweisungseingabe. Die letzte Zeile hat das Label „end“.

Jede appendInput-Methode kann einen Kennzeichnungsstring annehmen, der von Codegeneratoren verwendet wird, um Code für den mit der Eingabe verbundenen Block abzurufen. Code-Generatoren verweisen selten auf Dummy- und End-of-Row-Eingaben. Daher gibt es in der Regel keinen Grund, ihnen eine Kennung zuzuweisen.

Die JavaScript API enthält auch eine generische appendInput-Methode zum Anhängen von benutzerdefinierten Eingaben. In diesem Fall sollte die Kennung direkt an den Konstruktor Ihrer benutzerdefinierten Eingabe übergeben werden.

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

Bei allen appendInput-Methoden (sowohl generischen als auch nicht generischen) wird das Eingabeobjekt zurückgegeben, sodass sie mithilfe von Method Chaining weiter konfiguriert werden können. Es gibt drei integrierte Methoden zum Konfigurieren von Eingaben.

Felder anfügen

Sobald eine Eingabe erstellt und mit appendInput an einen Block angehängt wurde, können Sie optional beliebig viele Felder an die Eingabe anhängen. Diese Felder werden häufig als Labels verwendet, um zu beschreiben, wofür die einzelnen Eingaben gedacht sind.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

Ein Block mit dem Label

Das einfachste Feld ist ein Label. In Blockly wird grundsätzlich Kleinbuchstabentext verwendet, mit Ausnahme von Eigennamen (z.B. Google, SQL).

Eine Eingabezeile kann eine beliebige Anzahl von Feldern enthalten. Mehrere appendField-Aufrufe können verkettet werden, um derselben Eingabezeile effizient mehrere Felder hinzuzufügen.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

Ein Block mit dem Label „hello“ in Nur-Text und dem Label „Neil“ in Kursivschrift.

Der appendField('hello')-Aufruf ist eigentlich eine Abkürzung für die Verwendung eines expliziten FieldLabel-Konstruktors: appendField(new Blockly.FieldLabel('hello')). Der Konstruktor wird nur verwendet, wenn ein Klassenname angegeben wird, damit das Label mit einer CSS-Regel formatiert werden kann.

Verbindungsprüfungen

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

Die Methode setCheck wird für die Typüberprüfung von Verbindungen verwendet. Wenn das Argument „null“ (Standard) angegeben wird, kann dieser Eingang mit einem beliebigen Block verbunden werden. Weitere Informationen finden Sie unter Verbindungsprüfungen.

Felder ausrichten

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

Mit der Methode setAlign werden Felder in einer Eingabe ausgerichtet. Es gibt drei selbstbeschreibende Werte, die als Argument an diese Funktion übergeben werden können: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT und Blockly.inputs.Align.CENTER.

Wenn ein Block im Rechts-nach-links-Modus gerendert wird (z.B. bei Arabisch und Hebräisch), werden links und rechts vertauscht. Mit Blockly.inputs.Align.RIGHT würden Felder also links ausgerichtet.