Ahora dentro de la pantalla Login crearemos dos pantallas virtuales: Login y Sign Up usando tres componentes de disposición vertical (Vertical Arrangement). El primero contendrá la sección de encabezado con nuestro logo, el segundo contendrá la pantalla virtual Login y el tercero contendrá la pantalla virtual Sign Up como se ve en la imagen siguiente.
 |
| Fig. 1. Diseño de la pantalla |
Para facilitar la programación posterior renombramos cada uno de los tres contenedores verticales así:
- VAHeader que contendrá el logo que parece en todas las pantallas
- VALogin que contendrá los componentes para realizar el Login (Ingreso)
- VASignUp que contendrá los componentes para realizar el Sign Up (Registro)
Paso 1. Crear las variables para "pintar" las pantallas
Si deseas usar el procedimiento pintarScreen debes inicializar variables de color con los valores RGB(red,green,blue) de tu gusto. A continuación algunos ejemplos de lo que debes hacer.
 |
| Fig. 2. Declaración de variables |
Paso 2. Crear procedimiento pintarScreen
Una vez hecho lo anterior puedes crear el procedimiento pintarScreen que podría verse como la imagen siguiente. Recuerda que este procedimiento pinta los componentes de la pantalla con los colores asignados.
 |
| Fig. 3. Procedimiento pintarScreen |
Paso 3. Crear procedimiento VALoginVisible
Como puedes observar, el procedimiento VALogin permite alternar la visibilidad de las pantallas virtuales VALogin y VASignUp. Inicialmente la pantalla virtual VALogin estará Visible (True) y VASignUp estará oculta (False).
 |
| Fig. 4. Procedimiento VALoginVisible |
Paso 4. Inicializar pantalla y manejo de Click en botones
En el evento que maneja la Inicialización (Initialize) de la pantalla colocamos el procedimiento pintarScreen (colores de los componentes de la pantalla) y el procedimiento VALogin que define la pantalla virtual que estará visible inicialmente. Y en los eventos que manejan el toque (Click) del usuario en los botones colocamos el procedimiento VALogin únicamente.
 |
| Fig. 5. Manejo de eventos |
Observa que 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 contender VALogin.