Compartir archivos y texto con Sharing

En alguna ocasión, tendrás que crear una aplicación en app inventor en la que quieras mandar fotos y videos a otras aplicaciones instaladas en el teléfono. APP Inventor nos ofrece el componente no visible Sharing, que nos permite compartir de una manera sencilla tanto texto como foto. En este articulo vamos a ver como compartir fotos y texto con el componente Sharing.

El componente Sharing es un componente no visible que permite compartir archivos y / o mensajes entre su aplicación y otras aplicaciones instaladas en un dispositivo. El componente mostrará una lista de las aplicaciones instaladas que pueden manejar la información proporcionada y permitirá al usuario elegir una con la que compartir el contenido, por ejemplo, una aplicación de correo, una aplicación de red social, una aplicación de mensajes de texto, etc.

Diseño de nuestra app

Para el diseño de nuestra app para compartir archivos y texto con Sharing, se ha utilizado una serie de disposiciones verticales y horizontales donde se han dispuesto una serie de botones cada uno con un texto descriptivo de la acción que va a tomar. También tendremos una disposición oculta o no visible que solo se mostrara cuando nuestro usuario tenga que escribir texto en nuestra app. Y por supuesto un componente no visible Sharing y dos componentes cámara que utilizaremos en nuestro ejemplo.

Como el objetivo de este artículo no es el de mostraros como diseñar la app si no el uso del componente Sharing, no vamos a profundizar en el tema. No obstante podréis como siempre descargar el proyecto AIA desde aquí.

programando la lógica de nuestra App

Para programar nuestra app para compartir archivos y texto con Sharing, vamos a necesitar una variable global que guarde el texto introducido por el usuario, la vamos a nombrar con el nombre de «Texto» y la vamos a inicializar con un bloqué de texto vacío.

Ahora vamos a programar el botón para enviar texto. Lo que haremos es que cuando se pulse el botón de enviar texto, se visualice la disposición vertical que contiene la caja de texto y el botón de enviar. El botón que utilizaremos nos servirá tanto para el envió de texto y para el envió de texto y foto, por lo tanto, cambiaremos el texto del botón según la opción pulsada. De esta manera cuando pulsemos al botón de enviar texto, cambiaremos el texto del botón «BtnEnviar», haremos visible la disposición vertical que lo contiene y pondremos el foco en la caja de texto donde el usuario introducirá el texto que quiera enviar.

Vamos a seguir añadiendo lógica a los demás botones. Cuando pulsemos al botón de enviar foto lo único que haremos es llamar al componente, «Cámara1».

Esto nos abrirá la cámara del teléfono. Después de tomar la foto que queramos enviar, solo tendremos que llamar al método de nuestro componente no visible compartir archivo, con la imagen en cuestión, y nos ayudaremos con el bloque de la cámara «DespuesDeTomarFoto».

Ahora vamos a dar lógica a nuestro último botón, el que compartirá texto y archivo a la vez. para ello cuando se pulse el botón de enviar foto y texto, haremos que se visualice la disposición vertical que contiene la caja de texto y el botón de enviar. Cambiaremos el texto del botón por el texto «Texto para foto». Haremos visible la disposición vertical que lo contiene y pondremos el foco en la caja de texto donde el usuario introducirá el texto que quiera enviar.

Ahora vamos a dar lógica al botón «BtnEnviar» este se tiene que comportar de diferente manera si solo queremos mandar texto o si mandamos texto y foto. Lo que haremos es comprobar el texto que contiene el botón. Si este texto es «Texto para foto», lo que haremos es meter en nuestra variable global el texto que contiene la caja de texto y llamar a la Cámara 2 para que tome la foto.

Si por el contrario el texto del botón es distinto al anterior, solamente compartiremos el mensaje que contenga la variable global, ocultaremos la disposición vertical que contiene el botón, y borraremos el contenido de la caja de texto.

Bien ya estamos terminando, solo nos queda por hacer la lógica de después de tomar la foto de la cámara 2. Después de tomar la foto compartiremos tanto la foto como el texto almacenado en la variable global. Cambiaremos el testo del botón «btnEnviar» y dejaremos el campo de texto vacío.

Bien solo queda comprobar el funcionamiento de nuestra aplicación y como veras tanto si solo quieres enviar texto o foto e incluso ambas cosas nuestra aplicación nos mostrara distintas opciones, según las aplicaciones instaladas en nuestro dispositivo. de esta manera podremos compartir archivos creados en nuestra aplicación.

Si quieres dudas no dudes en dejar un comentario si quieres recibir notificaciones en tu correo electrónico de nuevas publicaciones en el blog no dudes en suscribirte y sin mas me despido hasta un nuevo articulo.

Cómo crear una SPLASH SCREEN

En este nuevo articulo vamos a ver como crear una Splash Screen o pantalla de inicio en App Inventor. Para ello nos ayudaremos una pequeña extensión que podréis descargar de aquí y que nos permitirá mostrar una animación gif en app inventor 2.

Diseñando la SPLASH SCREEN

Vamos a comenzar diseñando la Screen1 que será la pantalla que utilizaremos para la carga de nuestra aplicación y que mostrara una pequeña animación en formato gif. Además de una barra de progreso con un porcentaje y que podrás descargar desde este enlace.

Constara de una serie de disposiciones verticales y horizontales unas dentro de otras, donde colocaremos nuestros distintos componentes.

Tendremos una etiqueta a la que daremos el nombre de «TXTBarra» y que contendrá el texto «|». En su propiedad color de fondo, seleccionaremos el color naranja, este es el color que mas se asemeja al color del Gif. Esta etiqueta nos servirá para crear una barra de carga.

Mas abajo meteremos dos nuevas etiquetas. A la primera le daremos el nombre de «TXTCargando» y su finalidad será la de mostrar el texto cargando.

La segunda tendrá el nombre de «TXTNúmero» y contendrá el valor del porcentaje de carga. Añadiremos un componente no visible reloj, que configuraremos en sus propiedades «IntervaloDelTemporizador» a 200.

Añadiremos al proyecto una extensión para este tutorial que nos permitirá insertar gifs animados. Esta extensión se llama KIO4_AnimatedGif y la podrás descargar de aquí.

Buscando una animación Gif

Vamos a buscar una animación que se adapte a nuestro dispositivo. Para ello nos dirigimos a Google y escribimos en el buscador la palabra «86mQ.gif«.

Pulsaremos en la imagen con el botón derecho del ratón y seleccionaremos la opción «Guardar imagen». Guardaremos la imagen en formato JPG para utilizarlo mas adelante.

Ahora pulsamos sobre la imagen para obtener una vista previa y volvemos al proceso anterior. Al guardar la imagen se guardara en formato gif, que es el que usaremos.

Si quieres utilizar una animación distinta a la que aquí te muestro en la barra de búsqueda introduce «Gif de carga Android». En las opciones selecciona la opción ICON, para que tenga un tamaño aceptable. Ahora sigue el proceso anterior que vimos para el Gif del ejemplo.

Ahora solamente queda subirlo como medio multimedia a App Inventor. Pulsamos en medios y seleccionamos nuestro Gif.

Programando la lógica del Splash Screen

Como siempre nos dirigimos a nuestra pantalla de bloques, y una vez allí, lo que vamos hacer es decir a nuestra aplicación que cuando cargue la pantalla, cargue y comience la animación de nuestro Gif. Para ello utilizaremos el bloque «llamar animatedGif» dentro de la extensión. Dentro de su propiedad «layout» introduciremos la disposición vertical u horizontal en la que queramos que aparezca. en mi caso le pondré «DisposicionHorizontal1» . En su propiedad imagen solo tendremos que introducir una etiqueta de texto con el nombre de nuestra animación en mi caso «86mQ.gif«

Ahora lo que haremos será crear una pequeña barra de carga que se ira incrementando a medida que pase el tiempo, y después añadiremos el texto que visualizara el porcentaje de carga. Para ello lo primero que haremos será crear una variable global a la que le daremos el nombre «Porcentaje». Esta variable contendrá el valor actual de la carga y será inicializada a 0.

Utilizaremos el reloj para que cuando se dispare, si el valor de la variable global es menor de 100 incremente esta en uno. También multiplicaremos por dos el ancho de nuestra etiqueta «TXTBarra». Por último mostraremos el valor de nuestra variable global en la etiqueta «TxtNúmero».

Por último solo tendríamos que añadir el bloque «else» al «if» para que en caso de querer ejecutar una acción después de la carga, como por ejemplo, abrir una segunda pantalla o mostrar una notificación.

Bien con esto terminamos, hemos visto como agregar un componente Extensión a nuestro proyecto y como simular la carga de elementos en nuestra app. Si te a gustado, o tienes alguna duda escríbelo en los comentarios y no olvides suscribirte al blog, recibirás un regalo de bienvenida. Un saludo y hasta la próxima

Mostrar estado de la batería en AppInventor 2

 

En este tutorial vamos a mostrar estado de la batería en AppInventor 2. Existe una forma de incorporar JavaScript en tus aplicaciones. La técnica implica el uso del componente WebViewer como procesador JavaScript. En este articulo mostraremos el estado de la batería del dispositivo mediante JavaScript y el componente WebViewer. Utilizaremos un archivo HTML donde insertaremos código JavaScript. Este código no solo nos mostrara el porcentaje actual de la batería. Si no, que nos dirá en tiempo real si se esta cargando o no. Nos vamos a ayudar de dos funciones de App Inventor para comunicar la aplicación con el código JavaScript que se ejecuta dentro del componente WebViewer.  A continuación, te muestro como mostrar estado de la batería en AppInventor 2.

DISEÑO DE LA APLICACIÓN

Para el diseño de la aplicación que hará mostrar estado de la batería en AppInventor 2, se ha utilizado una disposición vertical. En esta disposición se ha introducido un lienzo con un grafico. Mas abajo se ha colocado tres disposiciones horizontales. La primera contiene dos etiquetas. TXTBatería, que contendrá el texto, «La batería», y la etiqueta TXTEstadoBatería que mostrara si nuestra batería esta cargando o no. La segunda disposición horizontal contendrá dos etiquetas al igual que la primera. La etiqueta TXTnivel, que contendrá el texto «El nivel de batería es de:». Una segunda etiqueta TXTMuestraNivel que mostrara el nivel actual de la batería. Para la última disposición Horizontal tendremos la etiqueta TXTTiempoBatería que contendrá el texto «Tiempo de batería». Y por último la segunda etiqueta TXTMuestraTBatería que mostrara el tiempo restante de batería.

También utilizaremos varios componentes no visibles como un componente WebView, y tres componentes no visibles Reloj. Configuraremos el reloj 1 y 2 desmarcando la casilla «TemporizadorHabilitado» y configurando el «IntervaloDelTemporizador» en 1500. Para el reloj 3 desmarcaremos TemporizadorSiempreSeDispara y pondremos el tiempo en 1500.

Nuestra aplicación mostrara unos gráficos de batería que estarán almacenados en medios. Además incluiremos el archivo «BateriaAppInventor.html», que contendrá el código JavaScript que comunicara con nuestra aplicación. Todos estos archivos los podréis descargar del siguiente enlace.

Enlace de descarga de archivos de medios

Programando la aplicación

Lo primero que haremos para mostrar el estado de la batería en AppInventor 2, es crear 5 variables globales. Estas variables las usaremos tanto para registrar los datos de lafunción contenida en JavaScript, como para guardar los valores.

La primera la llamaremos «ListaDeEstadosDevueltos» y la inicializaremos construyendo una lista vacía. Esta variable guardara los datos recibidos de JavaScript en forma de lista.

La segunda variable la llamaremos «BateriaCargando» y contendrá el valor de la primera posición de la lista creada anteriormente, y que corresponde a un valor booleano true o false. Si es true, la batería estará cargando, si es false, la batería no estará cargando.

El nombre que recibirá la tercera variable es «NivelDeBatería». Esta variable la inicializamos con un campo vacío de texto y contendrá la segunda posición de nuestra lista, que corresponde a un valor numérico de 0.1 a 1 este valor mas adelante lo multiplicaremos por 100 para sacar el nivel de batería actual.

La cuarta variable recibirá el nombre de «TiempoRestante» y contendrá la tercera posición de nuestra lista. Esta variable mostrara el tiempo restante de batería en uso. Tengo que decir que esta función no es compatible con todos los dispositivos a si que puede ser que no te funcione. Si esto último te sucede, te devolverá el valor de «infinity».

Nuestra última variable la llamaremos «GraficoBatería» estará inicializada con un campo de texto vacío y la utilizaremos para mostrar un grafico de batería con el porcentaje actual.

Llamando a nuestra función de JavaScript para Mostrar estado de la batería en AppInventor 2

Lo primero que vamos hacer es ejecutar una función de JavaScript contenido en nuestro HTML llamada «EstadoBateria()». Para ello nos vamos a ayudar de el reloj3, cuando pase un segundo y medio desde que iniciamos la aplicación le decimos que ejecute dicha función. Le estamos dando este tiempo para que cargue el archivo HTML sin problemas y no intente llamar a una función de nuestro documento HTML cuando este todavía no exista o no este cargado. Fíjate que esto solo va a suceder una vez ya que nuestro temporizador esta configurado para no repetirse.

Que sucede cuando ejecutamos la función «EstadoBateria()».

Si abrimos el documento Html en un procesador de texto, veremos que esta función llama a su vez a otra, llamada «updateBatteryStatus(battery)». Esta función hace uso del objeto window.AppInventor.setWebViewString, que devolverá un texto a la app creada, con el valor devuelto en su interior. En este caso devolverá un texto con el resultado de cada una de las llamadas a las funciones de control de batería, separadas por comas.

Ahora que ya sabemos que esta función no devuelve un texto separado por comas, que contiene el estado de la batería en el momento de la llamada a la función, vamos a completar un poco mas el código. Lo primero nos aseguraremos que el valor devuelto no esta vacío. Si este valor no esta vacío activaremos tanto el temporizador 1 como el 2.

Temporizador 1mostrar estado de la batería en AppInventor 2

Vamos a utilizar un temporizador para que cada 1,5 segundos se active. Este temporizador de nuevo hará una llamada a la función JavaScript EstadoBatería() de nuestro documento HTML, y lo hará cada 1,5 segundos provocando un bucle infinito. De esta manera a cada segundo y medio sabremos el estado de la batería. Pero nos falta mostrar esa información en nuestras etiquetas. Lo primero que haremos será crear una lista de la información recibida en la cadena de WebView, con el componente » Lista desde registro CSV». Esta lista la asignaremos a nuestra variable global «ListaDeEstadosDevueltos». Una vez que tengamos construida la lista, bastara con asignar cada elemento de la misma, con la variable correspondiente.

Entonces decimos que para la variable «BateríaCargando», le asignaremos el índice 1 que corresponde al dato que nos dirá si la batería esta cargando. Para la variable «NivelDeBatería» le asignaremos el índice 2, que corresponde con el valor de carga de la batería multiplicado por 100, ya que los valores recibidos, si recuerdas, están entre 0.1 y 1. Y por último asignaremos a nuestra variable global «TiempoRestante» el índice 3, que corresponde al valor de el tiempo que queda de uso de la batería.

Ahora si el contenido de la variable «BateríaCargando» es false pondremos en la etiqueta TXTEstadoBatería el texto No esta cargando. Si de lo contrario el contenido es True, devolveremos a la etiqueta el texto, Se esta cargando.

Ahora falta mostrar el porcentaje de batería en nuestra etiqueta «TXTMuestraNivel». Para ello, si el valor devuelto es mayor de 0, y menor de 10, le asignaremos el texto de 10%. Si el valor es mayor de 10 y menor de 20, le asignaremos a la etiqueta el valor de 20% y a si sucesivamente. De esta manera mostraremos el nivel de batería. Si por el contrario, no es ninguna de las anteriores será 0. Si quisiéramos mostrar el valores como 12% o 14% simplemente asignar e la etiqueta «TXTMuestraNivel» el valor de la variable «NivelDeBatería». Para este ejemplo yo me he decantado por utilizar el primer método, ya que me parecía demasiado sencillo simplemente asignar el valor de la variable.

Por último asignaremos a nuestra etiqueta «TXTMuestraTbatería» el valor de la variable global «TiempoRestante». Esta variable mostrara el tiempo restante de uso de nuestra batería. No todos los dispositivos serán compatibles con esta función. Si el tuyo no lo es recibirás el valor de Infinity.

Temporizador 2 para mostrar estado de la batería en App Inventor 2

Con este temporizador vamos a mostrar un gráfico de la batería en pantalla. Vamos a crear un procedimiento que se encarga de cambiar el grafico de la batería si esta cargando. Cuando deje de cargar. mostrara el grafico de porcentaje actual de la batería. Vamos a hacer lo mismo que hicimos con la etiqueta de texto que mostraba el porcentaje de la batería. Pero esta vez mostraremos un grafico. Si el Nivel de batería es mayor de 0 y menor de 20 pondremos la variable que contendrá el grafico a mostrar, con el grafico de la batería correspondiente, en este caso a 10.

El procedimiento que vamos a crear es muy sencillo, simplemente se encargara de cambiar el grafico de la batería si esta cagando. Si esta cargando y el grafico es de la batería cargando, lo cambiamos al grafico correspondiente con su nivel de batería. Por el contrario, si esta cargando y el grafico es el porcentaje de batería, pondremos el grafico cargando.

Solo falta llamarlo en el temporizador, y asignarle en su entrada «Imagen1» la variable global grafico batería. Y en su su entrada «Imagen2» el grafico «BateriaCargando.png»

Con esto vemos el uso de devoluciones con el bloque «CadenaDeWebView», y como ejecutar una función de JavaScript desde AppInventor. Esto abre grandes posibilidades, ya que podremos crear WebApps con app inventor 2.

Si te a gustado este articulo no dudes en dejarlo en los comentario al igual que tus dudas. Y si quieres apoyar esta pagina no dudes en suscribirte.

Graficas de datos en App Inventor

En este nuevo articulo veremos como crear y mostrar graficas de datos en App inventor. Ya lo vimos en anteriores artículos, cuando mostramos como ver gráficos de datos desde una hoja de calculo de Google en App Inventor. Pero esta vez profundizaremos un poco mas en como es el procedimiento.

Te recomiendo que descargues esta guía gratuita en formato PDF para ver como crear direcciones web que muestran gráficos. Ya que en un simple articulo no se puede abordar toda la información relacionada.

Diseño para mostrar graficas de datos en App Inventor

Para este diseño se a utilizado una etiqueta en la parte superior que muestra un titulo de ayuda al usuario, en el que se le pide que ingrese datos numéricos. Mas abajo tenemos un campo de texto que esta configurado para solo admitir números. Debajo del campo de texto tenemos un botón al que se le ha resaltado con el color rojo y que tendrá la función de añadir los valores numéricos a la gráfica. También se ha añadido al diseño un desplegable, que tendrá la función de cambiar la manera de ver la grafica, es decir, podremos cambiar de una grafica de barras, a una grafica en forma circular, los elementos de cadena serán los siguientes «Gráfico de barras, Gráfico circular, Gráfico de líneas, Diagrama de Venn«.

También tendremos dos etiquetas, estas serán útiles a la hora de ingresar los datos a la dirección web que generemos. Las dejaremos ocultas y borraremos el texto que contiene por defecto. Esto último es muy importante ya que de lo contrario no funcionara. Y por último tendremos una imagen que será la encargada de recibir el grafico creado.

Programando nuestra App para mostrar graficas.

Lo primero será crear una variable global a la que llamaremos «ListaNúmeros» y que inicializaremos con una lista vacía. Esta lista contendrá los datos que mostrara nuestra grafica.

Ahora programaremos nuestro botón, cuando pulsemos este, comprobaremos que la caja de texto no este vacía, si no esta vacía añadiremos el número contenido en ella a nuestra lista. Recuerda que la caja de texto tiene que estar configurada para admitir solo números. Una vez que hemos introducido los datos contenidos en nuestra caja de texto, en nuestra lista, borraremos su contenido y también borraremos el contenido de nuestras etiquetas.

Ahora por cada elemento de la lista que hemos creado, ya contenga un solo elemento o dos, añadiremos a nuestra etiqueta números, el texto que ya contenía mas el valor de la posición recorrida en la lista y una coma. Haremos lo mismo para la etiqueta nombres pero esta vez sustituiremos la coma por el símbolo » | «.

Vamos a crear un procedimiento que se encargara de mostrarnos las grafica en nuestra imagen. Este procedimiento le vamos a llamar «Muestra_Grafica» . La mecánica será muy sencilla, por cada opción que tenga seleccionada en el componente desplegable, mostrare un tipo de grafico. Entonces lo único que tengo que hacer, es comprobar si el índice seleccionado es igual a uno. Si es cierto mostrare un grafico de barras.

Esto lo conseguimos poniendo la foto del componente imagen con la siguiente dirección web «https://chart.apis.google.com/chart?cht=bvs&chl=» donde cht=bvs mostrara un grafico de barras. Seguido el contenido de la etiqueta «nombres», menos el último carácter, ya que este es una coma, mas «&chco=FF000000&chxt=y&chbh=a&chs=300×250&chco=A2C180&chtt=» que configurara tanto el tamaño como color etc… Podréis encontrar mas información en el PDF que he dejado para la descarga. El titulo, yo he puesto titulo, vosotros podéis poner lo que queráis. Mas «&chd=t:» que mostrara el nombre a cada dato, estos nombre los sacaremos de nuestra etiqueta nombres, y haremos lo mismo que con la anterior etiqueta, quitaremos el último carácter.

Para todas las siguientes opciones del componente desplegable haremos exactamente lo mismo. Lo único que modificaremos es «cht=bvs«. que para cada opción seleccionada será de la siguiente manera:

Gráfico circular: cht=p

Grafico de líneas: cht=Ic

Diagrama de Venn: cht=v

Una vez ya tengamos creado por completo nuestro procedimiento, lo insertaremos al final de nuestro bloque que detecta el clic del botón.

Ahora lo que haremos es mostrar una grafica distinta dependiendo de la selección del desplegable, si la opción seleccionada, es mostrar un grafico circular, la imagen cambiara para mostrarnos una imagen circular. Esto lo conseguimos llamando a nuestro procedimiento «Muestra_Grafica» cada vez que seleccionemos una opción del desplegable.

Bueno te invito a que experimentes con los tamaños, colores, formas, ayudándote con el PDF que podrás descargar. Ya sabes que si quieres que hablemos de algún tema o si tienes alguna duda, deja un comentario.

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.

https://www.amazon.es/dp/1795711817

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

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.