Foco en la Interfaces App Inventor

5PNZck3ybFmbo2rhesd3R NJanL0UjzWMXVe7mv9D6ZSTFwqej7u1wU9PBJneXNb9KhZBzbQaL47Po8ITotqeQyUdYTIVRuUxpIJ2P5pf3ZXE2wk68z3 SFdCGLTzo4bmwuXFhLV - Foco en la Interfaces App Inventor

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.

Descarga el proyecto AIA

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«.

17VZqMvJkwc7MwFdew0QujQrT4X2rs7ItTT7IB gHcx PKIPCZlMoPzjsU93dj9GrQMiOUO989YI3FLhxZbyxkIGDs49OoQyGNHxlCUJ1XrI18jrWC2 kjOwVoWGdKnr4 RENjxG - Foco en la Interfaces App Inventor

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.

qz0yutBXSEhp0C9v UnFVr4nFiHLYdw98ijACv9nDz kRSv3pc wwRXdbDJPDjjtKkAe8lyoJN4LvYd3Lbq6oJQdWDNXog7NIrRTxEsJ2ls73z00oq3Z8NQbTZWkAjZpJznWWZlb - Foco en la Interfaces App Inventor

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.

v5Px2751X8wAiYeOSY9rEh6MFuGkGMG9s458wFnVP6BwqxeesBd4CwkT2KfBZJ9ibqx0wAPEwp38tzbJKb5lnfiP4tM69eemu7YPDuTXjaLMWAExgTwRinLc y7GqbwNNd4GLfS0 - Foco en la Interfaces App Inventor

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.

vY4WFaFBVHexbcb3RHAPQ8e Wsiyppzsu0hAKMkuThtEXcGqiih5egVW22HSF7pkbM  QnKFUpErx9kLEGPDDjR3ybipk6Jh3JhoW61Hq 43QHaiz0w5eVEBIRnN30Wp 4y7QBzL - Foco en la Interfaces App Inventor

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.

l2Gw ocNYv BuUOwvdclqtAIXlxrDHKKpx8W7GuvbE2oiEAU1NwjG fk6AfrTYmYSf6jhhKd5k04nx7wHI4OAmJx1yG4mFWig1zQvozcaJTfL0Wnhh78lJPS9hcjZM6V4W cRFzD - Foco en la Interfaces App Inventor

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«.

mSBxSskjXbuK6e4qX6igfWOyQ7d5isYybmqAexeQi5SBGdjtCCDMqttQIUc6M0LjN w Q2395e6M5xqYjy1tiaiAPvrpgogv sHdr O394 XnbQwimxql QGdy2OwgTJEvbV9rmE - Foco en la Interfaces App Inventor

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.

pur7ct3g9qN8R oNjtGmiLe65PcYC7zIl6BZGaq6UePmWzc4yFuDn0wzIbmeHgg1Pp0wYLw9fLTWxfYdoRlceOb7EXsHEJkYwwlgrXspEZGmhZwMkeq15EB2b31T t0QbefLu8uv - Foco en la Interfaces App Inventor

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

dPuiq4W VQCJfxCI TeGZ Xi2JZnpPHsYL65eNtgyUjSa0FhbOkXXWjM7e7wsisgtjCBLtcochDsjRy3zVQN 1mmBz P9ylITEVE vJJsAzFo3 Tk2v2NHzLmYi0YXTWT64AY gE - Foco en la Interfaces App Inventor

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.

fy0J6iuy2sDMvusTegEHVas7Pt4h0yIINl8ezD4syI6nmGT3uB4BkbxqidaeET5JZCYItP5 N9x9B2uStr93EhVnce4x8GC5fR1XnmGFfAUvQhBa2h0qgIpDU6mHXuZYY7TC1WyC - Foco en la Interfaces App Inventor

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.

Et1JFaGnE MRNzCGstqwMm0DnElkiWqcGIowWIIcx5wvzTD3xfki5k SLfehEiuJv543di7ryp7QsNJiZAUKKLKbLUhh31JQATL2KL06yqXwqqjgwyBPOiu9sJFWz6HmpnB za5f - Foco en la Interfaces App Inventor

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.

hZ7ggnYKouEty0KhSCo5VHwMwTByHCylexLuKzrPuiKbENc7xkt5dT0liLluNuJxU BrWyN frxMRmXUofY2w6CiRMUbVV0JiT2Oup7MGz0mFe1LrmQui3y6Fa2GHp 1q50n7OZ0 - Foco en la Interfaces App Inventor

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

32HlemWymgzS6fM6ahE8YUK6 LFLeNh0rQW6OtZt4agxxMEQDRv8HpluAU34oQh44hSi5QRJ9 culxC7 A0 1xvzsiS8LORZg YJupvxAgfihNqtfTNy615Qk8I6vL3RG1ERNiVY - Foco en la Interfaces 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.

Deja un comentario

error: Content is protected !!