Sebbene Blockly definisca una serie di blocchi standard, la maggior parte delle applicazioni deve definire e implementare almeno alcuni blocchi pertinenti al dominio.
I blocchi sono composti da tre componenti:
- Oggetto di definizione del blocco: definisce l'aspetto e il comportamento di un blocco, inclusi testo, colore, campi e connessioni.
- Riferimento alla cassetta degli attrezzi: un riferimento al tipo di blocco nel file XML della cassetta degli attrezzi, in modo che gli utenti possano aggiungerlo allo spazio di lavoro.
- Funzione generatore: genera la stringa di codice per questo blocco. È sempre scritte in JavaScript, anche se la lingua di destinazione non è JavaScript.
Definizione blocco
Blockly per il Web carica Blocks tramite file di script. La directory blocks/ include diversi esempi di questo tipo per i blocchi standard. Presupporre i blocchi
non rientrano nelle categorie esistenti, crea un nuovo file JavaScript. Questo nuovo
file JavaScript deve essere incluso nell'elenco dei tag <script ...> nel
file HTML dell'editor.
Una tipica definizione di blocco ha il seguente aspetto:
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: questo è il nome del tipo di blocco. Poiché tutti i blocchi condividono lo stesso spazio dei nomi, è buona norma utilizzare un nome costituito dalla tua categoria (in questo casostring) seguito dalla funzione del blocco (in questo casolength).init: questa funzione definisce l'aspetto del blocco.
In questo modo viene definito il seguente blocco:
I dettagli delle definizioni dei blocchi sono disponibili in Definire i blocchi.
Array JSON
È possibile definire più blocchi contemporaneamente utilizzando un array di definizioni di blocchi 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}"
}
]);
Aggiungere un riferimento alla cassetta degli attrezzi
Una volta definito, utilizza il nome del tipo per fare riferimento al blocco alla casella degli strumenti:
<xml id="toolbox" style="display: none">
<category name="Text">
<block type="string_length"></block>
</category>
...
</xml>
Per ulteriori dettagli, consulta la guida della cassetta degli attrezzi.
Aggiungi generatore di codice blocco
Infine, per trasformare il blocco in codice, associalo a un generatore personalizzata. I generatori sono specifici del linguaggio di output desiderato, solitamente i generatori standard assumono il seguente formato:
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];
};
La funzione generatore prende un riferimento al blocco per l'elaborazione. it
esegue il rendering degli input (l'input VALUE, sopra) in stringhe di codice, quindi
le concatena in un'espressione più grande.
→ Scopri di più sui generatori di codice blocco…