En este nuevo articulo vamos a ver como hacer foco en los objetos de la interfaces de App Inventor. Un usuario del canal de Youtube nos pregunto como podía desplazarse, de un lugar de la pantalla a otro, pulsando un botón. Bien, el proceso es sencillo, utilizando una etiqueta y haciendo foco en ella. Si bien es cierto, que no funciona igual para todos los objetos de la interfaces, vamos a ver un ejemplo donde crearemos una aplicación de registro de usuarios. Cada vez que pulsemos al botón de registro este comprobara si falta algún dato, si faltara alguno, hará foco en un objeto de la interfaces de app inventor y desplazara la pantalla.
DISEÑO DE LA APP FOCO EN LA INTERFACE
Ya que el diseño de la App es bastante complejo, y emplearía parte de este articulo, vamos a ver un poco por encima sus características. No obstante, si quieres ver con detalle el diseño de la app, puedes descargar mas adelante el proyecto AIA, o bien, ver el vídeo de Youtube de este articulo que encontraras mas abajo.
Se a empleado un scroll vertical. Con el fin de repartir cada objeto de la interfaces mas aya de los limites de la pantalla. De esta manera se podrá apreciar mejor el efecto de foco en la interfaces de App inventor. Como ya decía al principio del articulo, crearemos una aplicación de registro, en la que utilizaremos una serie de etiquetas, cajas de texto, selectores de fecha y casillas de verificación, que el usuario tendrá que rellenar. Una vez terminado, si el usuario pulsa el botón y falta algún campo por rellenar, desplazaremos el scroll vertical hacia la zona donde este el campo vacío, usando el foco. Ademas usaremos un componente no visible notificación para mandar mensajes al usuario de que es lo que le falta.
PROGRAMANDO LA APP DE FOCO EN LA INTERFACE
Lo primero que realizaremos es crear las variables que usaremos para controlar o saber si algún componente de la interfaces esta vació o, no seleccionado. Para ello crearemos distintos métodos de control, y necesitaremos iniciar una serie de variables de distinta manera. La primera variable la llamaremos «Control_Completado» y sera la encargada de controlar que todos los campos de nuestra interfaces se han rellenado, la iniciamos con un valor falso. Nuestra segunda variable le daremos el nombre de «Texto_Fecha» y contendrá el texto que tengamos en el selector de fecha. Para nuestra tercera variable, crearemos una lista de seis elementos, los cuatro primeros indices contendrá el identificador de cada uno de los cajas de texto. Para los dos indices restantes de nuestra lista, utilizaremos los identificadores de nuestro campo de contraseña. A esta última variable la llamaremos «Lista_de_campos«.
Ahora cuando inicie nuestra aplicación meteremos el valor del texto de nuestro selector de fecha en la variable «Texto_Fecha«. Esto lo hacemos para guardar el valor inicial, es decir, antes de que tengamos alguna modificación, mas tarde lo compararemos si el selector de fecha se modifica.
Algunos componentes de la interfaces de App Inventor responden al comportamiento del usuario, modificando su apariencia, o bien mostrando distintos textos si el usuario pulsa o interactua con ellos. Vamos a programar el comportamiento de nuestros componentes de selector de fecha, casillas de verificación y selector de lista.
Si el usuario pulsa en el selector de fecha App Inventor desplegara inmediatamente un dialogo en forma de calendario para seleccionar una fecha. Después de seleccionar esa fecha, utilizaremos el bloque que maneja el evento «DespuesFechaRecibida» para que esa fecha quede en el texto del botón de selector de fecha.
Para programar las casillas de verificación tendremos que observar cuando a sido pulsada o cuando a cambiado. Ya que no queremos que estén las dos seleccionadas, si la primera de ellas se selecciona y la segunda ya estaba seleccionada, procederemos a desmarcar la segunda, y dejar marcada la primera. Y esto también tendremos que hacerlo a la inversa.
Para el selector de lista sera muy sencillo. Utilizando el bloque «Después de selección», es decir, después de que el usuario haya pulsado y seleccionado un elemento de la lista. Sustituiremos el texto del botón por el texto de la selección.
Ahora que ya tenemos programado el comportamiento de cada uno de nuestros objetos de la interfaces de App Inventor, vamos a proceder a verificar. Cuando el usuario pulsa el botón de registro, no quede ningún elemento por rellenar. Si alguno elemento esta vacío aremos foco en el. Si son varios los elementos, intentaremos que haga foco en el elemento de mas arriba. Algunos componentes no se puede hacer foco directamente, pero si que podemos mostrar una notificación directamente al usuario.
COMPROBAR QUE TODO ESTA RELLENADO PARA HACER FOCO EN LA INTERFACES DE APP INVENTOR
Vamos a ver distintas formas de verificar si se ha rellenado todos los campos. Empezaremos por los campos de texto. Para ello si pulsamos en el botón de registro, recorreremos nuestra lista «Lista_de_campos«. Ayudados por un bucle «for«. Pero solo recorremos los indices en los que tenemos datos de dichos campos, es decir, del indice uno al cuatro. Si el texto del componente es menor de uno, no se a escrito nada. En ese caso haremos foco sobre el campo y mostraremos una notificación al usuario. Como queremos hacer foco al primer campo que no tenga texto, nos ayudaremos del bloque «break» para finalizar el bucle. Si no lo hacemos de esta manera el bucle «for» continuara, y terminara haciendo foco en el último campo de texto. Por último daremos el valor de falso a nuestra variable global «Control_completado«.
Vamos a ver como comprobar los campos de contraseña. haremos lo mismo que con los campos de texto, pero esta vez en nuestro bucle «for» solo recorreremos los indices cinco y seis. Volveremos hacer los mismo, nos ayudaremos del bloque «break» para finalizar el bucle. Si el texto del componente es menor de uno, haremos foco sobre el campo y mostraremos una notificación. Pondremos el valor de nuestra variable global «Control_completado» a falso.
Pero al ser una contraseña también deberemos de comprobar que las dos contraseñas escritas son iguales. Compararemos los textos de cada contraseña, y si no son iguales, mandaremos una notificación al usuario. Ademas colocaremos el valor de nuestra variable global «Control_completado» a falso.
COMPROBAR CAMPOS DE CONTRASEÑA, FECHA, CASILLAS DE VERIFICACIÓN Y LISTA
Es el turno del selector de fecha. Si recuerdas al principio de este tutorial creamos una variable a la que llamamos «Texto_Fecha«. Esta variable guardaba el texto del componente en el preciso instante en el que se inicia la aplicación, pues si eso es, solo tenemos que comparar los textos de el selector de fecha con el guardado en la variable, si son iguales, quiere decir que no se a cambiado nada. Ademas como venimos haciendo colocaremos el valor de nuestra variable global «Control_completado» a falso.
Para el selector de lista solamente tendremos que comprobar que el índice seleccionado es distinto de cero. De lo contrario mostraremos de nuevo la notificación y pondremos nuestra variable global «Control_completado» a falso.
Las casillas de verificación seran igualmente faciles. Simplemente deberemos de comprobar que al menos una de ellas esta seleccionada, de lo contrario mostraremos una notificación, y pondremos nuestra variable global «Control_completado» a falso.
TERMINAR NUESTRA APP DE FOCO EN LA INTERFACES DE APP INVENTOR
Por último si todo es correcto pondremos nuestra variable global «Control_completado» a verdadero y comprobaremos que esto sea cierto. Si la variable «Control_completado» es cierto, mostraremos una notificación como que el registro se ha completado con éxito. Con esto quedara terminada nuestra app de foco en la interfaces de App Inventor
Como siempre si te ha gustado compártelo, si tienes alguna duda házmelo saber. Y si quieres recibir en tu correo electrónico artículos como este, no te olvides suscribirte al blog de inventordeaplicaciones.es donde obtendrás un magnifico regalo.
No hay comentarios:
Publicar un comentario