Dodaj blokady niestandardowe

Blockly definiuje liczbę standardowych bloków, jednak większość aplikacji zdefiniować i wdrożyć co najmniej kilka blokad związanych z daną domeną.

Bloki składają się z 3 elementów:

  • Obiekt definicji bloku: definiuje wygląd i działanie bloku, w tym tekst, kolor, pola i połączenia.
  • Odwołania do skrzynki narzędzi: odwołanie do typu bloku w pliku XML skrzynki narzędzi, dzięki któremu użytkownicy mogą dodawać go do obszaru roboczego.
  • Funkcja generatora: generuje ciąg kodu dla tego bloku. Jest on zawsze napisany w języku JavaScript, nawet jeśli język docelowy nie jest nim.

Definicja bloku

Blockly dla ładowania w internecie Blokuje za pomocą plików skryptu. Katalog blocks/ zawiera kilka takich przykładów dla standardowych bloków. Zakładając, że Twoje bloki nie pasują do istniejących kategorii, utwórz nowy plik JavaScript. Ten nowy Plik JavaScript musi znajdować się na liście tagów <script ...> w sekcji w pliku HTML edytora.

Typowa definicja blokady wygląda tak:

JSONJavaScript
Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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"
    });
  }
};
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');
  }
};

  • string_length: nazwa typu bloku. Wszystkie bloki współdzielą w tej samej przestrzeni nazw, dobrze jest użyć nazwy składającej się z kategorii (w w tym przypadku string), po którym następuje funkcja bloku (w tym przypadku length).

  • init: ta funkcja określa wygląd i działanie bloku.

Definiuje to taki blok:

Blok „string_length”.

Szczegółowe informacje o definicjach bloków znajdziesz w sekcji Definiowanie bloków.

Tablica JSON

Można zdefiniować wiele bloków jednocześnie, używając tablicy definicji bloków w formacie JSON.

JSON
Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

Dodawanie odwołania do zestawu narzędzi

Po zdefiniowaniu użyj nazwy typu, aby odwołać się do bloku i zestawu narzędzi:

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

Więcej informacji znajdziesz w przewodniku po Zestawie narzędzi.

Dodaj generator kodu blokowego

Aby przekształcić blok w kod, sparuj go z funkcją generatora. Generatory są specyficzne dla wybranego języka wyjściowego, ale generatory standardowe przyjmują zwykle następujący format:

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

W celu przetworzenia funkcja generatora odwołuje się do bloku. it renderuje dane wejściowe (VALUE, powyżej) w ciągi kodu, a następnie łączy je w większą formę.

→ Więcej informacji o generatorach kodu blokowego...