Variablen

Variablen sind ein wichtiges Programmierkonzept. Blockly unterstützt dynamische wie Python und JavaScript eingegeben haben. Mit ein wenig Zusatzaufwand können Informationen hinzufügen, um stark typisierte Sprachen (oder statisch typisierte Sprachen) zu unterstützen. Sprachen) wie Java oder C.

Weitere Informationen Informationen zu dynamischen und statisch typisierten Sprachen.

Blockly stellt variable Felder bereit. Das sind dynamische Drop-down-Felder, die Namen der vom Nutzer bereitgestellten Variablen. Unten sehen Sie ein Beispiel dafür.

Blockly lässt standardmäßig zu, dass jeder Typ einer Variablen und alle Die von Blockly bereitgestellten Generatoren sind für dynamisch typisierte Sprachen vorgesehen. Wenn Sie mit einer typisierten Sprache können Sie Blockly so konfigurieren, Folgendes:

Nicht typisierte Variablenblöcke

Die grundlegendsten Blöcke für den Zugriff auf und die Bearbeitung einer Variablen sind der Getter und Setter-Blöcken. Gehen wir die Getter- und Setter-Blöcke durch, .

JSON

// Block for variable getter.
{
  "type": "variables_get",
  "message0": "%1",
  "args0": [
    {    // Beginning of the field variable dropdown
      "type": "field_variable",
      "name": "VAR",    // Static name of the field
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"    // Given at runtime
    }    // End of the field variable dropdown
  ],
  "output": null,    // Null means the return value can be of any type
  ...
},

// Block for variable setter.
{
  "type": "variables_set",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"
    },
    {
      "type": "input_value",    // This expects an input of any type
      "name": "VALUE"
    }
  ],
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME");
    this.setOutput(true, null);
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField("set")
        .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME")
        .appendField("to");
    this.setOutput(true, null);
    ...
  }
};

Dadurch werden die folgenden zwei Blöcke erstellt:

Wichtig ist, dass Sie durch Festlegen des Variablen-Getters "output" auf null setzen, kann der Rückgabewert beliebiger Typ sein. Beachten Sie außerdem, Die Eingabe des Setters gibt keine Prüfungen an. Daher kann die Variable auf einen beliebigen Werttyp.

Eingegebene Variablenblöcke

Sie können Getter und Setter hinzufügen, die die Typprüfung erzwingen. Wenn Sie beispielsweise Variable vom Typ „Panda“ erstellt haben, erstellen die folgenden Definitionen eine Getter und Setter mit den entsprechenden Typen.

JSON

 // Block for Panda variable getter.
 {
  "type": "variables_get_panda",
  "message0": "%1",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],    // Specifies what types to put in the dropdown
      "defaultType": "Panda"
    }
  ],
  "output": "Panda",    // Returns a value of "Panda"
  ...
},

 // Block for Panda variable setter.
{
  "type": "variables_set_panda",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],
      "defaultType": "Panda"
    },
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "Panda"    // Checks that the input value is of type "Panda"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get_panda'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable(
          "VAR_NAME", ['Panda'], 'Panda'), "FIELD_NAME");
    this.setOutput(true, 'Panda');
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set_panda'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck('Panda')
        .appendField("set")
        .appendField(new Blockly.FieldVariable(
            "VAR_NAME", null, ['Panda'], 'Panda'), "FIELD_NAME")
        .appendField("to");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    ...
  }
};

Dadurch werden zwei Arten von Blöcken erstellt: ein Getter und ein Setter. Nur ihre Drop-down-Menüs um Variablen des Typs Panda anzuzeigen. Ihre Ein- und Ausgaben akzeptieren nur vom Typ Panda. Für die defaultType des Felds muss ein Wert festgelegt sein der Werte im Array variableTypes. defaultType wird nicht festgelegt, während wird bei Angabe eines variableTypes-Arrays ein Fehler ausgegeben.

Standardmäßig gibt es keinen visuellen Indikator, um dem Nutzer mitzuteilen, welche Art von verwendet. Eine einfache Möglichkeit, Variablentypen zu unterscheiden, ist die Farbe.

Variablen zur Toolbox hinzufügen

Um diesen neuen Variablentyp für Ihre Nutzenden nützlich zu machen, müssen Sie eine Möglichkeit hinzufügen, die neuen Variablen erstellen und verwenden.

Neue dynamische Kategorie erstellen für Variablen, falls noch keine vorhanden sind.

Fügen Sie der Kategorie Ihre neuen Getter und Setter hinzu.

Schaltfläche „Variable erstellen“

Als Nächstes benötigen die Nutzenden eine Möglichkeit, Variablen zu erstellen. Am einfachsten ist es, „Variable erstellen“ Schaltfläche.

Tätigen Sie beim Erstellen der Schaltfläche den Callback-Aufruf.

Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace(), null, 'panda');

und eine Panda-Variable erstellt.

Die einfachste Methode, um Nutzenden zu ermöglichen, Variablen mehrerer Typen zu erstellen, besteht darin, eine „erstellen“ Schaltfläche pro Typ (z.B. Zeichenfolgenvariable erstellen, Nummer erstellen) Variable, Panda-Variable erstellen).

Wenn Sie mehr als zwei oder drei Variablentypen haben, können Sie schnell am Ende zu viele Schaltflächen. In diesem Fall sollten Sie @blockly/plugin-typed-variable-modal , um ein Pop-up-Fenster aufzurufen, in dem Nutzende ihren gewünschten Variablentyp auswählen können.

Generatoren definieren

Zum Schluss müssen Sie Blockcode-Generatoren definieren. für Ihre neuen Variablenblöcke. Sie können die Liste der Variablen auch direkt mit Blockly.Workspace.getAllVariables() abrufen, um alle Variablen aller Typen oder Blockly.Workspace.getVariablesOfType(), um alle Variablen eines bestimmten Typs abzurufen.