Cada cambio en el lugar de trabajo activa un evento. Estos eventos describen por completo el estado anterior y posterior de cada cambio.
Cómo escuchar eventos desde el espacio de trabajo
Los espacios de trabajo tienen métodos addChangeListener y removeChangeListener que se pueden usar para escuchar el flujo de eventos. Un ejemplo es la generación de código en tiempo real.
Otro ejemplo es la demostración del límite máximo de bloques.
Como suele ser el caso, a ninguno de estos dos ejemplos le importa cuál fue el
evento activador. Solo observan el estado actual del espacio de trabajo.
Un objeto de escucha de eventos más sofisticado analizaría el evento activador. En el siguiente ejemplo, se detecta cuando el usuario crea su primer comentario, emite una alerta y, luego, deja de escuchar para que no se activen más alertas.
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);
Para escuchar cualquier evento que ocurra dentro de un menú flotante, se puede agregar un objeto de escucha al espacio de trabajo del menú flotante.
var flyoutWorkspace = yourWorkspace.getFlyout().getWorkspace();
flyoutWorkspace.addChangeListener(onFirstComment);
Cómo escuchar eventos desde bloques
Los bloques pueden tener funciones de objeto de escucha de cambios a las que se llama en cualquier cambio en el espacio de trabajo (incluidos los que no están relacionados con el bloque). A menudo, se usan para establecer el texto de advertencia del bloqueo o una notificación similar para el usuario fuera del espacio de trabajo.
Para agregar la función, llama a Block.setOnChange con una función y puedes hacerlo durante la inicialización o a través de una extensión JSON si planeas usarla en todas las plataformas.
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.');
}
});
}
}
También puedes establecer la propiedad onchange directamente en el bloque:
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.');
}
};
}
}
El sistema llama a la función y pasa el evento de cambio. Dentro de la función, this hace referencia a la instancia del bloque.
Debido a que se llama a la función en cualquier cambio, si se usa, los desarrolladores deben asegurarse de que el objeto de escucha se ejecute rápidamente. También se debe tener cuidado con los cambios en el espacio de trabajo que podrían generar un bucle o una cascada en el objeto de escucha.
Consulta los bloques controls_flow_statements, logic_compare y procedures_ifreturn para ver ejemplos.
Ten en cuenta que los campos editables tienen sus propios objetos de escucha de eventos para la validación de entradas y para causar efectos secundarios.
Tipos de eventos
Consulta la documentación de referencia para obtener información sobre eventos individuales.
Demostración
Para ver un ejemplo de lo que puedes hacer con los eventos, consulta la demo de espejo. Esta demostración tiene dos espacios de trabajo de Blockly que se mantienen sincronizados con eventos.