Zmienne

Zmienne to ważne pojęcie w programowaniu. Blockly obsługuje języki z dynamicznym typowaniem, takie jak Python i JavaScript. Przy odrobinie dodatkowej pracy możesz dodać informacje, które będą obsługiwać języki z silnym typowaniem (lub statycznym typowaniem), takie jak Java czy C.

Więcej informacji o językach z dynamicznym i statycznym typowaniem znajdziesz w artykule Wprowadzenie do typów danych: statyczne, dynamiczne, silne & słabe.

Blockly udostępnia pola zmiennych, które są dynamicznymi polami wyboru wyświetlającymi nazwy zmiennych podane przez użytkownika. Oto przykład:

Pole zmiennej z menu, w którym możesz wybrać zmienną, zmienić jej nazwę lub ją usunąć.

Domyślnie Blockly umożliwia przypisanie do zmiennej dowolnego typu, a wszystkie generatory Blockly są przeznaczone dla języków z dynamicznym typowaniem. Jeśli używasz języka z typowaniem, możesz skonfigurować Blockly tak, aby go obsługiwał, wykonując te czynności:

Bloki zmiennych bez typu

Najbardziej podstawowe bloki do uzyskiwania dostępu do zmiennej i manipulowania nią to bloki getter i setter. Omówmy bloki getter i setter udostępniane przez Blockly.

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

Spowoduje to utworzenie tych 2 bloków:

Bloki pobierania i ustawiania zmiennej `foo`.

Ważną rzeczą, na którą należy zwrócić uwagę, jest to, że ustawiając „output” getter zmiennej na null, wartość zwracana może być dowolnego typu. Zwróć też uwagę, że dane wejściowe setter zmiennej nie określają żadnych sprawdzeń. Dzięki temu zmienna może być ustawiona na dowolny typ wartości.

Bloki zmiennych z typem

Możesz dodać gettery i settery, które wymuszają sprawdzanie typu. Jeśli na przykład utworzysz zmienną typu "Panda", te definicje utworzą getter i setter z odpowiednimi typami.

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

Spowoduje to utworzenie 2 typów bloków – getter i setter. Ich listy rozwijane wyświetlają tylko zmienne typu "Panda". Ich dane wejściowe i wyjściowe akceptują tylko połączenia typu "Panda". defaultType pola musi być ustawiony na jedną z wartości w tablicy variableTypes. Jeśli nie ustawisz defaultType podczas podawania tablicy variableTypes, zostanie zgłoszony błąd.

Domyślnie nie ma wizualnego wskaźnika informującego użytkownika o tym, jakiego typu używa. Łatwym sposobem na rozróżnienie typów zmiennych jest kolor.

Dodawanie zmiennych do przybornika

Aby ten nowy typ zmiennej był przydatny dla użytkowników, musisz dodać sposób tworzenia i używania nowych zmiennych.

Jeśli nie masz jeszcze nowej kategorii dynamicznej dla zmiennych, utwórz ją.

Otwarta kategoria „Zmienne” zawierająca przycisk „Utwórz zmienną”.

Dodaj do kategorii nowe gettery i settery.

Ta sama kategoria po utworzeniu zmiennych „foo” i „bar”. Zawiera przycisk „Utwórz zmienną”, bloki ustawiania wartości zmiennej i zmieniania jej wartości oraz bloki pobierania wartości.

Przycisk „Utwórz zmienną”

Następnie użytkownik musi mieć możliwość tworzenia zmiennych. Najprostszym sposobem jest użycie przycisku „Utwórz zmienną”.

Podczas tworzenia przycisku wywołaj funkcję zwrotną

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

i zostanie utworzona zmienna typu "Panda".

Najłatwiejszym sposobem na umożliwienie użytkownikom tworzenia zmiennych wielu typów jest użycie jednego przycisku „Utwórz” na typ (np. Utwórz zmienną tekstową, Utwórz zmienną liczbową, Utwórz zmienną Panda).

Jeśli masz więcej niż 2 lub 3 typy zmiennych, możesz szybko mieć zbyt wiele przycisków. W takim przypadku rozważ użycie @blockly/plugin-typed-variable-modal , aby wyświetlić wyskakujące okienko, w którym użytkownicy mogą wybrać żądany typ zmiennej.

Definiowanie generatorów

Na koniec musisz zdefiniować generatory kodu blokowego dla nowych bloków zmiennych. Możesz też uzyskać dostęp do listy zmiennych bezpośrednio za pomocą Workspace.getVariableMap().getAllVariables(), aby uzyskać wszystkie zmienne wszystkich typów, lub Workspace.getVariableMap().getVariablesOfType(), aby uzyskać wszystkie zmienne określonego typu.