Variablen

Variablen sind ein wichtiges Programmierkonzept. Blockly unterstützt dynamisch typisierte Sprachen wie Python und JavaScript. Mit ein wenig zusätzlichen Aufwand können Sie Informationen hinzufügen, um stark typisierte Sprachen (oder statische typisierte Sprachen) wie Java oder C zu unterstützen.

Hier finden Sie weitere Informationen zu dynamischen und statischen Sprachen.

Blockly stellt Variablenfelder bereit, bei denen es sich um dynamische Drop-down-Felder handelt, die die Namen der vom Nutzer angegebenen Variablen anzeigen. Unten sehen Sie ein Beispiel.

Standardmäßig kann jeder Typ einer Variablen zugewiesen werden und alle Blockly-Generatoren sind für dynamisch typisierte Sprachen vorgesehen. Wenn Sie stattdessen eine typisierte Sprache verwenden, können Sie Blockly so konfigurieren, dass sie diese unterstützt:

Nicht typisierte Variablenblöcke

Die grundlegendsten Blöcke für den Zugriff auf und die Bearbeitung einer Variablen sind die Getter- und Setter-Blöcke. Sehen wir uns die Getter- und Setter-Blöcke von Blockly an.

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 beiden folgenden Blöcke erstellt:

Ein wichtiges Detail: Wenn Sie die "output" des Variablen-Getters auf null setzen, kann der Rückgabewert beliebiger Typ sein. Beachten Sie außerdem, dass die Eingabe des Variablen-Setters keine Prüfungen angibt. Daher kann die Variable auf einen beliebigen Werttyp festgelegt werden.

Eingabevariable Blöcke

Sie können Getter und Setter hinzufügen, die die Typprüfung erzwingen. Wenn Sie beispielsweise eine Variable vom Typ "Panda" erstellt haben, erstellen die folgenden Definitionen einen 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. Die Dropdown-Menüs enthalten nur Variablen vom Typ Panda. Ihre Ein- und Ausgaben akzeptieren nur Verbindungen vom Typ Panda. Der defaultType des Felds muss auf einen der Werte im variableTypes-Array festgelegt sein. Wenn defaultType bei der Bereitstellung eines variableTypes-Arrays nicht festgelegt wird, wird ein Fehler ausgegeben.

Standardmäßig gibt es keinen visuellen Indikator, der den Nutzer darüber informiert, welcher Typ verwendet wird. Variablentypen lassen sich anhand der Farbe leicht unterscheiden.

Variablen zur Toolbox hinzufügen

Damit dieser neue Variablentyp für Ihre Nutzer nützlich ist, müssen Sie eine Möglichkeit zum Erstellen und Verwenden der neuen Variablen hinzufügen.

Erstellen Sie eine neue dynamische Kategorie für Variablen, falls noch nicht geschehen.

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

Schaltfläche „Variable erstellen“

Als Nächstes benötigt Ihre nutzende Person eine Möglichkeit, Variablen zu erstellen. Die einfachste Möglichkeit ist die Verwendung der Schaltfläche „Variable erstellen“.

Beim Erstellen der Schaltfläche den Callback starten

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

Daraufhin wird eine von Panda typisierte Variable erstellt.

Am einfachsten können Nutzer mehrere Variablentypen erstellen, wenn sie für jeden Typ eine „Erstellen“-Schaltfläche verwenden (z.B. „String-Variable erstellen“, „Zahlenvariable erstellen“ oder „Panda-Variable“).

Wenn Sie mehr als zwei oder drei Variablentypen haben, kann es passieren, dass Sie schnell zu viele Schaltflächen haben. Verwenden Sie in diesem Fall @blockly/plugin-typed-variable-modal, um ein Pop-up anzuzeigen, aus dem Nutzer den gewünschten Variablentyp auswählen können.

Generatoren definieren

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