En primer lugar, en la pantalla donde ponemos los elementos que componen la aplicación, tendremos lo siguiente:
Podemos ver que tendremos los siguientes elementos:
- La imagen del corredor, que podemos personalizar como nosotros queramos.
- 5 etiquetas, una para cada uno de los ceros y una que es el separador entre los valores de minutos y segundos.
- 3 botones, uno para empezar, otro para parar y otro para resetear.
- Un elemento Clock o Reloj.
Una vez definido los elementos de la aplicación pasaremos a definir el comportamiento de los mismos en el Block Editor.
Lo primero será realizar la inicialización de los elementos. Lo haremos mediante el uso de los siguiente bloques:
En ese bloque, que es el primero que se ejecuta al inciar la aplicación, lo único que hacemos es fijar a 0 el valor de las distintas etiquetas (salvo la que contiene los dos puntos).
Seguidamente fijamos el comportamiento para cada uno de los botones.
Al hacer Click en el botón Start habilitamos el reloj y fijamos la frecuencia a 1000 para que dispare un evento de reloj cada segundo.
Al hacer Click sobre el botón Stop simplemente deshabilitamos el reloj. A partir de entonces no disparará ningún evento.
Al hacer Click sobre el botón de Reset volvemos a poner a cero todas las etiquetas. Sí, sé que podría haberlo hecho en un procedimiento y haberlo utilizado al inicializar y al resetear...pero quiero insistir en cada uno de los pasos.
Y finalmente aquello que se ejecutará cuando se dispare el evento de reloj cada segundo.
Aquí mediante el uso de if-else voy modelando el comportamiento de un reloj para que conforme van aumentando los segundo aumenten los minutos etc...
Y nada más, espero que haya quedado claro.
