Blokady niestandardowe

Blockly zawiera dużą liczbę wstępnie zdefiniowanych bloków, od funkcji matematycznych po struktury pętli. Jednak większość aplikacji musi definiować i wdrażać niestandardowe bloki dla swojej domeny. Na przykład aplikacja do rysowania może potrzebować bloków do rysowania linii i kół, a aplikacja do robotyki może potrzebować bloków do poruszania ramieniem i manipulacji chwytakiem.

Aby zdefiniować nowy typ bloku i z niego korzystać, musisz mieć:

  • Definicja bloku: określa wygląd i wygląd typu bloku oraz określone zachowania.
  • Generator kodu bloku: generuje ciąg kodu dla bloków tego typu. Jest on zawsze napisany w języku JavaScript, nawet jeśli język docelowy nie jest językiem JavaScript.
  • Odwołania w skrzynce narzędzi: odniesienia do typu bloku w skrzynce narzędzi, dzięki którym użytkownicy mogą dodawać go do obszaru roboczego.

Definicja bloku

Definicja bloku określa wygląd i wygląd bloku, np. tekst, pola, połączenia i kolor. Może też definiować zachowanie dotyczące konkretnego bloku, na przykład konkretny moduł obsługi zdarzeń. Na przykład ten blok:

Blok „string_length”.

można zdefiniować w formacie JSON lub JavaScript w ten sposób:

JSON

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

Więcej informacji o definicjach bloków i ich działaniu znajdziesz w artykule Definicja bloku.

Generatory kodu blokowego

Aby przekształcić blok w kod, musisz utworzyć osobne funkcje generatora dla każdego języka, który chcesz wygenerować. Oto na przykład generator kodu JavaScript:

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

Funkcja generatora przyjmuje blok, który ma być przetworzony, oraz generator języka. Generuje kod dla wszystkich bloków dołączonych do danych wejściowych (takich jak dane wejściowe VALUE w tym przykładzie) i wszystkich pól, a potem konkatenuje otrzymane ciągi tekstowe w większe wyrażenie.

Więcej informacji znajdziesz w artykule o generatorach kodu blokowego.

Informacje o zestawie narzędzi

Po zdefiniowaniu typu bloku odwołuj się do niego w sekcji Toolbox, podając jego nazwę:

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

Więcej informacji znajdziesz w artykule Definiowanie sekcji narzędzi okna wyskakującego lub Definiowanie sekcji narzędzi kategorii.