Cada cambio en el espacio de trabajo activa un evento. Estos eventos describen por completo el estado anterior y posterior a cada cambio.
Cómo detectar eventos del 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 suceder, ninguno de estos dos ejemplos se preocupa por el evento que activó la acción. Simplemente observan el estado actual del espacio de trabajo.
Un objeto de escucha de eventos más sofisticado analizaría el evento que activó la acción. En el siguiente ejemplo, se detecta cuando el usuario crea su primer comentario, se emite una alerta y, luego, se detiene la escucha 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 los eventos que ocurren dentro de un menú desplegable, se puede agregar un objeto de escucha al espacio de trabajo del menú desplegable.
var flyoutWorkspace = yourWorkspace.getFlyout().getWorkspace();
flyoutWorkspace.addChangeListener(onFirstComment);
Cómo detectar eventos de bloques
Los bloques pueden tener funciones de escucha de cambios que se llaman ante 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 bloque o una notificación similar para el usuario fuera del espacio de trabajo.
La función se agrega llamando a Block.setOnChange con una función y se puede hacer 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 propagarse o volver al 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 entrada y la generación de 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 las cosas interesantes que puedes hacer con los eventos, consulta la demostración de espejo. En esta demostración, se incluyen dos espacios de trabajo de Blockly que se mantienen sincronizados a través de eventos.