Tsir 4702 JsfCrudPrApp (P)

Tecnologías de los Sistemas de Información en Red
P03 - Desarrollo de una aplicación web JSF tipo CRUD

para acceso a un sistema de información de empresa
Objetivo
En esta tarea aprenderás a definir (desde cero) el sistema de información de una empresa
(EIS) a partir de los requerimientos de cliente propuestos. Cuando, a partir de estos
requerimientos, tengas el modelo de datos completamente definido podrás continuar con el
diseño del conjunto de vistas de usuario y flujo de pantallas de tu aplicación web. Esta
aplicación web será la que permita explotar la base de datos publicada en el servidor GlassFish
a partir de la correspondiente fuente de datos conectada al EIS mediante un pool. La
integración del EIS se concretará mediante operaciones CRUD. El resultado final de la
implementación práctica será una aplicación, accesible por web, que integre el EIS, que
además sea eye-candy (por ejemplo, utilizando PrimeFaces o Bootstrap) y que esté
internacionalizada (al menos en dos idiomas).
La propuesta a desarrollar es la del catálogo de productos de una empresa de venta online.
Para ello deberás entender los requerimientos del cliente para ser capaz de diseñar un modelo
de datos que se adecúe a ellos. En segundo lugar y a partir de la base de datos, deberás
diseñar las vistas (pantallas) y el flujo de la aplicación final. A continuación se aprovechará la
potencia de NetBeans para generar automáticamente todos los componentes java necesarios
para la implementación del SI (entidades, EJBs, managed JavaBeans, Facelets y demás clases
de apoyo). En último lugar, deberás modificar y adecuar a los requerimientos del cliente (y a tus
propios diseños) la app generada automáticamente desde NetBeans.
Requerimientos
Un comerciante de minerales y fósiles ha decidido ampliar su empresa facilitando la compra de
sus productos por internet (compra online). Normalmente, el 90% de sus clientes tienen acceso
a internet, así que el proyecto de tienda online no parece una mala idea. Para ello ha pensado
que le implementen una aplicación web que, de momento, deberá soportar toda la información
de los productos, además de la cartera de clientes con que cuenta la empresa. Tanto la parte
logística (almacén de piezas) como la mayor parte de los clientes están localizados en España,
aunque el comerciante quiere expandirse a otros paises de la UE. Por este motivo la aplicación
deberá estar internacionalizada en, al menos, español e inglés. Finalmente, la empresa cuenta
con un dominio en propiedad y con un contrato de hosting de web con soporte GFish y MySQL.
Los requerimientos del cliente son:
● representación online de los productos de la tienda agrupados en (al menos) dos
categorías: minerales y fósiles. Al seleccionar la pieza, se deberá acceder a la ficha de
descripción de la misma (lugar y fecha de extracción, edad estimada, precio...). Se pide
incluir un mínimo de 4 artículos por categoría
1/4
© Pau Micó
● acceso a la cartera de clientes con la posibilidad de altas/bajas de clientes

● acceso a las categorías de productos (de momento minerales y fósiles) con la
posibilidad de altas/bajas de nuevas categorías
● internacionalización de la aplicación en (al menos) dos idiomas
● tabla de clientes se relaciona con productos a través de una tabla de pedidos
● la aplicación sólo publicará las tablas de clientes, productos y categorías. La
tabla de pedidos se utilizará internamente para relacionar los clientes con los
productos (y para almacenar información intermedia como, por ejemplo, el precio total
del pedido)
Modelo de datos
El modelo de datos propuesto deberá dar respuesta a los ítems planteados en el apartado
anterior. Para ello se te recomienda que repases los conocimientos de administración del
servidor de bases de datos MySQL, a partir de los siguientes tutoriales:
● Pablo Pastor, “Visual Database Creation with MySQL Workbench”, Tuts+, online
● NetBeans, “Generating a JavaServer Faces 2.x CRUD Application from a Database -
Examining the Database Structure”, online
● NetBeans, “The NetBeans E-commerce Tutorial - Designing the Data Model”, online
Como indicación, se te sugiere una base de datos con, al menos, tres tablas (clientes,
categorías, productos). Dependiendo del tipo de relación que definas entre las tablas, es
posible que se cree alguna tabla más de apoyo.
Nota: por si acaso, te puedes descargar el script para la generación de la base de datos
desde aquí. Además, si quieres generar un modelo de datos visual a partir de la base de
datos del script sólo tienes que utilizar la opción de ingeniería inversa (Database →
Reverse Engineer) que te proporciona MySQL WorkBench
2/4
© Pau Micó
Diseño de las vistas y flujo de pantallas

En este punto es donde deberás determinar el aspecto de las vistas del cliente. Es aquí también
donde se define el flujo de las pantallas de la aplicación final. Para ello se te sugiere que
elabores una maqueta utilizando cualquier herramienta de diseño gráfico (una de diseño de
presentaciones podría valer, tiene que ser algo sencillo y rápido de utilizar). NO es conveniente
que empieces con la programación sin haber definido antes claramente el aspecto y
funcionamiento de la aplicación.
Resultará muy importante que, para la correcta resolución de este apartado (tanto para las
vistas como para el flujo de pantalla), tengas en cuenta el formato de las vistas (páginas JSF)
que se generan automáticamente por asistente de NetBeans a partir de las entidades.
Ejemplos de la vista para una lista de clientes de una empresa, en el que sólo se ha cambiado el CSS
Aplicación CRUD
Una vez implementado el modelo de datos y definido el funcionamiento de la aplicación llega el
momento de implementar el código. Como ya sabes, el IDE de NetBeans puede facilitar la tarea
a partir de sus asistentes. Para ello se te recomienda que repases los siguientes documentos:
● Pau Micó, “Aplicación web JSF para el acceso CRUD a un EIS MySQL”, TSIR, online
● NetBeans, “Generating a JavaServer Faces 2.x CRUD App from a Database”, online
Implementación de mejoras
Una vez generada la programación de la aplicación se te propone que la mejores.
Evidentemente ni su aspecto ni su flujo son los planteados en el apartado de diseño por lo que
ahora deberás editar y estudiar cuidadosamente cada una de las páginas JSF generadas por
NetBeans, para cambiar su aspecto y adecuar su fucionamiento a los requerimientos fijados.
Para ello necesitarás algunos fundamentos de HTML y XHTML, uso de etiquetas y librerías, etc.
También deberás mejorar la presentación de ciertos desplegables, que toman literalmente los
valores de la búsqueda, en vez de mostrar los resultados de la misma (deberás rastrear desde
3/4
© Pau Micó
dónde se generan estos resultados, para lo que te será de gran utilidad el repasar con detalle la
parte de edición de las entidades de persistencia del tutorial de referencia). Además, para
internacionalizar la aplicación en, al menos, dos idiomas tendrás que:
● generar (o modificar) el conjunto de recursos (resources bundle) creado por NetBeans
● icluir en la vista principal un componente que genere un evento de acción o de cambio
de valor que actualice una variable de idioma (LOCALE)
● soporta esa variable LOCALE en el javabean del modelo
● actualizar al castellano el fichero de recursos Bundle_es_ES.properties creado
automáticamente por NetBeans en inglés
● modifica la configuración del fichero de despliegue faces-config.xml
● revisar los métodos de los javabeans (controllers) que acceden al conjunto de recursos
Bibliografía
● Oracle, “The Java Tutorials”, online
● Oracle, “The JEE7 Tutorial - Overview”, online
● Oracle, The Java EE Tutorial: Part VIII, Persistence (caps. 37-44), online
● Oracle, “The Java EE Tutorial: Part VII, Enterprise Beans”, caps. 32-36, online
● NetBeans, “Generating a JavaServer Faces 2.x CRUD App from a Database”, online
● Universidad Carlos III de Madrid, “Tecnologías Informáticas para la Web - Java
Persistence API”, online
● W3Shools, HTML, online
● Tutorialspoint, “JSF Tutorial”, online
● Pablo Pastor, “Visual Database Creation with MySQL Workbench”, tuts+, online
4/4
© Pau Micó

Tsir 4702 JsfCrudPrApp (P)

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tsir 4702 JsfCrudPrApp (P)

Cargado por

Copyright:

Formatos disponibles

Tecnologías de los Sistemas de Información en Red

P03 - Desarrollo de una aplicación web JSF tipo CRUD

● acceso a la cartera de clientes con la posibilidad de altas/bajas de clientes

Diseño de las vistas y flujo de pantallas

También podría gustarte