Struktura blokowa w JavaScript

Z tego dokumentu dowiesz się, jak za pomocą JavaScriptu zdefiniować dane wejściowe i pola (w tym etykiety) w bloku. Jeśli nie znasz tych terminów, przed przejściem dalej przeczytaj artykuł Anatomia bloku.

Możesz też zdefiniować dane wejściowe, pola i połączenia 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 bloku połączonego z wejściem. Generatory kodu rzadko odwołują się do danych testowych i danych na końcu wiersza, więc zwykle nie ma powodu, aby przypisywać im identyfikator.

Interfejs JavaScript API zawiera też ogólną metodę appendInput do dołączania niestandardowych danych wejściowych. Pamiętaj, że w tym przypadku identyfikator powinien zostać przekazany bezpośrednio do konstruktora niestandardowego elementu wejściowego.

JavaScript

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

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

Dołączanie pól

Po utworzeniu danych wejściowych i dołączeniu ich do bloku za pomocą znaku appendInput można opcjonalnie dołączyć do nich dowolną liczbę pól. Pola te są często używane jako etykiety opisujące, do czego służy każde pole wejściowe.

JavaScript

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

Blok z etykietą

Najprostszym polem jest etykieta. Zgodnie z konwencją Blockly używa 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 skutecznie dodać kilka pól do tego samego wiersza wejściowego.

JavaScript

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

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

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

Sprawdzanie połączenia

JavaScript

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

Metoda setCheck służy do sprawdzania typów połączeń. Jeśli argument ma wartość null (domyślną), to wejście może być połączone z dowolnym blokiem. Więcej informacji znajdziesz w sekcji Sprawdzanie połączenia.

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. Istnieją 3 wartości opisowe, które można przekazać jako argument tej funkcji: 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 lub hebrajskim), lewa i prawa strona są zamienione. W ten sposób Blockly.inputs.Align.RIGHT wyrówna pola do lewej.