David Guerrero González

23048897E

TAREA UT03

Desarrollo de interfaces
UT03 - Interfaces con Controles en XML
Índice
1. ARQUITECTURA ........................................................................................................................ 2
1.2 MODELO Y ACCESO A DATOS ........................................................................................... 3
1.3 VISTA ...................................................................................................................................... 4
1.4 CONTROLADOR ...................................................................................................................... 5
1.5 VIEW MODEL, BINDINGS ........................................................................................................ 6
1.6 CONVERTIDORES .................................................................................................................... 7
1.7 BASE DE DATOS ...................................................................................................................... 8
2. INTERFAZ DE USUARIO ............................................................................................................. 9
2.1 PANTALLA DE LOGIN .............................................................................................................. 9
2.2 PANTALLA PRINCIPAL ..................................................................................................... 10
2.3 PANTALLA HOME.................................................................................................................. 11
2.4 PANTALLA LIBROS........................................................................................................... 12
2.5 PANTALLA LIBROS DETALLE .................................................................................................. 14
2.6 VALIDACION ......................................................................................................................... 16
2.7 PANTALLA PRESTAMOS ........................................................................................................ 17
2.8 PANTALLA PRESTAMOS DETALLE ......................................................................................... 19
2.9 PANTALLA GRAFICOS............................................................................................................ 21
3. ADAPTATIVO............................................................................................................................... 22
4. ESTILOS ....................................................................................................................................... 24
5. MEJORAS .................................................................................................................................... 25
6. PROBLEMAS ENCONTRADOS DURANTE EL DESARROLLO .......................................................... 26
 1. ARQUITECTURA

La arquitectura empleada en el desarrollo del sistema ha sido en Modelo Vista

Controlador (MVC), en el cual dividimos las responsabilidades de las partes que
conforman el sistema.

La distribución de los ficheros se ha realizado de la siguiente forma.

Nota: los controladores los he añadido en el mismo paquete que las vistas por un
problema con SceneBuilder, el cual es descrito en el último apartado de
“Problemas encontrados”.
 1.2 MODELO Y ACCESO A DATOS

Representa las entidades del modelo de negocio. En cada una de estas clases
he incluido el “entidades POJO” y la “lógica de negocio de acceso a datos”.

Además, el modelo incluye las propiedades necesarias para trabajar con el

sistema de Binding de JAVAFX con sus respectivos get y set.

En esta clase del modelo, también se incluyen los métodos necesarios para
acceder a los datos.
1.3 VISTA

Contiene la interfaz de usuario. En este caso la representan los ficheros FXML en

los que se declaran todos los nodos que incluye la GUI.

La interfaz de usuario está totalmente desacoplada con el controlador, si nosotros

modificamos la vista, los controladores no sufren errores en tiempo de
compilación.
1.4 CONTROLADOR

Tiene la responsabilidad de la lógica de la aplicación. En estas clases

controladoras se incluyen los eventos de usuario y los métodos de apoyo a estas
donde se incluye la lógica del sistema.

Además, se incluyen objetos que hacen referencia a los controles de usuario

declarados en los ficheros FXML de la vista mediante la anotación @FXML
1.5 VIEW MODEL, BINDINGS

Después de estudiar este tipo de arquitectura, he llegado a la conclusión de

implícitamente JAVA nos permite trabajar con este modelo en ciertas partes. Por
ejemplo, cuando usamos las ObservableCollection que enlazamos a los
TableView. En este caso se trabaja con este objeto que funciona como un
viewmodel, ya que enlaza un modelo mediante el sistema de Binding y sus
propiedades con la vista directamente, y cuando se produce un evento de cambio
tanto en el modelo como en la vista, automáticamente se actualiza el estado de
ambos, ya sea bidireccionalmente o unidireccionalmente.
También se ha utilizado el sistema de bindings para enlazar las propiedades de
un objeto a las propiedades de los controles de usuario. El bindeo se realiza de
forma bidireccional, es decir, si se produce un cambio en la propiedad del control
de usuario, se modifica la propiedad enlazada del objeto y viceversa.

1.6 CONVERTIDORES

Algunos controles como los combobox, permiten enlazarle objetos, pero como lo
que nos interesa es solamente mostrar en el combobox una propiedad del objeto
enlazado se han utilizado convertidores tal y como se muestra a continuación.

Una vez creado el convertidor lo asociamos con el método

“setConverter(convertidor)”
1.7 BASE DE DATOS

Para la aplicación, se ha utilizado como fuente de datos una base de datos en

memoria, construida con colecciones de tipo ObservableList. La base de datos
será inicializada con unos datos de prueba nada más arrancar la aplicación.
2. INTERFAZ DE USUARIO

Se han desarrollado las siguientes pantallas usando el patron Multiple-Document

Interface (MDI), en el que los distintos módulos del sistema se cargaran en un
área contenida en un formulario contenedor.

La jerarquía de formularios es la siguiente:

- Login
- Principal
o Home
o Libros
▪ Libros detalle
o Prestamos
▪ Prestamos detalle
▪ Gráfico de libros más prestados

2.1 PANTALLA DE LOGIN

Al arrancar la aplicación la primera pantalla que aparece es la pantalla de Login.

Esta pantalla solicita al usuario un usuario y contraseña para acceder al sistema.

Si el usuario introduce unos datos incorrectos el sistema mostrara un mensaje de

error tal y como se muestra en la siguiente imagen.
2.2 PANTALLA PRINCIPAL

Una vez accedemos a la aplicación se muestra la pantalla principal, que se

compone de un SplitPane con los siguientes elementos:

- Menú: contiene los botones que permiten cargar los distintos módulos de
la aplicación. De momento solo están habilitados el modulo de “Libros” y el
módulo de “Prestamos”
- Barra de título: contiene el nombre del módulo que es esta cargado en ese
momento.
- Perfil: Muestra el nombre del usuario que está conectado al sistema.
- Contenedor: es un panel en el cual se cargarán de forma dinámica los
distintos módulos de la aplicación de forma dinámica al pulsar los botones
de enlace a los módulos
2.3 PANTALLA HOME

La primera pantalla que carga en el contenedor del modulo principal es el modulo

de “Home”, el cual este compuesto simplemente por una imagen que representa
el logo de la empresa.
 2.4 PANTALLA LIBROS

El primer módulo funcional que se ha desarrollado ha sido el módulo de Libros. La

primera pantalla de este módulo se compone de las siguientes partes.

1. Título del módulo: cuando carga el módulo, carga el título del mismo.
2. Barra de herramientas: Contiene los botones que permiten gestionar las
altas, bajas y edición de libros.
3. Barra de búsqueda: permite realizar una búsqueda de los datos Tabla de
datos. Muestra todos los datos o los datos filtrados por la búsqueda de los
libros.

Un ejemplo del funcionamiento de la búsqueda. Cuando el usuario busca el

término “Libro”, cada vez que el sistema detecta una pulsación de tecla, compara
la cadena escrita en ese instante con los datos de la base de datos mostrando
como resultado los datos que contengan en cualquiera de sus propiedades el
patron introducido y actualiza la tabla de datos en tiempo real mostrando los
resultados.
Para eliminar un libro debemos seleccionarlo en la tabla de datos y a continuación
pulsar en el botón de “eliminar”. Se nos mostrara un cuadro de dialogo de
confirmación para la operación. Si aceptamos dicha confirmación el registro se
eliminará de la base de datos, sino no se realizará ningún cambio.
2.5 PANTALLA LIBROS DETALLE

Si pulsamos en el botón de insertar de la barra de herramientas, accederemos a

la pantalla de inserción de un libro.

Automáticamente se genera un identificador para el campo “Id”.

Una vez rellenado el formulario si se pulsa en el” botón de “guardar” se guardará

el registro en la base de datos y como la base de datos es una
observableCollection y tiene un binding con la tableview, automáticamente se
agregará el nuevo libro a la tableview.
Para acceder a la pantalla de edición de libros, seleccionamos un registro de la
“tableview” de datos y pulsamos en el botón de editar en la barra de herramientas
de la pantalla principal de libros. El objeto seleccionado se enviará al formulario
de edición y mediante las propiedades de binding quedará enlazado con el
formulario. Modificamos el registro que deseamos y pulsamos en el botón de
“guardar”.
2.6 VALIDACION

Si el usuario introduce datos incorrectos o no introduce aquellos campos que son

obligatorios, el sistema le notificara mostrando el mensaje de error en el campo
correspondiente tal y como se muestra en las siguientes imágenes.
2.7 PANTALLA PRESTAMOS

Para acceder al módulo de préstamos, pulsamos en el botón de “Prestamos” del

menú lateral de la pantalla principal.

Este módulo es similar al módulo principal de libros compuesto por las siguientes
partes:

- Barra de título: carga el título del modulo

- Barra de herramientas: permite acceder a las pantallas para crear, editar
o eliminar un prestamos, así como un botón de enlace a la pantalla de
grafico de préstamos por libro.
- Barra de búsqueda: permite realizar una búsqueda en la base de datos
dado un patron introducido
- Tabla de datos: muestra todos los datos de los prestamos en forma de
tabla.
Para realizar la búsqueda, al igual que en el modulo de libros, el sistema detecta
las pulsaciones de teclado cuando el campo de búsqueda tiene el foco, e ira
filtrando los datos que cualesquiera de sus propiedades coincidan con el patron
escrito al momento.

Para eliminar un registro de la tableview, primero debemos seleccionar un

registro de la misma y a continuación pulsar en el botón de liminar. Se nos
mostrara un cuadro de dialogo de confirmación preguntando si estamos seguros
de la operación a realizar. Si pulsamos en “Aceptar” se procederá a la eliminación
del registro de la base de datos y si pulsamos en “Cancelar”, se cerrará el cuadro
de dialogo sin realizar ninguna operación.
2.8 PANTALLA PRESTAMOS DETALLE

Para insertar un préstamo, pulsaremos sobre el botón de insertar de la pantalla

principal de prestamos y al igual que con el modulo de libros se cargará un valor
autogenerado para el campo id. El usuario, deberá rellenar los demás campos y
pulsar en el botón de Guardar. En este momento el registro quedara insertado en
la base de datos, y como la base de datos es una ObservableList, notificará a la
tableview de que hay cambios y esta será rebindeada automáticamente.
Para editar un prestamos, debemos seleccionar primero un registro de la
tableview y pulsamos en el boton de editar de la pantalla principal de prestamos.
Se abrira el formulario de edicion de prestamos enlazando el objeto seleccionado
con los campos del formulario. El usuario debera editar el valor del campo que
desee y pulsar en el boton de guardar. En este momento la base de datos sera
actualizada con el nuevo valor y por consiguiente la tablewiew sera rebindeada.
2.9 PANTALLA GRAFICOS

El módulo de préstamos, incorpora una pequeña funcionalidad de “Inteligencia de

negocio”, donde se ha creado un gráfico circular que muestra una comparativa de
los libros con más alquileres.

Si otro usuario conectado al sistema actualizara los datos de la base de datos,

tenemos la opción de pulsar en el botón de actualizar, y el grafico se actualizará
con los nuevos datos leídos de la base de datos.

El grafico se compone de:

- Título del gráfico: nombre del grafico

- Series del gráfico: representa los grupos de datos, en este caso los títulos
de los libros
- Leyenda del gráfico: asocia un color a una serie del gráfico.
- Boton actualizar: actualiza los datos del grafico y muestra una animación.
3. ADAPTATIVO

El sistema se adapta perfectamente a cualquier resolución. Para ello la aplicación

utiliza SplitPane lo que permite redimensionar los paneles para ajustarlos a gusto
del usuario. Además los componentes utiliza una combinación de layouts como
AnchorPane, donde los controles de usuario quedan anclados a este panel,
HBox y VBox para la distribución horizontal y vertical de los controles.

En la pantalla principal se ha utilizado el SplitPane vertical para permitir la

redimensión de los paneles del menú y el contenedor de módulos.
En la pantalla de detalle, se ha hecho uso del SplitPane vertical para permitir
la redimensión de los paneles de controles de usuario y del control TextArea, ya
que es posible que el usuario necesite mucho espacio para escribir en este control,
y por ello se ha dado la libertad de ajustar su anchura.
4. ESTILOS

Para ajustar el diseño de los paneles y los controles de usuario, como por ejemplo
los colores, los bordes, el texto, el fondo, etc. se ha utilizado una hoja de estilos
con una serie de clases que tendrán los distintos componentes.

Dicha hoja de estilos es cargada en cada archivo FXML.

5. MEJORAS

Búsqueda “inteligente”:

En la pantalla principal de los módulos, se ha incluido un área de búsqueda.

Donde al mismo tiempo que el usuario va escribiendo, el sistema busca en la
base de datos por cualquiera de los campos que se incluyen en la tableview y va
filtrando en tiempo real los resultados conforme al patron que va escribiendo el
usuario.

Gráfico de alquileres de libros:

Se ha desarrollado un componente que dota al sistema de cierta “inteligencia de

negocio”, mostrando un gráfico circular el cual reporta estadísticas de los libros
más alquilados.
6. PROBLEMAS ENCONTRADOS DURANTE EL DESARROLLO

Problema entre los controladores y SceneBuilder.

A la hora de trabajar con SceneBuilder, cuando separaba los ficheros de los

controladores en un paquete diferente al de los ficheros FXML, no era capaz de
reconocer dichos controladores.

Indagando en internet, parece ser un problema común en SceneBuilder y la

solución ha sido meter los ficheros de los controladores en el mismo directorio que
los ficheros FXML, eso sí renombrándolos bien para indicar que dichos ficheros
pertenecen a los controladores

Problema con el sistema de Bindings.

Problema con el sistema de Binding al cancelar una edición. Inicialmente al editar

un registro de la tableview, recuperaba el objeto perteneciente al registro
seleccionado y como los controles de la vista están enlazados a las propiedades
de dicho objeto rellenaba los campos del formulario. Hasta aquí todo bien, pero al
editar un campo de texto, cambiaba la propiedad del objeto, y como este objeto
estaba bindeado también con la tableview, automáticamente el cambio se
reflejaba en la tableview, ya que las propiedades del objeto han cambiado, y como
este objeto pertenece a una base de datos en memoria compuesta por
ObservableList se va guardando el estado del objeto en dicha BBDD en tiempo
real ante cambios. El problema es que si ahora quiero cancelar la edición
necesitaba guardar el estado inicial del objeto, para que cuando el usuario cancele
la edición, se vuelva a cargar el estado inicial del objeto, y por tanto se reflejara
dicho estado inicial en la BBDD y en la tableview.