Zmienne

Zmienne to ważna koncepcja programowania. Blockly obsługuje dynamiczną obsługę takich jak Python czy JavaScript, a przy odrobinie pracy może dodawać informacje obsługujące języki mocno pisane (lub tekst statyczny) języków), takich jak Java lub C.

Tutaj znajdziesz więcej informacji (dyamiczne i statyczne języki wpisywania).

Blockly dostarcza zmienne, czyli dynamiczne menu, które pokazują, nazwy zmiennych podanych przez użytkownika. Oto przykład.

Domyślnie Blockly zezwala na przypisanie do zmiennej dowolnego typu i wszystkich Udostępniane generatory Blockly są przeznaczone dla języków wpisywanych dynamicznie. Jeśli jesteś używając języka wpisywania, możesz skonfigurować Blockly tak, aby obsługiwała ten język, następujące:

Bloki zmiennych bez wpisanego tekstu

Najbardziej podstawowymi blokami dostępu do zmiennej i manipulowania nimi jest metoda pobierająca i bloków ustalających. Omówmy teraz bloki pobierania i nastawcy, co zapewnia.

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

Zostaną utworzone 2 następujące bloki:

Warto zauważyć, że ustawienie parametru „output” metody pobierania zmiennych do null, zwrócona wartość może być dowolnego typu. Zwróć uwagę, że zmienna dane wejściowe osoby ustawiającej nie określają żadnych testów. W ten sposób można ustawić zmienną do dowolnego typu wartości.

Zmienne bloki napisane

Możesz dodać metody pobierające i ustalające, które wymuszają sprawdzanie typu. Jeśli na przykład utworzyli zmienną typu „Panda”, następujące definicje tworzą zmienną metody getter i seter 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);
    ...
  }
};

Powoduje to utworzenie 2 typów bloków: gettera i setera. Tylko jego menu zmienne typu Panda. Ich dane wejściowe i wyjściowe akceptują tylko połączeń typu Panda. Pole defaultType w polu musi zawierać wartość 1 wartości w tablicy variableTypes. Nie ustawiam parametru defaultType podczas podanie tablicy variableTypes spowoduje zgłoszenie błędu.

Domyślnie nie ma wizualnego wskaźnika informującego użytkownika o typie . Prostym sposobem na rozróżnienie typów zmiennych jest użycie ich koloru.

Dodawanie zmiennych do Zestawu narzędzi

Aby ten nowy typ 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 nie są używane.

Dodaj do kategorii nowe osoby pobierające i ustawiający.

Przycisk Utwórz zmienną

Kolejny krok to utworzenie zmiennych. Najprostszym sposobem jest użycie „Utwórz zmienną” przycisk.

Podczas tworzenia przycisku wykonaj wywołanie zwrotne

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

i zostanie utworzona zmienna wpisana przez Pandę!

Najłatwiejszym sposobem umożliwienia użytkownikom tworzenia zmiennych różnego typu jest użycie jedno „utwórz” przycisk według typu (np. Utwórz zmienną ciągu, Utwórz numer zmienna, utwórz zmienną Panda).

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

Zdefiniuj generatory

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