Una definizione di blocco è un oggetto che definisce un blocco personalizzato. Ad esempio, definisce l'aspetto del blocco (testo, campi, connessioni, colore e così via), nonché il suo comportamento (gestore di eventi a livello di blocco e così via).
Ad esempio, questo blocco:
possono essere definiti in JSON o JavaScript come segue:
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"
}]);
defineBlocksWithJsonArray
crea una definizione di blocco da un oggetto JSON.
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');
}
};
Quando utilizzi JavaScript, crei direttamente la definizione del blocco.
Come funzionano le definizioni dei blocchi
Una definizione di blocco è un mixin contenente proprietà con valori di funzione. Quando viene creata una nuova istanza di un blocco, queste proprietà vengono copiate nel nuovo oggetto blocco. Blockly chiama queste funzioni per richiamare un comportamento personalizzato.
Poiché le funzioni di definizione sono incorporate nell'oggetto blocco:
- La parola chiave
this
nelle funzioni di definizione si riferisce all'oggetto blocco. ovvero può essere utilizzato per accedere ai metodi e alle proprietà pubblici nella classeBlock
(oBlockSvg
).
Blockly definisce un numero ridotto di funzioni che puoi utilizzare per personalizzare i blocchi. Il più comune è init
, che Blockly chiama per inizializzare un blocco e che viene utilizzato per definire l'aspetto del blocco. Per un elenco completo, consulta le proprietà con valori di funzione nelle classi Block
e BlockSvg
.
Queste proprietà formano effettivamente un'interfaccia per le definizioni dei blocchi da
implementare; sono tutte facoltative.
Le definizioni dei blocchi possono anche avere funzioni personalizzate, anche se Blockly non le chiamerà
direttamente. Possono invece essere utilizzati per implementare altre funzioni. Ad esempio, un gestore di eventi a livello di blocco (la proprietà Block.onchange
) potrebbe delegare eventi diversi a funzioni personalizzate diverse.
Come creare definizioni di blocco
Esistono diversi modi per creare definizioni di blocchi:
- Utilizza gli strumenti per sviluppatori di Blockly per definire l'aspetto del blocco. Copia il codice JSON o JavaScript generato nel tuo codice e aggiungi il codice personalizzato in base alle tue esigenze. Per saperne di più, consulta Strumenti per sviluppatori Blockly.
- Trova un blocco simile, copia la sua definizione e modificala in base alle tue esigenze. Per ulteriori informazioni, vedi Modificare le definizioni esistenti.
- Scrivi una definizione di blocco a mano. Per ulteriori informazioni, consulta JSON e JavaScript.