Ogni modifica nello spazio di lavoro attiva un evento. Questi eventi descrivono completamente lo stato prima e dopo di ogni modifica.
Ascolta gli eventi dallo spazio di lavoro
Gli spazi di lavoro dispongono dei metodi addChangeListener e removeChangeListener che possono essere utilizzati per ascoltare lo stream di eventi. Un esempio è la
generazione di codice in tempo reale.
Un altro esempio è la
demo del limite massimo di blocchi.
Come spesso accade, in nessuno di questi due esempi è importante l'evento che ha attivato l'azione. ma semplicemente esaminano lo stato attuale dello spazio di lavoro.
Un listener di eventi più sofisticato esaminerebbe l'evento di attivazione. L'esempio seguente rileva quando l'utente crea il primo commento, emette un avviso e poi interrompe l'ascolto in modo che non vengano attivati ulteriori avvisi.
function onFirstComment(event) {
if (event.type == Blockly.Events.BLOCK_CHANGE &&
event.element == 'comment' &&
!event.oldValue && event.newValue) {
alert('Congratulations on creating your first comment!')
workspace.removeChangeListener(onFirstComment);
}
}
workspace.addChangeListener(onFirstComment);
Per ascoltare gli eventi che si verificano all'interno di un popup, un listener può essere aggiunto allo spazio di lavoro del popup.
var flyoutWorkspace = yourWorkspace.getFlyout().getWorkspace();
flyoutWorkspace.addChangeListener(onFirstComment);
Ascolta gli eventi dai blocchi
I blocchi possono avere funzioni di ascoltatori di modifiche che vengono chiamate a ogni modifica dello spazio di lavoro (incluse quelle non correlate al blocco). Questi vengono spesso utilizzati per impostare il testo dell'avviso del blocco o una notifica utente simile al di fuori dello spazio di lavoro.
La funzione viene aggiunta chiamando Block.setOnChange con una funzione e può essere eseguita durante l'inizializzazione 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.');
}
});
}
}
Puoi anche impostare la proprietà onchange direttamente sul blocco:
JavaScript
Blockly.Blocks['block_type'] = {
init: function() {
// Example validation upon block change:
this.onchange = 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 del blocco.
Poiché la funzione viene chiamata a ogni modifica, se utilizzata, gli sviluppatori devono assicurarsi che l'ascoltatore venga eseguito rapidamente. Inoltre, bisogna fare attenzione alle modifiche apportate allo spazio di lavoro che potrebbero essere applicate in modo ricorsivo o tornare all'ascoltatore.
Per esempi, consulta i blocchi controls_flow_statements, logic_compare e procedures_ifreturn.
Tieni presente che i campi modificabili hanno i propri listener di eventi per la convalida dell'input e causano effetti collaterali.
Tipi di eventi
Per informazioni sui singoli eventi, consulta la documentazione di riferimento.
Demo
Per un esempio delle fantastiche cose che puoi fare con gli eventi, puoi dare un'occhiata alla demo di Mirror. Questa demo ha due aree di lavoro Blockly che vengono mantenute sincronizzate utilizzando gli eventi.