Zmienne

Zmienne to ważne pojęcie związane z programowaniem. Blockly obsługuje języki tworzone dynamicznie, np. Python i JavaScript, a przy odrobinie szczęścia pozwala dodać informacje umożliwiające obsługę języków silnie określonych (lub języków statycznych), takich jak Java czy C.

Tutaj znajdziesz więcej informacji o językach dyamicznych i statycznych.

Blockly dostarcza pola zmiennych, czyli dynamiczne menu, które pokazują nazwy zmiennych podanych przez użytkownika. Poniżej znajduje się przykład jednego z nich.

Domyślnie Blockly pozwala na przypisanie do zmiennej dowolnego typu, a wszystkie generatory tego typu obsługują języki pisane dynamicznie. Jeśli zamiast tego używasz języka wpisywania, możesz skonfigurować jego obsługę, wykonując te czynności:

Bloki zmiennych nietypowych

Najbardziej podstawowymi blokami, które umożliwiają dostęp do zmiennej i manipulowanie nią, są 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 dwóch bloków:

Ważne jest, że jeśli ustawisz parametr „output” zmiennej pobierającej na wartość null, zwracana wartość może być dowolnego typu. Pamiętaj też, że dane wejściowe metody ustawiającego zmienne nie określają żadnych testów. W efekcie jako zmienną można ustawić dowolny typ wartości.

Bloki zmiennych typów

Możesz dodawać metody pobierania i ustawiania, które wymuszają sprawdzanie typu. Jeśli np. utworzysz zmienną typu „Panda”, poniższe definicje pomogą Ci utworzyć metodę gettra i ustawiającą 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 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 rodzajów bloków: metody getter i setter. W ich menu wyświetlają się tylko zmienne typu Panda. Ich dane wejściowe i wyjściowe akceptują tylko połączenia typu Panda. Wartość defaultType pola musi być ustawiona na jedną z wartości w tablicy variableTypes. Jeśli nie ustawisz defaultType podczas udostępniania tablicy variableTypes, wystąpi błąd.

Domyślnie nie ma wizualnego wskaźnika wskazującego typ używanego typu. Prostym sposobem na rozróżnianie typów zmiennych jest kolor.

Dodaj zmienne do zestawu narzędzi

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

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

Dodaj do kategorii nowe metody pobierające i ustawiające.

Przycisk Utwórz zmienną

Następnie użytkownik musi określić sposób tworzenia zmiennych. Najprostszym sposobem jest użycie przycisku „Utwórz zmienną”.

Tworząc przycisk, wykonaj połączenie zwrotne

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

i zostanie utworzona zmienna typu Panda.

Najprostszym sposobem na umożliwienie użytkownikom tworzenia zmiennych różnego rodzaju jest użycie po jednym przycisku „utwórz” dla każdego typu (np. Utwórz zmienną ciągu znaków, Utwórz zmienną liczbową, Utwórz zmienną Panda).

Jeśli masz więcej niż 2 lub 3 typy zmiennych, możesz szybko stworzyć zbyt wiele przycisków. W takich przypadkach użyj kodu @blockly/plugin-typed-variable-modal, aby wyświetlić wyskakujące okienko, w którym użytkownicy będą mogli wybrać odpowiedni typ zmiennej.

Zdefiniuj generatory

Na koniec musisz zdefiniować generatory kodu blokowego na potrzeby nowych bloków zmiennych. Do listy zmiennych możesz też uzyskać bezpośredni dostęp za pomocą funkcji Blockly.Workspace.getAllVariables(), która pobiera wszystkie zmienne dowolnego typu, lub Blockly.Workspace.getVariablesOfType(), która pobiera wszystkie zmienne określonego typu.