Desarrollo Del Problema

Desarrollo del problema

Para el desarrollo del Colegio Web JSF es necesario implementar las clases Java de la capaWeb (Java web beans) que se describieron anteriormente. A continuación es necesarioimplementar las páginas con elementos de presentación JSF y declarar la navegación de cadauna de estas páginas.

En el proceso de construcción de los elementos de presentación incluiremos el tema de lainternacionalización y el enlace de los elementos de control.

Creando el proyecto ColegioWeb

El proyecto JSF_ColegioWeb que puede importar al bajar las fuentes de este tutorial es unproyecto java simple con elementos de configuración web. Para crear el proyecto desde cerosiga la guía de instrucciones comunes para crear un proyecto Java.

1. Cree el directorio fuente y los paquetes con las clases del mundo. 2. Cree el paquete y las clases de la interfaz, declare los atributos y constantes y losmétodos get y set de cada atributo. Recuerde que se deben implementar con el prefijo eninglés como se discutió en la sección anterior. 3. A continuación se debe crear la estructura de carpetas para los otros recursos delproyecto e importar las librerías necesarias para el desarrollo JSF.

1 / 13


- db: Contiene el datasource con el que se crearán conexiones a la base de datos dentrodel servidor. Además en esta carpeta encuentra un script para la creación de la tabla queconsulta la aplicación. - jsp: Es el directorio en donde colocaremos todas las páginas del sitio (puede contenercualquier estructura interna con la que se desee organizar el sitio). - propiedades: En este directorio se encuentran los archivos de internacionalización. Sonarchivos tipo porperties en donde se especifica el valor que debe tomar cada etiqueta en cadaidioma. - recursos: Directorio para la localización de imágenes y otros recursos necesarios. - WEB-INF: Esta carpeta contiene los archivos de configuración de las aplicaciones web.Debe llamarse de esta manera y siempre se debe dejar en la raíz del archivo war. Para eldesarrollo JSF se deben incluir el archivo web.xml y faces-config.xml (Este último no esnecesario que se encuentre en este directorio, pues se puede configurar su localización en elweb.xml).

Las carpetas docs y lib contienen la documentación de este tutorial y las librerías necesariaspara la instalación de la aplicación y el desarrollo jsf.

- Agregue al classpath de su aplicación las librerías jsf-api.jar y jsf-impl.jar. En estaslibrerías se encuentra el core de JSF y la implementación de los componentes que utilizaremosmás adelante. Igualmente agregue al classpath la libreríamysql-connector-java-3.0.10-stable-bin.jar.

Implementando el Colegio Web JSF

Para el desarrollo de este tutorial mostraremos la creación de la página inicial para conocer lascaracterísticas de los JSPs con componentes JSF embebidos. Adicionalmente construiremosuno de los requerimientos pasando por todos los llamados a acciones y su consecuentereacción en la navegación del sistema. Para este ejemplo utilizaremos como guía uno de losdiagramas de estado diseñados en la sección anterior.

1. Inicializando Descriptores y Back-Beans

Para iniciar debemos configurar el descriptor de nuestra aplicación web para especificar el tipo

2 / 13


de servlets que serán procesados como JSF, además debemos indicar cuál o cuáles son losarchivos de configuración jsf que se utilizarán y otras características configurables de JSF.Para esto editamos el archivo web.xml

En el faces-config.xml declaramos el soporte de idiomas, indicando los sufijos con los que seidentifica cada uno. También establecemos los back-beans que actuarán de controladores ennuestra aplicación y el alcance de cada uno de estos objetos. En nuestro caso cada uno de losbeans vive durante la sesión, lo cual quiere decir que estamos utilizando un solo objeto de cadauno.

En la sección anterior creamos las clases que modelan los beans con los que interactuaremospara la respuesta a las acciones. Estas clases tienen dos tipos de métodos: Actions y ActionListeners .

Un método Action es un método que se invoca como respuesta a algún evento y que generaun cambio en la navegación. Estos métodos están asociados a cambios o consultas en la capade negocio y deben tener String como retorno. El String es la cadena que representa la acciónque se va a seguir. Todas las acciones (invocadas directamente o a través de un método delback-bean) son procesadas por los controladores de JSF y se encuentran descritas en elarchivo faces-config.xml.

3 / 13


Un método ActionListener es un método que se invoca antes de un método de acción. Porlo general se utilizan para inicializar valores que se necesitarán para ejecutar una acción o paraleer parámetros que se envían desde las formas. Estos métodos no generan ningún cambio enla navegación y tienen como parámetro un evento de donde se puede obtener información delcontexto.

2. Características de una página JSF

En las páginas de nuestra aplicación utilizaremos jsps con tags de jsf embebido. Para esto sedeben importar las librerías de tags y elementos del core de jsf que se utilizarán.

Como elemento raíz, contenedor de todos los elementos que componen esta vista, debemostener el tag view que se encuentra en los elementos del core.

4 / 13


Al terminar la construcción de la página cerramos la jerarquía sin olvidar el view con el que seinició.

En la imagen anterior podemos ver un siguiente elemento de jsf que permite cargar algúnrecurso para la versión local especificada en esta vista y guardar este recurso como un mapade propiedades en el espacio de request. Este recurso es por lo general el mapa de etiquetasespecificadas que nos servirá para la internacionalización del sitio. De acuerdo con la versiónlocale del navegador se selecciona el archivo correspondiente y se carga en la memoria parautilizarlo como referencia en adelante.

Antes de iniciar con la construcción del cuerpo de esta página, vemos el uso de la variable quese ha creado para referenciar el recurso cargado: un elemento h:outputText es utilizado paraponer el título de la página, el valor de este elemento será el obtenido a través de la llave tituloPrincipalen el mapa de recursos. Para hacer referencia a una variable en JSF se utiliza la notación:#{variable}.

En este tutorial utilizamos el código JSF embebido en elementos HTML comunes. Para laconstrucción del cuerpo de las páginas utilizamos tablas y en una de ellas insertamos una tablaJSF que contiene todos los elementos de las formas como se ve a continuación:

5 / 13


En la imagen anterior tenemos una composición de elementos que permiten agruparcomponentes JSF y dichos componentes. - Panel Grid es un contenedor de componentes que distribuye los elementos en una mallade x columnas especificadas como atributo del tag. Se puede ver como el distribuidorGridLayout de swing. - Messages es un componente que permite mostrar el mapa de mensajes almacenados enel request. En nuestra aplicación, es el componente que utilizamos para mostrar los errores ymensajes de confirmación de las acciones. Se pueden agregar mensajes personalizados comolo hacemos en los beans de este programa y también es utilizado por los componentesdirectamente cuando éstos necesitan desplegar mensajes como el caso de campos requeridosen las formas. - Form es el elemento estándar para la creación de formas. Al igual que en HTML todo linko botón que genere una acción debe pertenecer a una forma, al igual que los campos que seutilizan como parámetros. - En este ejemplo tenemos la creación de cuatro links para las opciones de la páginaprincipal. Aunque sólo hay dos opciones en esta página, el ejemplo muestra cómo crear un linksencillo y un link asociado a una imagen. - Note las acciones y actionListeners que se asocian a cada uno de los links. - Otros elementos como inputs, outputs y combos de selección hacen parte de la creaciónde sitios web. Para estudiar cada uno de estos elementos puede ver los ejemplos en lasdiferentes páginas del ColegioWeb. Al mismo tiempo que se construye cada una de las vistas es necesario enlazar la navegación.En la siguiente sección se explica cómo configurar la navegación de nuestro sitio. - Construyendo la Navegación

Para mostrar la ejecución de la secuencia de acciones que se desarrollan en un requerimiento,utilizaremos como ejemplo el Requerimiento Funcional de agregar un estudiante (R1). Eldiagrama de estados para este requerimiento es:

6 / 13


Todas las acciones de navegación descritas en este diagrama se deben implementar en eldescriptor faces-config.xml. Los ActionListener se implementan como métodos en losback-beans y son acciones se ejecutan primero en el ciclo de vida del componente (antes deuna acción de navegación) y no tienen como resultado alguna modificación en la navegación. Ejemplos de las reglas que utilizaremos en cada paso son:

Acción para el paso de la página inicial a la página de agregar estudiante

Acción para pasar de la página de agregar estudiante a esta misma página luego de ejecutaruna acción exitosa en el back-bean. La descripción de esta secuencia se encuentra a continuación: 1. Partiendo de la página de inicio, queremos ir a la página de agregar estudiante peroprimero se hace la inicialización del back-bean que soportará las acciones (una instancia deEstudianteBean tal como se declaró en el archivo faces-config.xml). La inicialización es un ActionListener. Este action listener es una invocación a un método de la instancia estudianteBean, en estemétodo se deben inicializar los elementos que necesitemos para resolver el requerimiento deagregar un estudiante, en nuestro caso, se inicializan los datos del formulario (con unestudiante vacio) y se crea una referencia al dao sobre el que se consulta. 2. A través de un link sencillo invocamos la acción agregarEstudianteAction, esta acción esprocesada por las reglas de navegación descritas en nuestro faces-config y como resultado somos dirigidos a la página de agregar estudiante. 3. Una vez se completan los datos para registrar un estudiante, invocamos una nueva acciónsobre el bean que soporta nuestro requerimiento invocando el método agregarEstudiante.Como vimos en la preparación de la página, los datos del formulario están relacionados con unatributo del back-bean. De allí obtenemos los datos que necesitamos para crear un estudiante. Una vez delegamos el servicio de agregar un estudiante a nuestra capa de negocio (un daosencillo), retornamos el String que será procesado por las reglas de navegación en elfaces-config para obtener una respuesta y redirigir nuestra página. 4. Como resultado exitoso de nuestra operación, la regla de navegación redirige a la mismapágina de agregar estudiante. Sin embargo, como parte del cuerpo de la acción colocamos unmensaje en el contexto de JSF para que sea desplegado a través del tag de mensajes quetenemos en el encabezado de todas las páginas. Si el resultado es un error, colocamos en el mismo contexto el mensaje de error para que semuestre en la página y retornamos el String correspondiente a la regla que queremos ejecutarfrente al error. En el caso del tutorial se retorna null. Un retorno nulo en una acción denavegación produce como resultado la página original. De esta manera se completa un requerimiento de agregar un estudiante y de manera análogase crean los otros. Empaquetando fuentes en un archivo .war

Una aplicación web se distribuye en un archivo jar que contiene todos los archivos que laconstituyen y un descriptor web.

7 / 13


Para la construcción del archivo war que instalaremos en el servidor utilizaremos una de lasherramientas del IDE de JBoss. Para esto hay que habilitar la opción de packaging para elproyecto.

Esta opción se encuentra dentro de las propiedades del proyecto (Clic derecho -> properties).

En la imagen dos, se muestra la ventana de configuración de empaquetamiento de unproyecto. Se debe habilitar la opción y a continuación construir el archivo con la estructurainterna.

1.

Seleccione la opción Add y escriba el nombre del archivo que se va a crear. (Puede ademásespecificar el destino, la opción por defecto es la raíz del proyecto).

8 / 13


2. Sobre el archivo que se crea empiece a adicionar los subarchivos y carpetas haciendoclic derecho y seleccionando la opción correspondiente. Puede filtrar los archivos que deseaagregar utilizando las opciones include/exclude y puede cambiar la estructura decarpetas que se utilizará en el war utilizando prefijos. 3. Al finalizar la declaración, seleccione ok en la ventana de propiedades y a continuaciónejecutamos la tarea de construcción. 4. ara construir el archivo, seleccione la opción run packaging del menú contextual queaparece al hacer clic derecho sobre el proyecto. Con esta opción se creará el archivo packaging-build.xmlen la raíz de su proyecto y más adelante lo utilizaremos para ejecutar tareas automáticamente. También debe encontrar la primera versión del ColegioWeb.war en la carpeta de destino queespecificó para esto. Para verificar la estructura de carpetas del archivo creado, puede abrirlocon cualquier programa para comprimir archivos (winzip, winrar, etc.).

Configuración de la Base de Datos

En este taller estamos realizando una conexión a una base de datos local llamada colegioweb.Para crear esta base de datos y las tablas que necesitamos tenemos la consola deadministración de easy php que instalamos inicialmente.

9 / 13


Iniciamos easy php y verificamos que los dos servidores (Apache y MySQL) hayan iniciadocorrectamente.

Ingresamos al módulo de administración de nuestro motor MySQL a través del navegador en ladirección: http://127.0.0.1/mysql

10 / 13

http://127.0.0.1/mysql


Desde esta página podemos crear la base de datos que necesitamos simplemente indicando elnombre. Una vez hemos creado colegioweb, debemos crear las tablas necesarias para nuestroproyecto.

Para crear las tablas se puede llenar el formulario de esta interfaz, completando el nombre dela tabla, el número de campos que tiene y finalmente completando el registro de cada campo.

También, En la distribución de este tutorial encuentra el script de creación de la tabla estudiantes en eldirectorio db.

11 / 13


Desde el administrador de la base de datos (phpMyAdmin) podemos ejecutar scripts SQLseleccionando la opción SQL de la barra superior. Copie y pegue el query descrito en el script,en el espacio de código de phpMyAdmin. Ejecute el query y de esta manera se creará la tablade estudiantes que necesitamos.

12 / 13


La conexión con la base de datos se realiza desde el servidor (JBoss Appplication Server) através de un datasource en donde se especifican los parámetros de conexión y el driver que seestá utilizando (en nuestro caso MySql Driver). Lea el archivo JSF_ColegioWeb/db/colegio-ds.xml. Allí se especifica la URL de conexión(dirección del host: puerto/nombre de la base de datos), el nombre de usuario y la contraseñacon la que se realizarán las conexiones.

Este archivo se debe desplegar junto con el war de nuestra aplicación en el servidor lo cualespecificaremos a continuación. Nota: Para las tareas de despliegue se utilizarán tareas automáticas de ANT que estánconfiguradas para buscar los archivos en la localización original del tutorial. Copie eldatasource en su proyecto en la misma carpeta db como se encuentra en el tutorial.

13 / 13

Documents

Desarrollo Del Problema