Zmienne

Zmienne to ważna koncepcja programowania. Blockly obsługuje języki dynamicznie typowane, takie jak Python i JavaScript, a przy odrobinie dodatkowej pracy możesz dodać informacje, aby obsługiwać języki ściśle typowane (lub statycznie typowane), takie jak Java czy C.

Tutaj znajdziesz więcej informacji o językach z typami dynamicznymi i statycznymi.

Blockly udostępnia pola zmiennych, które są dynamicznie wyświetlanymi polami listy, pokazującymi nazwy zmiennych podanych przez użytkownika. Poniżej znajdziesz przykład.

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

Domyślnie w Blockly można przypisać do zmiennej dowolny typ, a wszystkie generatory udostępnione przez Blockly są przeznaczone do języków z typami dynamicznymi. Jeśli zamiast tego używasz języka pisanego, możesz skonfigurować Blockly, aby go obsługiwał:

Bloki zmiennych bez typu

Najprostszymi blokami służącymi do uzyskiwania dostępu do zmiennej i modyfikowania jej są bloki gettera i settera. Omówmy bloki getter i setter dostępne w 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 kodu pobierania i ustawiania wartości zmiennej „foo”.

Należy pamiętać, że po ustawieniu zmiennej „output” na null zwracana wartość może mieć dowolny typ. Zwróć też uwagę, że dane wejściowe parametru skonfigurowanego przez zmienną nie określają żadnych kontroli. Dzięki temu zmienną można ustawić na dowolny typ wartości.

Bloki zmiennych pisanych

Możesz dodać metody get i set, które wymuszają sprawdzanie typu. Jeśli np. utworzysz zmienną typu „Panda”, poniższe definicje utworzą metodę dostępu i ustaw, które mają odpowiednie typy.

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

Spowoduje to utworzenie 2 typów bloków: gettera i settera. Ich menu wyświetlają tylko zmienne typu Panda. Ich wejścia i wyjścia akceptują tylko połączenia typu Panda. Wartość właściwości defaultType musi być równa jednej z wartości w tablicy variableTypes. Nieustawienie wartości defaultType przy podawaniu tablicy variableTypes spowoduje wyjątek.

Domyślnie nie ma wizualnego wskaźnika, który informuje użytkownika, który typ jest używany. Jednym z łatwych sposobów rozróżniania typów zmiennych jest kolor.

Dodawanie zmiennych do zestawu narzędzi

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

Utwórz nową kategorię dynamiczną dla zmiennych, jeśli jeszcze jej nie masz.

Otwarta kategoria o nazwie „Zmienna”, która zawiera przycisk „Utwórz zmienną”.

Dodaj do kategorii nowe metody get i set.

Ta sama kategoria po utworzeniu zmiennych „foo” i „bar”. Zawiera on przycisk „Utwórz zmienną”, bloki set-variable-to i change-variable-by oraz bloki getter.

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 zadzwoń z powrotem

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

i zostanie utworzona zmienna Panda typed.

Najprostszym sposobem na umożliwienie użytkownikom tworzenia zmiennych różnych typów jest umieszczenie osobnego przycisku „Utwórz” dla każdego typu (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 uzyskać zbyt dużo przycisków. W takim przypadku możesz użyć wtyczki @blockly/plugin-typed-variable-modal, aby wyświetlić wyskakujące okienko, w którym użytkownicy mogą wybrać odpowiedni typ zmiennej.

Definiowanie generatorów

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