USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

A veces el usuario tendrá la necesidad de establecer el tiempo en nuestra aplicación. Al hacer esto en vez de pedir al usuario que introduzca los datos de tiempo en forma manual rellenando una serie de campos, le podemos crear una bonita interfaz gráfica de usuario para ingresar los datos.

App Inventor 2 está equipado con un componente no visible llamado SelectorDeHora (TimePicker) que podemos integrar en nuestra aplicación para proporcionar la selección de hora  a los usuarios. Cuenta con un bonito diseño y aspecto. Por ejemplo, el SelectorDeHora muestra lo siguiente:

uMimzWc25hl0Xg0QFs1NqcRyQDbpcmFoKR0iNFjTJhcK21tL6i9i6Q74AIsXTSanPh7BF5WZYh4xekcVB3FvtkMBxlhwhPTA1yLa7UCvacpayGyYPGrwFQqDGoe1PUTx MV7yncN - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

La hora se cambia girando la manecilla de color verde, una vez seleccionada las horas se podrá seleccionar los minutos. Con este sistema, nos aseguramos que el usuario nunca puede ingresar un tiempo no válido.

SelectorDeFecha (DatePicker) presenta una visualización similar pero en lugar de horas y minutos, SelectorDeFecha muestra el mes, el día del mes y el año.

wxpXo6femxp sowCzxEKgL2cXONKwYREpYPg8kDY13AEJaFJzLp17UOcIKlAA3VOXsDlJgK6ZwGnxLlP dwDHbdSupFuj0tYO DBOz9UhdQvcgutkZ9ptRgHF6YHKhNw3TvRqW4s - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

El diseño que se muestra en las imágenes se consigue cambiando el tema de nuestra aplicación, cambiando de Classic a Device Default. No se si este tema está en distintos dispositivos y imagino que dependerá de la versión de android en el mismo.

VQe3JZVLqcpQvFBuiCBPIgBLwz31KxXXTIraFBtiOYwqAOe XePY7LpHJj7bvq0eRYnpojk3vLpQ2apzTqqB1BDSv71B5EFaiX7A6syux7P8l7x2Z9XKPXAlNxpBp46TFguq9I9S - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

La vista del diseñador

Para ver el uso de SelectorDeHora y SelectorDeFecha ,vamos hacer un sencillo programa con un botón para cada uno de los selectores,  el primero para seleccionar la hora y el segundo para seleccionar una fecha. Después de seleccionar la fecha o la hora, el valor seleccionado se muestra en la pantalla mediante una serie de etiquetas:

El diseño de la pantalla se a creado utilizando una DisposicionVertical y dentro de este dos DisposicionVertical y dentro de cada una de estas en la parte superior un SelectorDeHora y un  SelectorDeFecha, en la parte inferior dos DisposicionHorizontal, que contendrán dos etiquetas cada una que mostrarán el resultado de la selección. Al final de este articulo podras descargar el archivo AIA para abrir en App Inventor y de esta manera poder ver más detenidamente el ejemplo

44SPCbdaK4Iuv9RE5w4Gul1NWArAc3qGm3FQHropYh6hVt3Yfj767ZlFvbHpYg4P3HHFOlOkZN1m1MFO7GPJntzhkbaMJBhB0zo1D9ak6 5BPKR7JebvyEierQkzPPPwLiGSRtDp - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2
HPJfMdedlWwGH5h8V5227E7plR9BFNHtS3BHYrct0 qkZFlV8A 7NiFEr7Guwhe4SRvTCKGgNLRy5jK6go5x8jtEQlwDJcS 3CMFIel6GeqYflK4pjAsIHjP ReFwsHVfQ0O2dt3 - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

También necesitaremos un componente no visible reloj , que se encuentra en Paleta → Sensores → Reloj. Arrastra el componente Reloj al lienzo.

Programacion de la aplicación con  bloques

Para obtener la fecha y hora actuales, nuestra aplicación llama al Reloj1. La hora o el tiempo se devuelve en un formato interno que se basa en milisegundos, desde el año 1970. Este formato se tiene que convertir en valores de año, mes, día, hora y minuto.

Lo primero es inicializar una variable local que nombraremos como TiempoActual  y que le daremos el valor de 0, seguido le guardaremos el valor de obtener la hora actual del sistema. Esto se hace haciendo referencia a la propiedad Llamar Reloj1.HacerInstanteDesdeMilisegundos y luego se la pasa al método llamar Reloj1.HoraDelSistema.

Lo segundo es convertir el valor de la variable TiempoActual utilizando métodos adicionales de Reloj1. Para el año , mes y día del mes .

Seguido obtendremos las horas y los minutos, pero lo haremos utilizando un método alternativo para Llamar Reloj1.Ahora para obtener la hora actual.

3WZh8ogOdMLAdmTW6Kc SvDa9usWvbqshLBE9hpyGx TsVaFewApQUaYEIlxHFujFt38AOn FfG7yhdPcx vWxPNMaz4mY1cjsKhJ2qrkDDRwZWbGV 2Q8IsYqBAFDjG0xvRfCLJ - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

El Selector de fecha se activa automáticamente cuando se presiona el botón, no es necesario llamar a DatePicker. El uso es automático. Sin embargo, una vez seleccionada la fecha, se produce el evento despuésFechaRecibida y aquí es donde se debe insertar el código para utilizar la fecha seleccionada. En este ejemplo, el año, mes y día seleccionados se convierten en una cadena de texto y se muestran en la pantalla de la aplicación:

lCtiAswvwm51kb2YI62mufj7MfH1sM6JmGHkaGHApNnFzb89YdNRqBgLTmMxYFHcHDDu3tmT43j0GIqXqZUqZZf66BADkcDsa5B2QY3D0o8ODCge2AZBf6Omqkn3uKvQlNfCdeSG - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

El SelectorDeHora es similar a DatePicker TimePicker se activa automáticamente cuando se pulsa el botón Establecer hora en la pantalla. Una vez que se haya seleccionado el tiempo, el código procesa el evento DespuésdeDefinirHora y obtiene los valores SelectorDeHora1.Hora y SelectorDeHora1.Minutos .

fw03JLmrc8OzcJFqlG4qAXRHQW34Qesry5SBjnNKiO2pCeaUs3fviPaxxB3pWoVZZRbbgLYKheMrSjHSfUrgShWvQXRn3AmZWwDhrGgGQAtpkcNJtUvHF9ADybwDevgGGKDAuZJ3 - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2

Con este código, tienes las piezas para ingresar fechas y horas. Los valores pueden almacenarse en una tabla de TinyDB o MiniWebDb.

Descarga el archivo AIA en tu ordenador


Si te ha gustado compartelo
facebook - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2
Facebook
twitter - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2
Twitter
linkedin - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2
Linkedin
pinterest - USO DE SELECTOR DE HORA Y SELECTOR DE FECHA EN APP INVENTOR 2
Pinterest

Deja un comentario

error: Content is protected !!