Diseño de interfaces

En esta sección se mostrará el diseño de las ventanas de la aplicación.

## Diagrama de ventanas inicial

La aplicación constará de 5 ventanas: la principal, la de registro, el menú principal, la de información del componente y la del carro de la compra.

### **Ventana principal**

En la ventana principal aparecerá lo siguiente:

* Un título con el nombre de la aplicación, *CompoBuy.*
* Dos campos de introducción de texto, usuario y contraseña.
* Un botón para iniciar sesión, comprobará si los datos de los dos campos son correctos. En caso de que lo sean se irá al menú principal con la sesión del usuario, sino se mostrará mensaje de error.
* Un botón para acceder a la ventana de registro y que el usuario pueda crearse un usuario.

Si un usuario ya está registrado se pasará directamente con dicha sesión al menú principal.

### **Ventana del registro**

La ventana del registro no es más que un formulario que utilizará el usuario para poder crear una cuenta con sus datos. En este formulario se piden los siguientes datos:

* Usuario
* Contraseña
* Fecha de nacimiento
* Ciudad

Por seguridad, al usuario se le pedirá dos veces la contraseña. El registro no será correcto si ambas contraseñas no coinciden. El campo usuario será requerido.

Al registrarse el usuario se le mostrará una notificación y se le enviará al menú principal estando ya registrado.

### **Ventana del menú principal**

En la ventana del menú principal aparecerá lo siguiente:

* Un texto en la parte superior dando la bienvenida al usuario.
* Un *spinner* que permitirá seleccionar la categoría del producto o la opción "TODAS".
* Una lista de elementos en la que se mostrarán los productos de la categoría seleccionada. En caso de que se haya seleccionado "TODAS", se mostrarán todos los componentes disponibles independientemente de la categoría.
* En la parte superior izquierda, se podrá acceder a un menú contextual el cual dispondrá de dos opciones:
	+ Ver carro: esta opción permitirá al usuario ir a la ventana del carro.
	+ Cerrar sesión: el usuario podrá volver a la ventana principal. Para volver al menú principal deberá volver a iniciar sesión.

Como se puede apreciar, en el diagrama inicial, la ventana del menú principal y de información del componente están dentro de un cuadro rojo. La idea es que cuando el dispositivo se encuentre en *landscape* (en posición horizontal), se muestren todas las opciones del menú principal a la izquierda y la información del componente seleccionado a la derecha. En caso de que el dispositivo esté en posición vertical, se mostrarán únicamente las opciones del menú principal. Al pulsar sobre un componente de la lista se irá a la ventana que muestre la información del componente seleccionado.

### **Ventana de información del componente**

En la ventana de información del componente se mostrará la información relativa al componente:

* Nombre del componente
* Imagen del componente
* Descripción
* Especificaciones

También se dispondrá de un botón que permita añadir el componente al carro del usuario que ha iniciado sesión.

### **Ventana carro**

En la ventana del carro se mostrará lo siguiente:

* Un texto que indique que es el carro del usuario (indicando su nombre)
* La lista de los componentes del carro del usuario
* Un botón que permita al usuario comprar los componentes de su lista.

Si el usuario mantiene pulsado sobre un componente de la lista, le aparecerá la opción de eliminarlo del carrito.