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:
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.
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.
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
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.
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:
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 .
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
No hay comentarios:
Publicar un comentario