Blockierungen definieren

Blockdefinitionen beschreiben das Aussehen und die Funktionsweise eines Blocks, einschließlich Text, Farbe, Form und die anderen Blöcke, mit denen es verbunden werden kann.

JSON-Format im Vergleich zur JavaScript API

Blockly bietet zwei Möglichkeiten zum Definieren von Blöcken: JSON-Objekte und JavaScript-Funktionen. Das JSON-Format vereinfacht die Lokalisierung Prozess bei der Entwicklung für Sprachen mit unterschiedlicher Wortreihenfolge. Das JSON-Format ist das bevorzugte Format. Definieren von Blöcken.

Mit dem JSON-Format können jedoch erweiterte Funktionen wie als Mutatoren oder Validatoren. Diese müssen in JavaScript geschrieben sein, in der Regel Erweiterungen

Apps, die die ursprüngliche JavaScript-Implementierung von Blockly verwenden, können auch Blockly-API-Funktionsaufrufe, die unten aufgeführt sind, in den verschiedenen JavaScript-Beispielen weiter unten.

JSON

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

Mit der Funktion init wird die Form des Blocks erstellt. Im Kontext dieses Funktion ist das Schlüsselwort this der eigentliche Block, der erstellt wird.

Beide Beispiele laden dieselbe „string_length“. blockieren.

Im Web wird das JSON-Format mit der Funktion initJson geladen. Dies ermöglicht auch das Mischen der beiden Formate auf Blockly-Webseiten. Es ist Definieren Sie Ihren Block nach Möglichkeit nach Möglichkeit mit JSON und verwenden Sie JavaScript nur für Teile von Blockdefinitionen, die von JSON nicht unterstützt werden.

Unten sehen Sie ein Beispiel für einen Block, der hauptsächlich mit JSON definiert wurde. wird jedoch mit der JavaScript API erweitert, um eine dynamische Kurzinfo anzuzeigen.

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

Blockfarbe

Die Primärfarbe eines Blocks wird durch das JSON-Attribut colour definiert, den block.setColour(..) verwenden, oder indem Sie Themen verwenden und einen Stil.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Weitere Informationen finden Sie in der Farbübersicht für Blöcke. .

Anweisungsverbindungen

Nutzer können Sequenzen von Blöcken erstellen, indem sie nextStatement und previousStatement Connectors. Im Standardlayout von Blockly werden diese Verbindungen befinden sich oben und unten, wobei die Blöcke vertikal gestapelt sind.

Ein Block mit einem vorherigen Anschluss darf kein Ausgabe-Connector und umgekehrt. Den Begriff Anweisungsblock bezieht sich auf einen Block ohne Wertausgabe. Ein Anweisungsblock hat normalerweise sowohl eine vorherige als auch eine nächste Verbindung.

nextStatement- und previousStatement-Verbindungen können getippt, aber diese Funktion wird nicht von Standardblöcken genutzt.

Nächste Verbindung

Erstellt einen Punkt am Ende des Blocks, damit andere Anweisungen darunter gestapelt. Ein Block mit einer nächsten Verbindung, aber ohne vorherige Verbindung stellt normalerweise ein Ereignis dar und kann so konfiguriert werden, dass es mit einen Hut.

JSON

Nicht eingegeben:

{
  ...,
  "nextStatement": null,
}

Eingegeben (selten):

{
  "nextStatement": "Action",
  ...
}

JavaScript

Nicht eingegeben:

this.setNextStatement(true);  // false implies no next connector, the default

Eingegeben (selten):

this.setNextStatement(true, 'Action');

Vorherige Verbindung

Erstellt eine Kerbe am oberen Rand des Blocks, damit er als Stapel verbunden werden kann Aussagen.

Blöcke mit einer vorherigen Verbindung können keine Ausgabeverbindung haben.

JSON

Nicht eingegeben:

{
  ...,
  "previousStatement": null,
}

Eingegeben (selten):

{
  "previousStatement": "Action",
  ...
}

JavaScript

Nicht eingegeben:

this.setPreviousStatement(true);  // false implies no previous connector, the default

Eingegeben (selten):

this.setPreviousStatement(true, 'Action');

Blockausgabe

Ein Block kann einen einzigen Ausgang haben, der als männlicher Puzzleanschluss auf der eine Vorreiterrolle ein. Ausgaben werden mit Werteingaben verbunden. Blöcke mit einer Ausgabe sind normalerweise als Wertblöcke bezeichnet.

JSON

Nicht eingegeben:

{
  // ...,
  "output": null,
}

Eingegeben:

{
  // ...,
  "output": "Number",
}

JavaScript

Nicht eingegeben:

init: function() {
  // ...
  this.setOutput(true);
}

Eingegeben:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

Blöcke mit einem Ausgabe-Connector dürfen nicht gleichzeitig eine vorherige Anweisungskerbe haben.

Eingänge blockieren

Ein Block hat einen oder mehrere Eingaben, wobei jede Eingabe eine Folge von fields und können in einer Verbindung enden. Es gibt mehrere Arten von integrierten Eingaben.

  • Werteingabe: Stellt eine Verbindung zu einer Ausgabeverbindung eines Wertblock. Ein math_arithmetic-Block (Addition, Subtraktion) ist ein Beispiel für einen Block mit zwei Werteingaben.
  • Anweisungseingabe: Stellt eine Verbindung zu einem Vorherige Verbindung eines Anweisungsblocks. Die Der verschachtelte Abschnitt einer while-Schleife ist ein Beispiel für eine Anweisungseingabe.
  • Dummy-Eingabe: Hat keine Blockverbindung. Wirkt wie ein Zeilenumbruch, wenn ist der Block für die Verwendung externer Werte konfiguriert.
  • Eingabe für Ende der Zeile: Hat keine blockorientierte Verbindung und agiert immer wie eine newline (Zeilenumbruch).

Sie können auch eine benutzerdefinierte Eingabe erstellen, um benutzerdefinierte rendering.

Das JSON-Format und die JavaScript API verwenden etwas unterschiedliche Modelle zur Beschreibung ihre Eingaben.

Eingaben und Felder in JSON

Definierte JSON-Blöcke sind als Folge von interpolierten Nachrichtenstrings ( message0, message1, ...), wobei jedes Interpolationstoken (%1, %2 usw.) ist ein Feld oder ein Eingabeende, also an der Stelle, an der der in der Nachricht) im entsprechenden JSON-argsN-Array zurückgegeben. Dieses Format ist die Internationalisierung erleichtern.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Die Interpolationstokens müssen vollständig mit dem args0-Array übereinstimmen: keine Duplikate, ganz ohne Auslassungen. Tokens können in beliebiger Reihenfolge vorhanden sein, sodass unterschiedliche Sprachen ändern, um das Layout des Blocks zu ändern.

Text auf beiden Seiten eines Interpolationstokens wird durch Leerzeichen gekürzt. Text mit dem Zeichen % (z.B. wenn es sich um einen Prozentsatz handelt) sollte Folgendes enthalten: %% fest, damit es nicht als Interpolationstoken interpretiert wird.

Die Reihenfolge der Argumente und die Argumenttypen definieren die Form der blockieren. Durch das Ändern einer dieser Zeichenfolgen kann das Layout des Blocks komplett geändert werden. Dies ist besonders bei Sprachen mit unterschiedlicher Wortreihenfolge wichtig. als Englisch. Stellen Sie sich eine hypothetische Sprache vor, bei der "set %1 to %2" (wie verwendet) im obigen Beispiel) muss in "put %2 in %1" umgekehrt werden. Wird geändert und den Rest des JSON-Formats nicht geändert) zu folgendem Block führt:

Blockly änderte automatisch die Reihenfolge der Felder, erstellte eine Dummy-Eingabe, und von externen zu internen Eingängen gewechselt haben.

Blockly ersetzt außerdem automatisch jeden Zeilenumbruch (\n) in der Nachricht String mit einer Eingabe für das Ende der Zeile.

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Args

Jeder Nachrichtenstring ist mit einem args-Array derselben Zahl gekoppelt. Für Beispiel: message0 wird mit args0 kombiniert. Die Interpolationstokens (%1, %2, ...) beziehen sich auf die Elemente des args-Arrays. Jedes Objekt hat ein type-String. Die übrigen Parameter variieren je nach Typ:

Sie können auch eigene benutzerdefinierte Felder definieren und benutzerdefinierte Eingaben und übergeben sie als Argumente.

Jedes Objekt kann auch ein alt-Feld haben. Für den Fall, dass Blockly den type des Objekts erkennt, wird stattdessen das alt-Objekt verwendet. Für Wird beispielsweise ein neues Feld mit dem Namen field_time zu Blockly hinzugefügt, blockiert die Verwendung von Für dieses Feld könnte alt verwendet werden, um ein field_input-Fallback für ältere Versionen zu definieren von Blockly:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

Ein alt-Objekt kann ein eigenes alt-Objekt haben, sodass Verkettungen möglich sind. Wenn Blockly kein Objekt im args0-Array erstellen kann (nach wenn versucht wird, alt-Objekte zu verwenden, wird dieses Objekt einfach übersprungen.

Eine Dummy-Eingabe wird automatisch am Ende des Blocks hinzugefügt, wenn das message-String endet mit Text oder Feldern, die nicht in einer Eingabe enthalten sind. Wenn also die letzte Eingabe in einem Block eine Dummy-Eingabe ist, kann sie ausgelassen werden. das Array args und muss nicht in message interpoliert werden. Die automatisches Hinzufügen einer Tailing-Dummy-Eingabe ermöglicht den Übersetzern, message, ohne den Rest des JSON-Formats ändern zu müssen. Ein Beispiel: "set %1 to %2" (keine Dummy-Eingabe) und "put %2 in %1" (Dummy-Eingabe hinzugefügt) weiter oben auf dieser Seite.

implicitAlign0

In seltenen Fällen muss die automatisch erstellte, nachgestellte Dummy-Eingabe ausgerichtet werden zu "RIGHT" oder "CENTRE". Wenn keine Angabe erfolgt, wird der Standardwert "LEFT" verwendet.

Im Beispiel unten ist message0 "send email to %1 subject %2 secure %3" und Blockly fügt automatisch eine Dummy-Eingabe für die dritte Zeile hinzu. Einstellung Durch implicitAlign0 bis "RIGHT" wird diese Zeile rechtsbündig ausgerichtet. Dieses Die Ausrichtung gilt für alle Eingaben, die nicht explizit im JSON-Format definiert sind. Blockdefinition, einschließlich Eingaben am Ende der Zeile, die Zeilenumbruchzeichen ersetzen ('\n') in der Nachricht. Außerdem gibt es die eingestellte Eigenschaft lastDummyAlign0 mit demselben Verhalten wie implicitAlign0.

Beim Entwerfen von Blöcken für RTL (Arabisch und Hebräisch) werden links und rechts umgekehrt. Dadurch würden die Felder mit "RIGHT" linksbündig ausgerichtet.

message1, args1, implicitAlign1

Einige Blöcke werden auf natürliche Weise in zwei oder mehr separate Teile unterteilt. Betrachten Sie diesen Wiederholungsblock, der zwei Zeilen hat:

Wenn dieser Block mit einer einzelnen Nachricht beschrieben wird, ist das Attribut message0 wäre "repeat %1 times %2 do %3". Diese Zeichenfolge ist peinlich für einen Übersetzer, Die Bedeutung der Substitution %2 lässt sich nur schwer erklären. Die %2-Dummy Auch die Eingabe ist bei einigen Sprachen möglicherweise gar nicht erwünscht. Und es kann mehrere die den Text der zweiten Zeile teilen möchten. Ein besserer Ansatz ist, dass JSON mehr als eine Nachrichten- und Argumenteigenschaften verwendet:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

Es kann eine beliebige Anzahl von message-, args- und implicitAlign-Properties definiert werden. im JSON-Format, beginnend mit 0 und schrittweise erhöht. Beachten Sie, dass kann die Block Factory Nachrichten nicht in mehrere Teile aufteilen, die manuelle Einrichtung ist ganz einfach.

Eingaben und Felder in JavaScript

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

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

Jede Anfügemethode kann einen ID-String annehmen, der von Codegeneratoren verwendet wird. Test und end-row-Eingaben benötigen selten einen Verweis. Die Kennung wird in der Regel festgelegt.

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

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

Alle appendInput-Methoden (sowohl allgemeine als auch nicht allgemeine) geben den Fehlerwert Eingabeobjekt, sodass sie mithilfe der Methodenverkettung weiter konfiguriert werden können. Es sind drei integrierte Methoden zum Konfigurieren von Eingaben.

setCheck

JavaScript

input.setCheck('Number');

Diese optionale Funktion wird zur Typprüfung von verbundenen Eingängen verwendet. Falls angegeben ein Argument von null hat, dem Standardwert, kann diese Eingabe mit einem beliebigen Block verbunden werden. Weitere Informationen finden Sie unter Typprüfungen.

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

Diese optionale Funktion wird verwendet, um die Felder auszurichten (siehe unten). 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

Beim Entwerfen von Blöcken für RTL (Arabisch und Hebräisch) werden links und rechts umgekehrt. Dadurch würden die Felder mit Blockly.inputs.Align.RIGHT linksbündig ausgerichtet.

appendField

Nachdem eine Eingabe erstellt und mit appendInput an einen Block angehängt wurde, kann optional eine beliebige Anzahl von fields an die Eingabe anhängen. Diese Felder werden häufig als Beschriftungen verwendet, die beschreiben, wofür die einzelnen Eingaben gedacht sind.

JavaScript

input.appendField('hello');

Das einfachste Feldelement ist Text. Die Konvention von Blockly besteht darin, kleingeschriebener Text, mit Ausnahme von Eigennamen (z.B. „Google“ oder „SQL“).

Eine Eingabezeile kann eine beliebige Anzahl von Feldelementen enthalten. Mehrere appendField -Aufrufe können miteinander verkettet werden, um effizient mehrere Felder zu einem in die Eingabezeile ein.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

Der appendField('hello')-Aufruf ist eigentlich ein Kurzbefehl zur Verwendung einer expliziten FieldLabel-Konstruktor: appendField(new Blockly.FieldLabel('hello')) Der Konstruktor sollte nur bei der Angabe eines , sodass der Text mithilfe einer CSS-Regel formatiert werden kann.

Inline und extern

Blockeingaben können extern oder intern gerendert werden.

In der Blockdefinition kann ein optionaler boolescher Wert angegeben werden, der steuert, ob Eingaben ob sie inline sind oder nicht. Bei false sind alle Werteingaben extern (z. B. den linken Block). Bei true sind alle Werteingaben inline (z. B. der rechten Block oben).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

Wenn nicht definiert, verwendet Blockly einige Heuristiken, um zu erraten, welcher Modus und das Beste. Wenn Blockly die richtige Wahl trifft, lässt dieses Feld undefiniert. ist besser geeignet, da Übersetzungen in verschiedenen Sprachen automatisch verschiedenen Modi. Siehe JSON-Beispiel für "set %1 to %2" (externe Eingaben) und "put %2 in %1" (Inline-Eingaben) weiter oben auf dieser Seite.

Verwenden Sie Inline-Eingaben, wenn ein Block wahrscheinlich kleine Eingaben wie Zahlen enthält. Der Nutzer kann diese Option über das Kontextmenü aktivieren, wenn die collapse Konfiguration aktiviert ist. Der Standardwert ist "true", wenn die Toolbox Kategorien enthält.

Felder

Felder definieren die Mehrheit der UI-Elemente innerhalb eines Blocks. Dazu gehören die Beschriftungen, Bilder und Eingaben für literal-Daten wie Zeichenfolgen und Zahlen. Das einfachste Beispiel ist der math_number-Block. Dabei wird ein field_input verwendet, damit der Nutzer eine Zahl eingeben kann.

Felder werden mithilfe von appendField.

Blockly bietet eine Reihe von integrierten Feldern, z. B. Texteingaben, Farbauswahl, und Bilder. Sie können auch eigene Felder erstellen.

→ Weitere Informationen zu integrierten Feldern

→ Weitere Informationen zum Erstellen benutzerdefinierter Felder

Symbole

Symbole definieren UI-Elemente auf einem Block, der „Meta“ anzeigt Informationen über die blockieren.

Symbole werden mit addIcon an den Block angehängt.

Blockly bietet eine Reihe von integrierten Symbolen, einschließlich Kommentarsymbolen. und Warnsymbolen. Sie können auch eigene Symbole erstellen.

→ Weitere Informationen zum Erstellen benutzerdefinierter Symbole

Kurzinfos

Kurzinfos bieten sofortige Hilfe, wenn der Nutzer den Mauszeiger auf den Block bewegt. Ist der Text lang, wird er automatisch umgebrochen.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

In der JavaScript API können Kurzinfos auch als Funktion statt als statischer String. Dies ermöglicht dynamische Hilfe. Weitere Informationen finden Sie unter math_arithmetic Beispiel für eine Kurzinfo, die sich abhängig davon ändert, welche Drop-down-Option ausgewählt.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

Mit der JavaScript API können Blöcke eine Funktion anstelle einer statischen String, der einen Kurzinfo-String zurückgibt. Dies ermöglicht dynamische Kurzinfos. Ein Beispiel findest du unter math_arithmetic.

Anpassen

Sie können das Aussehen der Kurzinfos auch durch ein benutzerdefiniertes Rendering anpassen. . Erstellen Sie eine Funktion, die zwei Parameter akzeptiert:

  • Erstens ein <div>-Element, mit dem Sie den Inhalt rendern
  • 2. Das Element, über das der Mauszeiger bewegt wird und das in der die Kurzinfo für

Im Hauptteil der Funktion können Sie beliebige Inhalte im div. Um die Zeichenfolge für die Kurzinfo zu erhalten, die für den Block definiert ist, über den der Mauszeiger bewegt wird, können Sie Blockly.Tooltip.getTooltipOfObject(element); aufrufen, wobei element der Wert ist zweiten Parameter oben.

Registrieren Sie abschließend diese Funktion, damit Blockly sie zum richtigen Zeitpunkt aufrufen kann:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Ein Beispiel finden Sie in der Demo zu benutzerdefinierten Kurzinfos

Hilfe-URL

Mit Blöcken kann eine Hilfeseite verknüpft sein. Diese steht für die Nutzern von Blockly for Web, indem sie mit der rechten Maustaste auf die Blockierung klicken und „Help“ (Hilfe) auswählen aus dem Kontextmenü. Wenn dieser Wert null ist, ist das Menü ausgegraut aus.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

Mit der JavaScript API können Blöcke eine Funktion anstelle einer statischen -Zeichenfolge, die einen URL-String zurückgibt und so dynamische Hilfe ermöglicht.

Listener und Validatoren ändern

Blöcke können Änderungs-Listener-Funktionen haben, die bei jeder Änderung am (einschließlich der Bereiche, die nichts mit der Blockierung zu tun haben). Sie werden hauptsächlich verwendet, um den Warntext oder eine ähnliche Nutzerbenachrichtigung außerhalb des Arbeitsbereich.

Die Funktion wird durch Aufrufen von setOnChange mit einer Funktion hinzugefügt und kann während der Initialisierung oder über eine JSON-Erweiterung, wenn du sie verwenden möchtest auf allen Plattformen.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

Das System ruft die Funktion auf und übergibt Änderungsereignis. Innerhalb der Funktion bezieht sich this auf die Blockinstanz.

Da die Funktion bei jeder Änderung aufgerufen wird, sollten Entwickler, wenn sie verwendet werden, sicherstellen, wird der Listener schnell ausgeführt. Bei Änderungen am Arbeitsbereich ist ebenfalls auf der Hut sein. die an den Zuhörer kaskadierend oder in einer Schleife wiedergegeben werden.

Sieh dir die controls_flow_statements, logic_compare und procedures_ifreturn an Blöcke für Beispiele.

Beachten Sie, dass bearbeitbare Felder über eigene Event-Listener für die Eingabevalidierung verfügen. und Nebenwirkungen verursachen.

Mutator

Mutatoren ermöglichen es erweiterten Blöcken, ihre Form zu ändern, insbesondere aufgrund von Nutzende öffnen ein Dialogfeld, um Komponenten hinzuzufügen, zu entfernen oder neu anzuordnen. Mutatoren können über JSON mit dem Schlüssel mutator hinzugefügt.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

Konfiguration pro Block

Blockinstanzen haben eine Reihe von Attributen, mit denen ihr Verhalten auf Nutzenden. Damit lässt sich der Arbeitsbereich so einschränken, Eigenschaften der Domain (z.B. wenn es genau ein Ereignis vom Typ „start“ gibt) oder Fokus den Aufwand der Nutzenden (z.B. durch eine Anleitung).

Löschbarer Status

block.setDeletable(false);

Ist sie auf „false“ gesetzt, kann der Nutzer den Block nicht löschen. Standardeinstellung für Blockierungen zum Löschen in einem bearbeitbaren Arbeitsbereich.

Alle Blockierungen, auch nicht löschbare Blockierungen, können programmatisch gelöscht werden:

block.dispose();

Bearbeitbarer Status

block.setEditable(false);

Wenn die Richtlinie auf „false“ gesetzt ist, kann der Nutzer die Felder des Blocks nicht ändern (z.B. Drop-down-Menüs und Texteingaben). Bei bearbeitbaren Blöcken sind die Blöcke standardmäßig bearbeitbar. Arbeitsbereich.

Beweglicher Zustand

block.setMovable(false);

Ist sie auf „false“ gesetzt, kann der Nutzer den Block nicht direkt verschieben. Eine Eine unveränderliche Blockierung, die einem anderen Block untergeordnet ist, darf nicht getrennt werden mit verschoben. Wenn der übergeordnete Block verschoben wird, wird er jedoch mit dem übergeordneten Element verschoben. Blöcke in einem bearbeitbaren Arbeitsbereich standardmäßig auf bewegt gesetzt ist.

Alle Blöcke (auch unveränderliche Blöcke) können programmatisch verschoben werden, sobald sie sich auf einem Arbeitsbereich.

block.moveBy(dx, dy)

Die Startposition für einen Block in einem Arbeitsbereich ist standardmäßig (0, 0).

Daten blockieren

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

Daten sind eine optionale und beliebige Zeichenfolge, die an den Block angehängt wird. Wenn der Parameter die Datenzeichenfolge mit ihm serialisiert ist. Dazu gehört auch, der Block dupliziert oder kopiert/eingefügt wird.

Dies wird häufig verwendet, um einen Block mit einer externen Ressource zu verknüpfen.

Bei der Serialisierung in JSON werden die Daten als Property der obersten Ebene im Block gespeichert:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

Bei der Serialisierung in XML (dem alten Serialisierungssystem von Icebox) wird die Datenzeichenfolge wird in einem <data></data>-Tag innerhalb des Blocks gespeichert:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

Zerstörung

Blöcke haben einen destroy-Hook, der aufgerufen wird, wenn sie aus dem Arbeitsbereich. Dies kann verwendet werden, um alle unterstützenden/externen Datenmodelle zu zerstören. Ressourcen, die mit dem Block verknüpft sind und nicht mehr benötigt werden.

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

Die Methode destroy wird aufgerufen, nachdem das übergeordnete Element des Blocks entfernt wurde, aber bevor eines seiner untergeordneten Elemente oder Felder entsorgt wurde.

Kontextmenüs

Standardmäßig haben Blockierungen ein Kontextmenü, über das Nutzer Kommentare hinzufügen oder Blockierungen duplizieren.

So deaktivieren Sie das Kontextmenü eines einzelnen Blocks:

block.contextMenu = false;

Sie können auch die im Menü angezeigten Optionen anpassen. So passen Sie das Menü für finden Sie in den Dokumentation zu Kontextmenüs Um das Menü für einen einzelnen Block anzupassen, customContextMenu Diese Funktion kann ein Array von Menüoptionen ändert diese an der Stelle, d. h., Sie können sowohl Elemente hinzufügen als auch entfernen.

Jede Menüoption ist ein Objekt mit drei Eigenschaften:

  • text ist der Anzeigetext.
  • enabled ist ein boolescher Wert. Ist die Option deaktiviert, wird sie grau dargestellt. Text.
  • callback ist die Funktion, die aufgerufen wird, wenn auf die Option geklickt wird.