Blockly definiuje wiele standardowych bloków, ale większość aplikacji musi zdefiniować i zaimplementować co najmniej kilka bloków odpowiednich dla domeny.
Bloki składają się z 3 komponentów:
- Obiekt z definicją bloków: definiuje wygląd i zachowanie bryły, w tym tekst, kolor, pola i połączenia.
- Dokumentacja w zestawie narzędzi: odwołanie do typu bloku w pliku XML zestawu narzędzi, dzięki któremu użytkownicy mogą dodać ten blok do obszaru roboczego.
- Funkcja generatora: generuje ciąg znaków kodu dla tego bloku. Jest zawsze napisany w języku JavaScript nawet wtedy, gdy językiem docelowym nie jest JavaScript.
Definicja blokowania
Blockly w internecie wczytuje Bloki za pomocą plików skryptów. Katalog blocks/
zawiera kilka takich przykładów bloków standardowych. Zakładając, że bloki nie pasują do dotychczasowych kategorii, utwórz nowy plik JavaScript. Ten nowy plik JavaScript musi zostać umieszczony na liście tagów <script ...>
w pliku HTML edytora.
Typowa definicja bloku wygląda tak:
JSON
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"
});
}
};
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');
}
};
string_length
: to nazwa typu bloku. Wszystkie bloki mają tę samą przestrzeń nazw, więc dobrze jest użyć nazwy składającej się z kategorii (w tym przypadkustring
), po której następuje funkcja bloku (w tym przypadkulength
).init
: ta funkcja określa wygląd i sposób działania bloku.
Definiuje to następujący blok:
Szczegółowe informacje o definicjach bloków znajdziesz w sekcji Definiowanie bloków.
Tablica JSON
Bloki bloków można zdefiniować jednocześnie przy użyciu tablicy definicji bloków 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}"
}
]);
Dodaj dokumentację zestawu narzędzi
Po zdefiniowaniu bloku użyj nazwy typu, aby odwołać się do 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 Zestaw narzędzi.
Dodaj generator kodów blokowych
Na koniec, aby przekształcić blok w kod, połącz go z funkcją generatora. Generatory są dostosowane do żądanego języka wyjściowego, ale standardowe generatory zwykle przyjmują 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];
};
Funkcja generatora wykorzystuje w celu przetworzenia odniesienie do bloku. renderuje dane wejściowe (dane wejściowe VALUE
powyżej) w ciągach kodu, a potem łączy je w większe wyrażenie.
→ Więcej informacji o generatorach kodów blokowych...