Struktura blokowa w JavaScript

Z tego dokumentu dowiesz się, jak używać JavaScript do definiowania danych wejściowych i pól (w tym etykiet) w bloku. Jeśli nie znasz tych terminów, przed kontynuowaniem zapoznaj się z artykułem Anatomia bloku.

Dane wejściowe, pola i połączenia możesz też zdefiniować w formacie JSON.

Dołączanie danych wejściowych

Interfejs JavaScript API zawiera metodę append dla każdego typu danych wejściowych:

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

Blok z 4 wierszami. W pierwszym wierszu znajdują się etykiety „dla każdego” i „produktu” oraz menu z wybraną zmienną „x”. W drugim wierszu znajduje się etykieta „na liście” i pole do wpisania wartości. W trzecim wierszu znajduje się etykieta „do” i pole wprowadzania instrukcji. Ostatni wiersz ma etykietę „end”.

Każda metoda appendInput może przyjmować ciąg identyfikatora, który jest używany przez generatory kodu do pobierania kodu dla bloku połączonego z danymi wejściowymi. Generatory kodu rzadko odwołują się do danych wejściowych typu dummy i end-of-row, więc zwykle nie ma potrzeby przypisywania im identyfikatora.

Interfejs JavaScript API zawiera też ogólną appendInput metodę do dołączania niestandardowych danych wejściowych. Pamiętaj, że w tym przypadku identyfikator należy przekazać bezpośrednio do konstruktora niestandardowych danych wejściowych.

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

Wszystkie metody appendInput (zarówno ogólne, jak i nieogólne) zwracają obiekt danych wejściowych, dzięki czemu można je dalej konfigurować za pomocą łańcucha metod. Do konfigurowania danych wejściowych służą 3 wbudowane metody.

Dołączanie pól

Gdy dane wejściowe zostaną utworzone i dołączone do bloku za pomocą metody appendInput, można opcjonalnie dołączyć do nich dowolną liczbę pól do danych wejściowych. Pola te są często używane jako etykiety opisujące, do czego służą poszczególne dane wejściowe.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

Blok z etykietą

Najprostszym polem jest etykieta. Zgodnie z konwencją Blockly używa się tekstu pisanego małymi literami, z wyjątkiem nazw własnych (np. Google, SQL).

Wiersz danych wejściowych może zawierać dowolną liczbę pól. Można połączyć ze sobą kilka wywołań appendField, aby efektywnie dodać kilka pól do tego samego wiersza danych wejściowych.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

Blok z etykietą „hello” w formie zwykłego tekstu i etykietą „Neil” w formie kursywy.

Wywołanie appendField('hello') jest w rzeczywistości skrótem do użycia jawnego FieldLabel konstruktora: appendField(new Blockly.FieldLabel('hello')). Konstruktora używa się tylko wtedy, gdy trzeba określić nazwę klasy, aby można było stylizować etykietę za pomocą reguły CSS.

Sprawdzanie połączeń

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

Metoda setCheck służy do sprawdzania typu połączeń. Jeśli jako argument podasz wartość null (domyślną), te dane wejściowe można połączyć z dowolnym blokiem. Więcej informacji znajdziesz w artykule Sprawdzanie połączeń.

Wyrównywanie pól

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

Metoda setAlign służy do wyrównywania pól w danych wejściowych. Jako argument tej funkcji można przekazać 3 wartości opisowe: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT i Blockly.inputs.Align.CENTER.

Gdy blok jest renderowany w trybie od prawej do lewej (np. w języku arabskim i hebrajskim), lewa i prawa strona są odwrócone. Dlatego Blockly.inputs.Align.RIGHT wyrówna pola do lewej.