Le definizioni dei blocchi descrivono l'aspetto e il comportamento di un blocco, inclusi il testo, il colore, la forma e gli altri blocchi a cui può collegarsi.
Formato JSON e API JavaScript a confronto
Blockly ha due modi per definire i blocchi: oggetti JSON e funzioni JavaScript. Il formato JSON è progettato per semplificare il processo di localizzazione durante lo sviluppo per lingue con diversi ordinamenti delle parole. Il formato JSON è il metodo preferito per definire i blocchi.
Tuttavia, il formato JSON non è in grado di definire direttamente funzionalità avanzate come mutatori o convalidatori. Devono essere scritti in JavaScript, generalmente come estensioni.
Le app che utilizzano l'implementazione JavaScript originale di Blockly possono anche scrivere definizioni di blocco direttamente nelle chiamate delle funzioni dell'API Blockly di livello inferiore, come mostrato nei vari esempi di JavaScript riportati di seguito.
JSON
Blockly.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');
}
};
La funzione init crea la forma del blocco. Nel contesto di questa funzione, la parola chiave this è il blocco effettivo che viene creato.
Entrambi gli esempi caricano lo stesso blocco "string_length".
Sul Web, il formato JSON viene caricato utilizzando la funzione initJson.
Ciò consente anche di combinare i due formati nelle pagine web Blockly. Quando possibile, ti consigliamo di definire il blocco con JSON e di utilizzare JavaScript solo per le parti delle definizioni del blocco non supportate da JSON.
Di seguito è riportato un esempio di un blocco definito prevalentemente mediante JSON, ma esteso utilizzando l'API JavaScript per presentare una descrizione comando dinamica.
JavaScript
var mathChangeJson = {
"message0": "change %1 by %2",
"args0": [
{"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
{"type": "input_value", "name": "DELTA", "check": "Number"}
],
"previousStatement": null,
"nextStatement": null,
"colour": 230
};
Blockly.Blocks['math_change'] = {
init: function() {
this.jsonInit(mathChangeJson);
// Assign 'this' to a variable for use in the tooltip closure below.
var thisBlock = this;
this.setTooltip(function() {
return 'Add a number to variable "%1".'.replace('%1',
thisBlock.getFieldValue('VAR'));
});
}
};
Colore blocco
Il colore principale di un blocco è definito dalla proprietà JSON colour, dalla funzione block.setColour(..) oppure utilizzando i temi e definendo uno stile di blocco.
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Per ulteriori dettagli, consulta la guida ai colori dei blocchi.
Connessioni dell'istruzione
Gli utenti possono creare sequenze di blocchi utilizzando i connettori nextStatement e previousStatement. Nel layout standard di Blockly, queste connessioni
si trovano in alto e in basso, con i blocchi impilati verticalmente.
Un blocco con un connettore precedente non può avere un connettore di output e viceversa. Il termine blocco di istruzioni fa riferimento a un blocco senza output di valore. In genere, un blocco di istruzioni ha una connessione precedente e una successiva.
Le connessioni nextStatement e previousStatement possono essere
digitate,
ma questa funzionalità non viene utilizzata dai blocchi standard.
Prossima connessione
Crea un punto nella parte inferiore del blocco, in modo che altre istruzioni possano essere impilate sotto. Un blocco con una connessione successiva ma nessuna connessione precedente di solito rappresenta un evento e può essere configurato per il rendering con un cappello.
JSON
Senza tipo:
{
...,
"nextStatement": null,
}
Tipo di parola (raro):
{
"nextStatement": "Action",
...
}
JavaScript
Senza tipo:
this.setNextStatement(true); // false implies no next connector, the default
Tipo (raro):
this.setNextStatement(true, 'Action');
Connessione precedente
Crea un'incisione nella parte superiore del blocco, in modo da poterlo collegare come uno stack di istruzioni.
I blocchi con una connessione precedente non possono avere una connessione di output.
JSON
Senza tipo:
{
...,
"previousStatement": null,
}
Tipo di parola (raro):
{
"previousStatement": "Action",
...
}
JavaScript
Senza tipo:
this.setPreviousStatement(true); // false implies no previous connector, the default
Tipo (raro):
this.setPreviousStatement(true, 'Action');
Uscita del blocco
Un blocco può avere un unico output, rappresentato come un connettore seghetto maschio sul bordo principale. Gli output si connettono agli input di valori. I blocchi con un output sono generalmente denominati blocchi di valori.
JSON
Senza tipo:
{
// ...,
"output": null,
}
Digitazione:
{
// ...,
"output": "Number",
}
JavaScript
Senza tipo:
init: function() {
// ...
this.setOutput(true);
}
Digitazione:
init: function() {
// ...
this.setOutput(true, 'Number');
}
I blocchi con un connettore di output non possono avere anche un notch di istruzione precedente.
Blocca ingressi
Un blocco ha uno o più input e ciascuno ha una sequenza di campi e potrebbe terminare con una connessione. Esistono diversi tipi di input integrati.
- Input valore: si collega a una connessione di output di un blocco di valori. Un blocco
math_arithmetic(addizione, sottrazione) è un esempio di blocco con due input di valori. - Input di dichiarazione: si connette a una connessione precedente di un blocco di istruzioni. La sezione nidificata di un ciclo many è un esempio di input di un'istruzione.
- Input fittizio: non ha una connessione a blocchi. Agisce come una nuova riga quando il blocco è configurato per usare input di valori esterni.
- Input della riga finale: non ha una connessione a blocchi e si comporta sempre come una nuova riga.
Puoi anche creare un input personalizzato per supportare il rendering personalizzato.
Il formato JSON e l'API JavaScript utilizzano modelli leggermente diversi per descrivere gli input.
Input e campi in JSON
I blocchi JSON definiti sono strutturati come una sequenza di stringhe di messaggi interpolati ( message0, message1, ...), in cui ogni token di interpolazione (%1, %2, ...) è un campo o un'estremità di input (quindi viene visualizzato il connettore di input all'interno del messaggio) nell'array argsN JSON corrispondente. Lo scopo di questo formato
è facilitare l'internazionalizzazione.
JSON
{
"message0": "set %1 to %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item",
"variableTypes": [""]
},
{
"type": "input_value",
"name": "VALUE"
}
]
}
I token di interpolazione devono corrispondere completamente all'array args0: nessun duplicato,
nessuna omissione. I token possono essere presenti in qualsiasi ordine, il che consente a lingue diverse di modificare il layout del blocco.
Il testo su entrambi i lati di un token di interpolazione è tagliato per spazi vuoti.
Il testo che utilizza il carattere % (ad esempio quando si fa riferimento a una percentuale) deve usare %% in modo che non venga interpretato come un token di interpolazione.
L'ordine degli argomenti e i tipi di argomenti definiscono la forma del blocco. La modifica di una di queste stringhe può comportare la modifica completa del layout del blocco.
Ciò è particolarmente importante nelle lingue che hanno
parole in un ordine diverso dall'inglese. Considera un linguaggio ipotetico in cui "set %1 to %2" (come usato
nell'esempio sopra) deve essere invertito per dire "put %2 in %1". Se modifichi
questa stringa (e lascia intatto il resto del JSON)
viene visualizzato il blocco seguente:
Blockly ha modificato automaticamente l'ordine dei campi, ha creato un input fittizio e ha effettuato il passaggio da input esterni a interni.
Blockly sostituisce automaticamente anche qualsiasi carattere di nuova riga (\n) nella stringa del messaggio con un input della riga finale.
JSON
{
"message0": "set %1\nto %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item",
"variableTypes": [""]
},
{
"type": "input_value",
"name": "VALUE"
}
]
}
Arg
Ogni stringa di messaggio è abbinata a un array args dello stesso numero. Ad
esempio, message0 va con args0. I token di interpolazione (%1, %2, ...) si riferiscono agli elementi dell'array args. Ogni oggetto ha una stringa type. I restanti parametri variano in base al tipo:
Puoi anche definire campi personalizzati e input personalizzati e trasmetterli come argomenti.
Ogni oggetto può avere anche un campo alt. Nel caso in cui Blockly non riconosca type dell'oggetto, al suo posto viene utilizzato l'oggetto alt. Ad
esempio, se un nuovo campo denominato field_time viene aggiunto a Blockly, i blocchi che utilizzano questo campo potrebbero utilizzare alt per definire un field_input di riserva per le versioni precedenti
di Blockly:
JSON
{
"message0": "sound alarm at %1",
"args0": [
{
"type": "field_time",
"name": "TEMPO",
"hour": 9,
"minutes": 0,
"alt":
{
"type": "field_input",
"name": "TEMPOTEXT",
"text": "9:00"
}
}
]
}
Un oggetto alt può avere il proprio oggetto alt, consentendo il concatenamento.
Essenzialmente, se Blockly non riesce a creare un oggetto nell'array args0 (dopo aver tentato un oggetto alt), l'oggetto viene semplicemente ignorato.
Se la stringa message termina con testo o campi non contenuti da un input, viene aggiunto automaticamente un input fittizio alla fine del blocco.
Pertanto, se l'ultimo input su un blocco è un input fittizio, può essere omesso dall'array args e non è necessaria l'interpolazione in message. L'aggiunta automatica di un input fittizio di tailing consente ai traduttori di modificare message senza dover modificare il resto del JSON. Vedi l'esempio di "set %1 to %2" (nessun input fittizio) e "put %2 in %1" (input fittizio aggiunto) in precedenza su questa pagina.
implicitAlign0
In rari casi, l'input fittizio finale creato automaticamente deve essere allineato
a "RIGHT" o "CENTRE". Se non specificato, il valore predefinito è "LEFT".
Nell'esempio seguente, message0 è "send email to %1 subject %2 secure %3"
e Blockly aggiunge automaticamente un input fittizio per la terza riga. L'impostazione di implicitAlign0 su "RIGHT" impone l'allineamento a destra della riga. Questo allineamento si applica a tutti gli input non esplicitamente definiti nella definizione del blocco JSON, inclusi gli input della riga finale che sostituiscono i caratteri della nuova riga ('\n') nel messaggio. Esiste anche la proprietà deprecata lastDummyAlign0
che ha lo stesso comportamento di implicitAlign0.
Quando si progettano blocchi per RTL (arabo ed ebraico), sinistra e destra sono invertite.
In questo modo, "RIGHT" allineerebbe i campi a sinistra.
message1, args1 e implicitAlign1
Alcuni blocchi sono naturalmente divisi in due o più parti separate. Considera questo blocco ripetuto che ha due righe:
Se questo blocco venisse descritto con un singolo messaggio, la proprietà message0
sarebbe "repeat %1 times %2 do %3". Questa stringa è imbarazzante per un traduttore,
è difficile spiegare il significato della sostituzione %2. Inoltre, l'input fittizio %2 potrebbe non essere desiderato in alcune lingue. Potrebbero esserci più blocchi che vogliono condividere il testo della seconda riga. Per JSON utilizzi più di un messaggio e proprietà argomenti:
JSON
{
"type": "controls_repeat_ext",
"message0": "repeat %1 times",
"args0": [
{"type": "input_value", "name": "TIMES", "check": "Number"}
],
"message1": "do %1",
"args1": [
{"type": "input_statement", "name": "DO"}
],
"previousStatement": null,
"nextStatement": null,
"colour": 120
}
Nel formato JSON può essere definito qualsiasi numero di proprietà message, args e implicitAlign, a partire da 0 e incrementando in sequenza. Tieni presente che Block Factory non è in grado di suddividere i messaggi in più parti, ma farlo manualmente è semplice.
Input e campi in JavaScript
L'API JavaScript include un metodo append per ogni tipo di input:
JavaScript
this.appendEndRowInput()
.appendField('for each')
.appendField('item')
.appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
.setCheck('Array')
.setAlign(Blockly.inputs.Align.RIGHT)
.appendField('in list');
this.appendStatementInput('DO')
.appendField('do');
this.appendDummyInput()
.appendField('end');
Ogni metodo di accodamento può utilizzare una stringa identificatore, utilizzata dai generatori di codice. Gli input fittizi e finali della riga raramente richiedono riferimenti e di solito l'identificatore non viene impostato.
L'API JavaScript include anche un metodo appendInput generico per aggiungere
input personalizzati. Tieni presente che in questo caso l'identificatore deve essere passato direttamente al costruttore dell'input personalizzato.
JavaScript
this.appendInput(new MyCustomInput('INPUT_NAME'))
.appendField('an example label')
Tutti i metodi appendInput (generici e non generici) restituiscono
l'oggetto di input in modo che possa essere ulteriormente configurato utilizzando il concatenamento dei metodi. Esistono tre metodi integrati utilizzati per configurare gli input.
setCheck
JavaScript
input.setCheck('Number');
Questa funzione facoltativa viene utilizzata per il controllo del tipo degli ingressi collegati. Se viene fornito un argomento nullo, il valore predefinito, questo input può essere collegato a qualsiasi blocco. Per i dettagli, consulta la sezione Controlli del tipo.
setAlign
JavaScript
input.setAlign(Blockly.inputs.Align.RIGHT);
Questa funzione facoltativa viene utilizzata per allineare i campi (vedi di seguito). Esistono tre valori autodescrittivi che possono essere passati come argomento a questa funzione: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT e Blockly.inputs.Align.CENTER.
Quando si progettano blocchi per RTL (arabo ed ebraico), sinistra e destra sono invertite.
In questo modo, Blockly.inputs.Align.RIGHT allineerebbe i campi a sinistra.
appendField
Dopo che un input è stato creato e aggiunto a un blocco con appendInput, è possibile aggiungere facoltativamente un numero qualsiasi di campi all'input. Questi campi vengono spesso utilizzati come etichette per descrivere lo scopo di ciascun input.
JavaScript
input.appendField('hello');
L'elemento campo più semplice è testo. La convenzione di Blockly prevede di utilizzare tutto il testo in minuscolo, ad eccezione dei nomi propri (ad es. Google, SQL).
Una riga di input può contenere un numero illimitato di elementi di campo. Più chiamate appendField
possono essere concatenate per aggiungere in modo efficiente diversi campi alla stessa
riga di input.
JavaScript
input.appendField('hello')
.appendField(new Blockly.FieldLabel('Neil', 'person'));
La chiamata appendField('hello') è in realtà una scorciatoia per l'utilizzo di un costruttore FieldLabel esplicito: appendField(new Blockly.FieldLabel('hello')).
Puoi utilizzare il costruttore solo quando specifichi un nome di classe in modo che il testo possa essere utilizzato con una regola CSS.
In linea o esterna
Gli input a blocchi possono essere visualizzati come esterni o interni.
La definizione del blocco può specificare un valore booleano facoltativo che controlla se gli input sono incorporati o meno. Se false, gli input di valore saranno esterni (ad esempio il blocco sinistro). Se true, tutti i valori inseriti saranno in linea (ad esempio il blocco destro sopra).
JSON
{
// ...,
"inputsInline": true
}
JavaScript
init: function() {
// ...
this.setInputsInline(true);
}
Se il criterio non viene definito, Blockly utilizzerà alcune euristiche per indovinare la modalità
migliore. Supponendo che Blockly faccia la scelta giusta, è preferibile lasciare questo campo indefinito, poiché le traduzioni in lingue diverse possono avere automaticamente modalità diverse. Vedi l'esempio JSON di "set %1 to %2" (input esterni) e "put %2 in %1" (input incorporati) in precedenza in questa pagina.
Utilizza input incorporati quando è probabile che un blocco abbia input piccoli, come i numeri.
L'utente può attivare/disattivare questa opzione tramite il menu contestuale, se la configurazione collapse è abilitata (il valore predefinito è true se la toolbox contiene categorie).
Campi
I campi definiscono la maggior parte degli elementi UI all'interno di un blocco. Questi includono le etichette delle stringhe, le immagini e gli input per i dati letterali come stringhe e numeri. L'esempio più semplice è il blocco math_number, che utilizza un field_input per consentire all'utente di digitare un numero.
I campi vengono aggiunti al blocco utilizzando appendField.
Blockly fornisce una serie di campi integrati, tra cui input di testo, selettori colori e immagini. Puoi anche creare campi personalizzati.
→ Scopri di più sui campi integrati.
→ Scopri di più sulla creazione di campi personalizzati.
Icone
Le icone definiscono gli elementi dell'interfaccia utente in un blocco che mostrano informazioni "meta" sul blocco.
Le icone vengono aggiunte al blocco tramite addIcon.
Blockly fornisce una serie di icone integrate, tra cui icone di commento e icone di avviso. Puoi anche creare le tue icone.
→ Ulteriori informazioni sulla creazione di icone personalizzate.
Descrizioni comandi
Le descrizioni comando offrono un aiuto immediato quando l'utente passa il mouse sopra il blocco. Se il testo è lungo, verrà visualizzato automaticamente a capo.
JSON
{
// ...,
"tooltip": "Tooltip text."
}
JavaScript
init: function() {
this.setTooltip("Tooltip text.");
}
Nell'API JavaScript, le descrizioni comando possono anche essere definite come funzione anziché
stringa statica. Ciò consente un aiuto dinamico. Consulta math_arithmetic per un esempio di descrizione comando che cambia a seconda dell'opzione del menu a discesa selezionata.
JavaScript
Blockly.Blocks['math_arithmetic'] = {
init: function() {
// ...
// Assign 'this' to a variable for use in the tooltip closure below.
var thisBlock = this;
this.setTooltip(function() {
var mode = thisBlock.getFieldValue('OP');
var TOOLTIPS = {
'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
};
return TOOLTIPS[mode];
});
}
};
Utilizzando l'API JavaScript, i blocchi possono specificare una funzione, anziché una stringa statica, che restituisce una stringa della descrizione comando. In questo modo è possibile creare descrizioni comando dinamiche.
Vedi math_arithmetic per un esempio.
Personalizzazione
Puoi anche personalizzare l'aspetto delle descrizioni comando fornendo una funzione di rendering personalizzata. Crea una funzione che accetti due parametri:
- un elemento
<div>in cui eseguirai il rendering dei contenuti - secondo, l'elemento effettivo su cui viene mostrato il mouse e per cui visualizzi la descrizione comando
Nel corpo della funzione, puoi eseguire il rendering di qualsiasi contenuto in div. Per ottenere la stringa della descrizione comando definita sul blocco su cui viene posizionato il mouse, puoi chiamare Blockly.Tooltip.getTooltipOfObject(element);, dove element è il secondo parametro riportato sopra.
Infine, registra questa funzione in modo che Blockly possa chiamarla al momento opportuno:
Blockly.Tooltip.setCustomTooltip(yourFnHere);
Per un esempio, consulta la demo delle descrizioni comando personalizzate.
URL della Guida
Ai blocchi può essere associata una pagina di assistenza. Questa opzione è disponibile per gli utenti di Blockly per il web facendo clic con il tasto destro del mouse sul blocco e selezionando "Guida" dal menu contestuale. Se questo valore è null, il menu sarà in grigio.
JSON
{
// ...,
"helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}
JavaScript
init: function() {
// ...
this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}
Utilizzando l'API JavaScript, i blocchi possono specificare una funzione anziché una stringa statica, che restituisce una stringa URL, consentendo così un aiuto dinamico.
Modifica listener e convalidatori
I blocchi possono avere funzioni listener di modifiche che vengono richiamate per qualsiasi modifica all'area di lavoro (incluse quelle non correlate al blocco). Vengono utilizzati principalmente per impostare il testo di avviso del blocco o una notifica utente simile al di fuori dell'area di lavoro.
La funzione viene aggiunta chiamando setOnChange con una funzione e può essere eseguita durante l'init o tramite un'estensione JSON se prevedi di utilizzarla su tutte le piattaforme.
JSON
{
// ...,
"extensions":["warning_on_change"],
}
Blockly.Extensions.register('warning_on_change', function() {
// Example validation upon block change:
this.setOnChange(function(changeEvent) {
if (this.getInput('NUM').connection.targetBlock()) {
this.setWarningText(null);
} else {
this.setWarningText('Must have an input block.');
}
});
});
JavaScript
Blockly.Blocks['block_type'] = {
init: function() {
// Example validation upon block change:
this.setOnChange(function(changeEvent) {
if (this.getInput('NUM').connection.targetBlock()) {
this.setWarningText(null);
} else {
this.setWarningText('Must have an input block.');
}
});
}
}
Il sistema chiama la funzione, passando l'evento di modifica.
All'interno della funzione, this fa riferimento all'istanza di blocco.
Poiché la funzione viene richiamata a ogni modifica, se utilizzata, gli sviluppatori devono garantire che il listener venga eseguito rapidamente. Diffida anche di eventuali modifiche all'area di lavoro che potrebbero verificarsi a cascata o in loop al listener.
Consulta i blocchi controls_flow_statements, logic_compare e procedures_ifreturn
per vedere gli esempi.
Tieni presente che i campi modificabili hanno i propri listener di eventi per la convalida dell'input e causare effetti collaterali.
Modificatore
I mutatori consentono ai blocchi avanzati di cambiare forma, in particolare quando gli utenti aprono una finestra di dialogo per aggiungere, rimuovere o ridisporre i componenti. I mutatori possono essere aggiunti tramite JSON con la chiave mutator.
JSON
{
// ...,
"mutator":"if_else_mutator"
}
Configurazione per blocco
Le istanze di blocco hanno una serie di proprietà che configurano il loro comportamento nei confronti dell'utente. Questi valori possono essere utilizzati per limitare l'area di lavoro in modo che rifletta determinate proprietà del dominio (ad esempio, è presente esattamente un evento "start") o per concentrare l'attività dell'utente (ad esempio un tutorial).
Stato eliminabile
block.setDeletable(false);
Se viene impostato su false, l'utente non sarà in grado di eliminare il blocco. Blocca per impostazione predefinita da eliminare in un'area di lavoro modificabile.
Qualsiasi blocco (anche non eliminabile) può essere eliminato in modo programmatico:
block.dispose();
Stato modificabile
block.setEditable(false);
Se viene impostato su false, l'utente non può modificare i campi del blocco (ad es. menu a discesa e input di testo). Per impostazione predefinita, i blocchi sono modificabili in un'area di lavoro modificabile.
Stato mobile
block.setMovable(false);
Se viene impostato su false, l'utente non può spostare direttamente il blocco. Un blocco fisso che è un elemento secondario di un altro blocco non può essere scollegato da quel blocco, anche se si sposterà insieme al blocco principale se quest'ultimo viene spostato. Per impostazione predefinita, i blocchi sono spostabili in un'area di lavoro modificabile.
Qualsiasi blocco, anche fisso, può essere spostato in modo programmatico una volta che si trova in un'area di lavoro.
block.moveBy(dx, dy)
Per impostazione predefinita, la posizione iniziale di un blocco in uno spazio di lavoro è (0, 0).
Blocca dati
this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';
"Dati" è una stringa facoltativa e arbitraria collegata al blocco. Quando il blocco viene serializzato, anche la stringa di dati viene serializzata. Sono inclusi i casi in cui il blocco viene duplicato o copiato e incollato.
Spesso viene utilizzato per associare un blocco a una risorsa esterna.
Se serializzati in JSON, i dati vengono archiviati come proprietà di primo livello nel blocco:
{
"type": "my_block",
"data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
// etc..
}
Quando viene serializzata in XML (il vecchio sistema di serializzazione icebox), la stringa di dati viene archiviata in un tag <data></data> all'interno del blocco:
<block type="my_block">
<data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
<!-- etc... -->
</block>
Distruzione
I blocchi hanno un hook destroy, che viene chiamato quando vengono eliminati dall'area di lavoro. Può essere utilizzato per eliminare eventuali modelli dei dati di supporto/risorse esterne associati al blocco che non sono più necessari.
JSON
{
// ...,
"extensions":["destroy"],
}
Blockly.Extensions.registerMixin('destroy', {
destroy: function() {
this.myResource.dispose();
}
});
JavaScript
Blockly.Blocks['block_type'] = {
destroy: function() {
this.myResource.dispose();
}
}
Il metodo destroy viene richiamato dopo l'eliminazione del blocco padre, ma prima che i relativi campi o secondari vengano eliminati.
Menu contestuali
Per impostazione predefinita, i blocchi hanno un menu contestuale che consente agli utenti di eseguire azioni come aggiungere commenti o duplicare blocchi.
Per disattivare il menu contestuale di un singolo blocco, procedi nel seguente modo:
block.contextMenu = false;
Puoi anche personalizzare le opzioni mostrate nel menu. Per personalizzare il menu per tutti i blocchi, consulta la documentazione relativa ai menu contestuali.
Per personalizzare il menu per un singolo blocco, puoi implementare
customContextMenu. Questa funzione prende in carico un array di opzioni di menu e la modifica, il che significa che puoi aggiungere e rimuovere elementi.
Ogni opzione di menu è un oggetto con tre proprietà:
textè il testo visualizzato.enabledè un valore booleano. Quando è disabilitata, l'opzione viene visualizzata ma con testo grigio.callbackè la funzione da chiamare quando si fa clic sull'opzione.