Zdefiniuj bloki

Definicje bloków opisują wygląd i działanie bloków, w tym tekst, kolor, kształt i z jakimi innymi bryłami może się łączyć.

Format JSON a JavaScript API

Blockly udostępnia 2 sposoby definiowania bloków: obiekty JSON i funkcje JavaScript. Format JSON został zaprojektowany tak, aby uprościć lokalizację proces tworzenia w językach o różnej kolejności słów. Preferowany jest format JSON. do definiowania bloków.

Format JSON nie jest jednak w stanie bezpośrednio definiować funkcji zaawansowanych, mutatory lub walidatory. Muszą być napisane w języku JavaScript, zwykle .

Aplikacje, które korzystają z pierwotnej implementacji JavaScriptu przez Blockly, mogą również tworzyć definicje blokad bezpośrednio do wywołań funkcji interfejsu Blockly API niższego poziomu, wyświetlane w różnych przykładach JavaScriptu poniżej.

JSON

Blockly.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

Funkcja init tworzy kształt bryły. W kontekście gdy słowo kluczowe this jest rzeczywistym blokowanym blokiem.

Oba przykłady ładują tę samą wartość parametru „string_length” blokować.

W internecie format JSON jest wczytywany przy użyciu funkcji initJson. Dzięki temu można także łączyć te dwa formaty na stronach internetowych Blockly. Jest najlepiej zdefiniować blok za pomocą JSON, gdy tylko jest to możliwe, i używać JavaScriptu tylko w przypadku części definicji bloków, których JSON nie obsługuje.

Poniżej znajduje się przykład bloku, który jest zdefiniowany głównie za pomocą kodu JSON: ale została rozszerzona o dynamiczną etykietkę za pomocą interfejsu JavaScript API.

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

Kolor bloku

Podstawowy kolor bloku jest określony przez właściwość colour JSON, funkcji block.setColour(..), lub używając motywów i zdefiniować blok stylu.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Zobacz przewodnik po kolorach bloków .

Połączenia instrukcji

Użytkownicy mogą tworzyć sekwencje bloków za pomocą funkcji nextStatement oraz previousStatement łączniki. W standardowym układzie Blockly połączenia te znajdują się u góry i na dole, a bryły są ułożone pionowo.

Blok z poprzednim oprogramowaniem sprzęgającym nie może mieć złącze wyjścia i na odwrót. termin blok instrukcji. odnosi się do bloku bez wartości wyjściowej. Blok instrukcji zwykle zawiera zarówno poprzedniego, jak i następnego.

Połączenia nextStatement i previousStatement mogą być wpisane, ale z tej funkcji nie korzystają standardowe blokady.

Następne połączenie

Tworzy punkt na dole bryły, dzięki czemu inne wyrażenia mogą być układane w górę. Blok z następnym połączeniem, ale brak poprzedniego połączenia zwykle reprezentuje zdarzenie i można go skonfigurować tak, by renderował się kapelusz.

JSON

Brak typu:

{
  ...,
  "nextStatement": null,
}

Typ (rzadki):

{
  "nextStatement": "Action",
  ...
}

JavaScript

Brak typu:

this.setNextStatement(true);  // false implies no next connector, the default

Typ (rzadki):

this.setNextStatement(true, 'Action');

Poprzednie połączenie

Tworzy wycięcie na górze bryły, dzięki czemu można ją połączyć jako stos wyciągów.

Bloki z poprzednim połączeniem nie mogą mieć połączenia wyjściowego.

JSON

Brak typu:

{
  ...,
  "previousStatement": null,
}

Typ (rzadki):

{
  "previousStatement": "Action",
  ...
}

JavaScript

Brak typu:

this.setPreviousStatement(true);  // false implies no previous connector, the default

Typ (rzadki):

this.setPreviousStatement(true, 'Action');

Zablokuj wyjście

Blok może mieć pojedyncze wyjście, reprezentowane jako męskie złącze do układania krawędzi wiodącej. Wyjścia łączą się z danymi wejściowymi. Bloki z danymi wyjściowymi to: zwykle nazywane blokami wartości.

JSON

Brak typu:

{
  // ...,
  "output": null,
}

Wpisany:

{
  // ...,
  "output": "Number",
}

JavaScript

Brak typu:

init: function() {
  // ...
  this.setOutput(true);
}

Wpisany:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

Bloki z łącznikiem wyjściowym nie mogą też mieć poprzedniego nacięcia instrukcji.

Blokuj wejścia

Blok zawiera co najmniej jedno dane wejściowe, z których każde zawiera sekwencję pola i może zakończyć się połączeniem. Dostępnych jest kilka typów wbudowanych danych wejściowych.

  • Wartość wejściowa: łączy się z połączeniem wyjściowym bloku wartości. Blok math_arithmetic (dodawanie, odejmowanie) to przykład bloku z 2 wartościami wejściowymi.
  • Deklaracja wejściowa: łączy się z poprzednie połączenie bloku instrukcji. Zagnieżdżona sekcja pętli if (man) jest przykładem danych wejściowych instrukcji.
  • Dummy API: nie ma połączenia blokującego. Zapisuje nowy wiersz, gdy blok jest skonfigurowany tak, aby używać zewnętrznych wartości wejściowych.
  • Wprowadzanie w wierszu końcowym: nie ma połączenia blokowego i zawsze działa jak nowego wiersza.

Możesz też utworzyć niestandardowe dane wejściowe na potrzeby obsługi niestandardowych danych wejściowych renderowaniu.

Format JSON i JavaScript API wykorzystują nieco inne modele do opisania ich dane wejściowe.

Dane wejściowe i pola w formacie JSON

Zdefiniowane bloki JSON mają strukturę sekwencji interpolowanych ciągi komunikatów ( message0, message1, ...), gdzie każdy token interpolacji (%1, %2, ...) to pole lub koniec wejściowe (więc renderuje się w obrębie wiadomości) w pasującej tablicy argsN JSON. Ten format jest w celu ułatwienia internacjonalizacji.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Tokeny interpolacji muszą być całkowicie zgodne z tablicą args0: nie mogą zawierać duplikatów, bez pominięcia. Tokeny mogą być obecne w dowolnej kolejności, co pozwala na różne języków, aby zmienić układ bryły.

Tekst po obu stronach tokena interpolacji jest usuwany odstępem. W tekście ze znakiem % (np. w odniesieniu do wartości procentowej) należy użyć %%, by nie była interpretowana jako token interpolacji.

Kolejność argumentów oraz typy argumentów określają kształt blokować. Zmiana jednego z tych ciągów może całkowicie zmienić układ bloku. Jest to szczególnie ważne w przypadku języków, w których występuje inna kolejność słów niż po angielsku. Rozważ hipotetyczny język, w którym "set %1 to %2" (w użyciu w przykładzie powyżej) należy odwrócić i wyrazić "put %2 in %1". Zmiana ten jeden ciąg znaków (i pozostałe dane w formacie JSON niezaktualizowane) skutkuje następującym blokiem:

Blockly automatycznie zmienił kolejność pól, utworzył fikcyjne dane wejściowe, i przełączono z zewnętrznego na wewnętrzne wejście.

Blockly automatycznie zastępuje też znak nowego wiersza (\n) w wiadomości z danymi wejściowymi wiersza końcowego.

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Argi

Każdy ciąg wiadomości jest sparowany z tablicą args o tej samej liczbie. Dla: np. message0 pasuje do args0. Tokeny interpolacji (%1, %2, ...) odwołują się do elementów tablicy args. Każdy obiekt ma Ciąg tekstowy type. Pozostałe parametry zależą od typu:

Możesz też zdefiniować własne pola niestandardowe oraz niestandardowe dane wejściowe i przekazać je jako argumenty.

Każdy obiekt może też mieć pole alt. W przypadku, gdy firma Blockly nie Rozpoznasz właściwość type obiektu, zamiast niego zostanie użyty obiekt alt. Dla: jeśli na przykład do Blockly dodano nowe pole o nazwie field_time, zostanie ono zablokowane za pomocą funkcji to pole może używać parametru alt do zdefiniowania wartości zastępczej field_input dla starszych wersji z Blockly:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

Obiekt alt może mieć własny obiekt alt, co umożliwia tworzenie łańcuchów. Jeśli Blockly nie może utworzyć obiektu w tablicy args0 (po próbowania dowolnych obiektów alt), wówczas ten obiekt jest po prostu pomijany.

Na końcu bloku zostanie automatycznie dodany przykładowy tekst, jeśli Ciąg tekstowy message kończy się tekstem lub polami, których nie ma w danych wejściowych. Jeśli więc ostatnie dane wejściowe na bloku są fikcyjnymi danymi, mogą zostać pominięte w tablicę args i nie wymaga interpolacji w message. automatyczne dodanie zastępczych danych wejściowych, które umożliwia tłumaczom message bez konieczności modyfikowania pozostałych danych w formacie JSON. Zobacz przykład: "set %1 to %2" (brak zastępczych danych wejściowych) i "put %2 in %1" (dodano fikcyjne dane wejściowe) wcześniej na tej stronie.

implicitAlign0

W rzadkich przypadkach automatycznie tworzone fikcyjne dane wejściowe muszą być wyrównane do "RIGHT" lub "CENTRE". Jeśli nie podasz żadnej wartości, wartością domyślną jest "LEFT".

W przykładzie poniżej message0 ma wartość "send email to %1 subject %2 secure %3" a Blockly automatycznie dodaje fikcyjne dane wejściowe w trzecim wierszu. Ustawienie Od implicitAlign0 do "RIGHT" wymusza wyrównanie tego wiersza do prawej strony. Ten wyrównanie ma zastosowanie do wszystkich danych wejściowych, które nie są jawnie zdefiniowane w pliku JSON definicja bloku, w tym dane wejściowe w końcowych wierszach, które zastępują znaki nowego wiersza ('\n') w wiadomości. Istnieje też wycofana właściwość lastDummyAlign0 działa tak samo jak implicitAlign0.

Przy projektowaniu bloków w zapisie RTL (język arabski i hebrajski) bloki lewo i prawo są odwrócone. Dzięki temu funkcja "RIGHT" wyrówna pola do lewej.

message1, args1, implicitAlign1

Niektóre bryły są naturalnie podzielone na co najmniej dwie osobne części. Weźmy pod uwagę blok powtarzany z 2 wierszami:

Jeśli ten blok został opisany w pojedynczej wiadomości, właściwość message0 będzie "repeat %1 times %2 do %3". Ten tekst jest niezręczny dla tłumacza, trudno jest wyjaśnić, co oznacza zastąpienie %2. Przykładowy %2 w przypadku niektórych języków może nawet nie być pożądane. Może być ich wiele które chcą udostępnić tekst drugiego wiersza. Lepsze podejście jest przeznaczony do użycia w formacie JSON więcej niż jednej wiadomości i kilku właściwości argumentów:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

Możesz zdefiniować dowolną liczbę właściwości message, args i implicitAlign w formacie JSON, zaczynając od 0 i zdobywając po kolei kolejne wartości. Pamiętaj, że Block Factory nie jest w stanie podzielić wiadomości na kilka części, jest bardzo proste.

Dane wejściowe i pola w JavaScripcie

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

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

Każda metoda dołączania może przyjąć ciąg identyfikatora używany przez generatory kodu. Przykładowy a dane wejściowe wiersza końcowego rzadko wymagają odwołania, a identyfikator jest zwykle pozostawiany nieskonfigurowana.

JavaScript API zawiera również ogólną metodę appendInput dołączania niestandardowych danych wejściowych. Pamiętaj, że w tym przypadku identyfikator powinien mogą być przekazywane bezpośrednio do konstruktora niestandardowych danych wejściowych.

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

Wszystkie metody appendInput (ogólne i nieogólne) zwracają błąd Obiekt wejściowy, dzięki czemu można je dodatkowo skonfigurować za pomocą łańcucha metod. OK to 3 wbudowane metody konfigurowania danych wejściowych.

setCheck

JavaScript

input.setCheck('Number');

Ta opcjonalna funkcja służy do sprawdzania typu podłączonych wejść. Jeśli podano argumentu o wartości null, czyli domyślnym, to dane wejściowe można połączyć z dowolnym blokiem. Zobacz Sprawdzanie typu, aby dowiedzieć się więcej.

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

Ta opcjonalna funkcja służy do wyrównywania pól (patrz poniżej). Są trzy wartości autoopisowe, które mogą być przekazywane jako argument do tej funkcji: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT i Blockly.inputs.Align.CENTER

Przy projektowaniu bloków w zapisie RTL (język arabski i hebrajski) bloki lewo i prawo są odwrócone. Dzięki temu funkcja Blockly.inputs.Align.RIGHT wyrówna pola do lewej.

appendField

Gdy dane wejściowe zostaną utworzone i dołączone do bloku za pomocą funkcji appendInput, może opcjonalnie dołączyć do danych wejściowych dowolną liczbę pól. Te pola są często używane jako etykiety opisujące przeznaczenie poszczególnych danych wejściowych.

JavaScript

input.appendField('hello');

Najprostszym elementem pola jest tekst. Zgodnie z konwencją Blockly'ego wszystkie tekst małymi literami, z wyjątkiem nazw własnych (np. Google, SQL);

Wiersz wejściowy może zawierać dowolną liczbę elementów pól. Wiele: appendField można połączyć wywołania w kilka, aby skutecznie dodać kilka pól do tego samego wiersz wejściowy.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

Wywołanie appendField('hello') jest w rzeczywistości skrótem do użycia objaśniającego Konstruktor FieldLabel: appendField(new Blockly.FieldLabel('hello')). Jedyne, kiedy można użyć konstruktora, to określenie klasy tak, by styl tekstu mógł być uzależniony od reguły CSS.

Wbudowana a zewnętrzna

Blokowane dane wejściowe mogą być renderowane jako zewnętrzne lub wewnętrzne.

Definicja bloku może zawierać opcjonalną wartość logiczną określającą, czy dane wejściowe są wbudowane, czy nie. Jeśli ustawiona jest wartość false, wszystkie wpisane wartości będą zewnętrzne (np. blok po lewej stronie). Jeśli true, wszystkie wpisane wartości będą wbudowane (np. po prawej stronie powyżej).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

Jeśli tryb nie zostanie określony, Blockly użyje pewnych wartości heurystycznych, aby odgadnąć, który tryb najlepsze wyniki. Zakładając, że Blockly dokona właściwego wyboru i pozostawi to pole niezdefiniowane jest lepsze, ponieważ tłumaczenia na inne języki mogą automatycznie różne tryby. Zobacz przykładowy kod JSON "set %1 to %2" (zewnętrzne dane wejściowe) i "put %2 in %1" (wbudowane dane wejściowe) wcześniej na tej stronie.

Jeśli dane wejściowe bloku są małe, np. liczby, użyj wbudowanych danych wejściowych. Użytkownik może przełączyć tę opcję w menu kontekstowym, jeśli collapse jest włączona (jeśli zestaw narzędzi zawiera kategorie, domyślna wartość to prawda).

Pola

Pola definiują większość elementów interfejsu w obrębie bloku. Są to między innymi: etykiety, obrazy i dane wejściowe dla dane literal takich jak ciągi tekstowe i liczby. Najprostszym przykładem jest blok math_number, który korzysta z field_input, by umożliwić użytkownikowi wpisanie liczby.

Pola są dodawane do bloku za pomocą atrybutu appendField.

Blockly ma wiele wbudowanych pól, takich jak pola do wprowadzania tekstu, selektory kolorów, i obrazów. Możesz też tworzyć własne pola.

→ Więcej informacji o polach wbudowanych.

→ Więcej informacji o tworzeniu pól niestandardowych.

Ikony

Ikony definiują elementy interfejsu na bloku, które wydzielają słowo „meta” informacje na temat blokować.

Ikony są dodawane do bloku za pomocą metody addIcon.

Blockly ma wiele wbudowanych ikon, w tym ikony komentarzy i ostrzeżeń. Możesz też tworzyć własne ikony.

→ Więcej informacji o tworzeniu ikon niestandardowych.

Etykietki

Etykietki oferują natychmiastową pomoc, gdy użytkownik najedzie kursorem na blok. Jeśli tekst będzie długi, zostanie automatycznie zawinięty.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

W interfejsie JavaScript API etykietki można też zdefiniować jako funkcję, a nie statycznego ciągu znaków. Pozwala to uzyskać dynamiczną pomoc. math_arithmetic: przykład etykietki, która zmienia się w zależności od opcji menu wybrano.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

Przy użyciu interfejsu JavaScript API bloki mogą określać funkcję zamiast statycznego string, który zwraca ciąg etykietki. Umożliwia to korzystanie z dynamicznych etykietek. Przykład znajdziesz w sekcji math_arithmetic.

Dostosowywanie

Możesz również dostosować wygląd etykietek, stosując renderowanie niestandardowe . Utwórz funkcję, która akceptuje 2 parametry:

  • element <div>, w którym będzie renderowana treść.
  • element, nad którym znajduje się kursor myszy, etykietka dla

W treści funkcji możesz wyrenderować dowolną treść w div. Aby zdefiniować ciąg etykietki na bryle najeżdżanej kursorem, wywołaj Blockly.Tooltip.getTooltipOfObject(element);, gdzie element to drugi parametr powyżej.

Na koniec zarejestruj tę funkcję, aby Blockly mogła ją wywołać w odpowiednim momencie:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Na przykład zobacz Wersja demonstracyjna niestandardowych etykietek.

URL pomocy

Z blokadami może być powiązana strona pomocy. Ta funkcja jest dostępna dla użytkowników aplikacji Blockly for Web, klikając prawym przyciskiem myszy blok i wybierając „Pomoc” w menu kontekstowym. Jeśli ta wartość to null, menu będzie wyszarzone. na zewnątrz.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

Przy użyciu interfejsu JavaScript API bloki mogą określać funkcję zamiast statycznego który zwraca ciąg adresu URL, umożliwiając dynamiczną pomoc.

Zmień detektory i walidatory

Blokady mogą mieć funkcje detektora zmian, które są wywoływane przy każdej zmianie w (w tym te niezwiązane z blokiem). Są one używane przede wszystkim do: umieścić tekst ostrzeżenia o blokadzie lub podobne powiadomienie użytkownika poza obszar roboczy.

Funkcja jest dodawana przez wywołanie funkcji setOnChange za pomocą funkcji. Można to zrobić podczas inicjowania lub za pomocą rozszerzenia JSON, jeśli zamierzasz go użyć na wszystkich platformach.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

System wywołuje funkcję, przekazując w parametrze zmień zdarzenie. Element this w funkcji odnosi się do instancji bloku.

Ponieważ funkcja jest wywoływana przy każdej zmianie, programiści powinni upewnić się, słuchawka szybko się rusza. Należy też uważać na zmiany w obszarze roboczym które mogą być przesyłane kaskadowo lub w pętli do słuchacza.

Zobacz controls_flow_statements, logic_compare i procedures_ifreturn bloki kodu.

Pamiętaj, że pola możliwe do edytowania mają własne detektory zdarzeń do weryfikacji danych wejściowych i powodują efekty uboczne.

Mutator

Mutatory umożliwiają zaawansowanym blokom zmianę kształtu, głównie dzięki użytkownicy otwierają okno, aby dodać, usunąć lub zmienić kolejność komponentów. Mutatory mogą być dodano w formacie JSON za pomocą klucza mutator.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

Konfiguracja na blok

Instancje blokowe mają szereg właściwości, które określają sposób ich działania użytkownika. Można ich użyć do ograniczenia obszaru roboczego, aby odzwierciedlić określone właściwości domeny (np. istnieje dokładnie jedno zdarzenie „start”) lub wysiłek użytkownika (np. samouczek).

Stan, który można usunąć

block.setDeletable(false);

Jeśli zasada ma wartość Fałsz, użytkownik nie może usunąć blokady. Domyślne blokowanie które można usunąć w edytowalnym obszarze roboczym.

Wszystkie blokady (nawet te, których nie można wybrać) mogą być usuwane automatycznie:

block.dispose();

Stan z możliwością edycji

block.setEditable(false);

Jeśli zasada ma wartość Fałsz, użytkownik nie może zmieniać pól blokady. (np. menu i metody wprowadzania tekstu). Blokady są domyślnie dostępne do edycji w przypadku obszar roboczy.

Stan ruchomy

block.setMovable(false);

Jeśli zasada ma wartość Fałsz, użytkownik nie może bezpośrednio przenieść bloku. An Nie można odłączyć bloku nieruchomego, który jest elementem podrzędnym innego bloku, ale zostanie ona przesunięta razem z elementem nadrzędnym, jeśli zostanie przesunięty. Bloki domyślnie przesuwa się w edytowalnym obszarze roboczym.

Każdy blok (nawet nieruchomy) może być przenoszony automatycznie po obszar roboczy.

block.moveBy(dx, dy)

Położenie początkowe bryły w obszarze roboczym to domyślnie (0, 0).

Zablokuj dane

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

Dane to opcjonalny i dowolny ciąg znaków dołączony do bloku. Gdy jest zserializowany ciąg danych, który jest z nim zserializowany. Obejmuje to przypadki, gdy: blok został zduplikowany lub skopiowany/wklejony.

Często jest to używane do powiązania bloku z zasobem zewnętrznym.

Dane serializowane do formatu JSON są przechowywane w bloku jako właściwość najwyższego poziomu:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

W przypadku serializacji do pliku XML (starego systemu serializacji lodowej) ciąg danych jest przechowywana w tagu <data></data> w bloku:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

Zniszczenie

Bloki mają zaczep destroy, który jest wywoływany po usunięciu z sekcji obszar roboczy. Można go użyć do zniszczenia wszelkich bazowych modeli danych/zewnętrznych powiązane z blokiem zasoby, które nie są już potrzebne.

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

Metoda destroy jest wywoływana po usunięciu elementu nadrzędnego bloku, ale przed usunięciem jego elementów podrzędnych ani pól.

Menu kontekstowe

Domyślnie bloki mają menu kontekstowe, które można kliknąć prawym przyciskiem myszy na przykład dodawać komentarze lub duplikować bloki.

Aby wyłączyć menu kontekstowe pojedynczej blokady, wykonaj następujące czynności:

block.contextMenu = false;

Możesz też dostosować opcje widoczne w menu. Aby dostosować menu dla wszystkich bloków, zapoznaj się z dokumentacji menu kontekstowych. Aby dostosować menu dla pojedynczej blokady, możesz zaimplementować customContextMenu Ta funkcja pobiera tablicę opcji menu oraz zmienia je, co oznacza, że możesz zarówno dodawać, jak i usuwać elementy.

Każda opcja menu to obiekt z 3 właściwościami:

  • text to wyświetlany tekst.
  • enabled to wartość logiczna. Gdy ta opcja jest wyłączona, jest wyświetlana na szaro tekstu.
  • callback to funkcja, która ma zostać wywołana po kliknięciu tej opcji.