El siguiente paso es la creación del encabezado de la pantalla que debe mostrarse en las pantallas virtuales Login y Sign Up. Nuestro encabezado está compuesto solamente por el logo usamos un componente de imagen y lo colocamos dentro del contenedor VAHeader y asignamos a su propiedad Picture la imagen del logo ajustamos tamaño de visualización con las propiedades Height y Width y agregamos un espaciador Canvas en la parte superior Recordemos que la pantalla de Login será virtual, es decir convertiremos
el contenedor vertical VALogin en la pantalla que necesitamos En primer lugar modificamos el ancho del contenedor VALogin luego colocamos dentro del
contenedor los diferentes componentes que requiere nuestra Login Screen una etiqueta de información un cuadro de texto para recibir el ID del usuario un cuadro de texto de contraseña y finalmente un botón que permite activar
el evento ingresar Para mejorar su diseño agregamos algunos espaciadores canvas de 10 píxeles de alto A continuación ajustamos el ancho de los componentes usando la propiedad Fill parent para que se expandan hasta el ancho
disponible es decir que todos tendrán 85% de ancho Se puede observar que mejora el aspecto
de nuestra pantalla Pero aún es necesario pulir algunos detalles de diseño Nos ocuparemos ahora de definir el texto que será mostrado en la etiqueta y botones Igualmente modificamos la alineación de los textos, el tamaño y tipo
de fuente En nuestro caso usaremos fuentes no serifadas Y los indicios o pistas de los cuadros
de texto.
El indicio es el texto que aparece en color atenuado dentro del cuadro de entrada para indicar al usuario lo que debe introducir. Es importante aclarar que los colores de los componentes los vamos a definir usando bloques lo cual es una buena práctica como lo veremos más adelante Bien, ahora nuestra pantalla está casi
terminada Para finalizar el diseño de nuestra
pantalla virtual Login agregamos dos componentes de disposición horizontal. En el primero soltaremos un componente de Caja de verificación para la opción Recordarme y a continuación un componente botón cuya función será llevar al usuario a la pantalla de Sign Up En el segundo colocamos dos botones que usaremos para la depuración y que se deben ocultar una vez estemos seguros que la aplicación funciona adecuadamente Los botones para depuración nos permiten visualizar lo que se almacena en la TinyDB lo cual es muy útil
para entender cómo funciona esta sencilla base de datos que guarda cada dato como una cadena asociada a una etiqueta también podemos borrar el contenido de la misma es una buena práctica aunque si quieres puedes omitir la
creación de estos dos botones Ajustamos las propiedades de los
componentes como se indica y les asignamos nombres que hagan más fácil su manejo posterior en el editor de bloques Es importante hacer notar que sólo asignamos nombres a los componentes que serán programados los demás conservan su nombre por defecto En nuestro diseño hemos usado el componente Canvas como elemento espaciador también puedes usar etiquetas u otro componente que permita la misma función Esta propuesta de Login y Sign Up con dos pantallas virtuales tiene objetivo meramente didáctico y está dirigida a quienes están empezando a crear apps con App Inventor 2 seguramente si eres un usuario medio o
avanzado podrás lograr la misma funcionalidad usando una sola pantalla También te vamos a dejar el reto de
alinear los centros horizontales de los componentes chkRecordarme y btnIngresar El diseño de la pantalla de Sign Up es muy similar a la pantalla de Login por lo cual vamos a mostrarlo de manera
más rápida En esta pantalla usamos, además de la etiqueta de información, los cuadros de ingreso para el ID de
usuario y la contraseña un cuadro de texto adicional para almacenar el nombre completo del usuario Estos tres datos al igual que la opción
Recordarme serán almacenados en la TinyDB y estarán disponibles en las
demás pantallas de la aplicación Toda la información del usuario será
almacenada en una sola etiqueta de la base de datos como veremos más adelante Para finalizar el diseño de la pantalla
Sign up modificamos algunas de las propiedades de los componentes: tipo de fuente que como ya hemos dicho es Sans serif aunque puedes dejar el valor por defecto si deseas ancho del componente que
casi siempre hemos fijado porcentualmente para aprovechar la propiedad Responsive, sensible o ajustable de la pantalla que permite que nuestros diseños luzcan
bien en dispositivos con diferentes tamaños de pantalla lo cual ha sido una buena aproximación
a la solución pero no aplica correctamente en todos los tipos de
aplicaciones es importante resaltar que los porcentajes asignados a las dimensiones de un componente siempre se aplican teniendo como referencia el ancho o alto de la pantalla no del contenedor donde
se encuentra el componente, por ejemplo el componente HABotonesSignUp tiene 85% de ancho y los botones btnGuardar y btnCancelar contenidos en el componente tienen 30% de ancho Se podría pensar entonces que el ancho de los botones es el 30% del ancho del contenedor HABotonesSignUp lo cual resulta ser equivocado y podría arruinar el aspecto de nuestra
aplicación cuando sus componentes sean escalados para ajustarse a un
dispositivo con un tamaño mayor de pantalla Recuerden entonces que el porcentaje
asignado tanto al ancho del contenedor como el ancho de los botones se aplica
respecto del ancho de la pantalla Vamos a agregar la primera parte del comportamiento de nuestra
pantalla Login.
Primero agregaremos la programación en el bloque de inicializar pantalla, aquí colocamos los bloques para que los contenedores VALogin y VASignUp asuman su propiedad visible inicial VALogin estará visible, True y VASignUp estará no visible, False una vez hecho esto agregamos el comportamiento para el
evento Click del botón Registro cuando el usuario toque este botón debe mostrarse la pantalla Sign Up lo cual logramos colocando visible el
contenedor VASignUp y ocultando el contenedor VALogin Una vez más copiamos y pegamos los bloques y cambiamos las propiedades y valores
que se requieran Cuando el usuario toque el botón
Cancelar debe mostrarse nuevamente la pantalla Login y ocultarse la pantalla Sign up, así que duplicamos los bloques y ajustamos los valores
correspondientes Cuando el usuario toque el botón Guardar debe suceder lo mismo que sucede con el botón Cancelar asi que duplicamos bloques y dejamos los valores sin modificar Ahora probemos la aplicación: estando en la pantalla de Login al tocar el botón Registro se muestra la pantalla Sign up y estando en Sign up al tocar el botón Cancelar regresamos a
la pantalla Login, lo mismo sucede si tocamos el botón Guardar