Desarrollo del problema

Para el desarrollo del Colegio Web JSF es necesario implementar las clases Java de la capa Web (Java web beans) que se describieron anteriormente. A continuacin es necesario implementar las pginas con elementos de presentacin JSF y declarar la navegacin de cada una de estas pginas.

En el proceso de construccin de los elementos de presentacin incluiremos el tema de la internacionalizacin 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 un proyecto java simple con elementos de configuracin web. Para crear el proyecto desde cero siga la gua 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 los mtodos get y set de cada atributo. Recuerde que se deben implementar con el prefijo en ingls como se discuti en la seccin anterior. 3. A continuacin se debe crear la estructura de carpetas para los otros recursos del proyecto e importar las libreras necesarias para el desarrollo JSF.

1 / 13

Desarrollo del problema

- db: Contiene el datasource con el que se crearn conexiones a la base de datos dentro del servidor. Adems en esta carpeta encuentra un script para la creacin de la tabla que consulta la aplicacin. - jsp: Es el directorio en donde colocaremos todas las pginas del sitio (puede contener cualquier estructura interna con la que se desee organizar el sitio). - propiedades: En este directorio se encuentran los archivos de internacionalizacin. Son archivos tipo porperties en donde se especifica el valor que debe tomar cada etiqueta en cada idioma. - recursos: Directorio para la localizacin de imgenes y otros recursos necesarios. - WEB-INF: Esta carpeta contiene los archivos de configuracin de las aplicaciones web. Debe llamarse de esta manera y siempre se debe dejar en la raz del archivo war. Para el desarrollo JSF se deben incluir el archivo web.xml y faces-config.xml (Este ltimo no es necesario que se encuentre en este directorio, pues se puede configurar su localizacin en el web.xml).

Las carpetas docs y lib contienen la documentacin de este tutorial y las libreras necesarias para la instalacin de la aplicacin y el desarrollo jsf. - Agregue al classpath de su aplicacin las libreras jsf-api.ja r y jsf-impl.jar . En estas libreras se encuentra el core de JSF y la implementacin de los componentes que utilizaremos ms adelante. Igualmente agregue al classpath la librera mysql-connector-java-3.0.10-stable-bin.jar.

Implementando el Colegio Web JSF

Para el desarrollo de este tutorial mostraremos la creacin de la pgina inicial para conocer las caractersticas de los JSPs con componentes JSF embebidos. Adicionalmente construiremos uno de los requerimientos pasando por todos los llamados a acciones y su consecuente reaccin en la navegacin del sistema. Para este ejemplo utilizaremos como gua uno de los diagramas de estado diseados en la seccin anterior. 1. Inicializando Descriptores y Back-Beans

Para iniciar debemos configurar el descriptor de nuestra aplicacin web para especificar el tipo

2 / 13

Desarrollo del problema

de servlets que sern procesados como JSF, adems debemos indicar cul o cules son los archivos de configuracin jsf que se utilizarn y otras caractersticas 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 se identifica cada uno. Tambin establecemos los back-beans que actuarn de controladores en nuestra aplicacin y el alcance de cada uno de estos objetos. En nuestro caso cada uno de los beans vive durante la sesin, lo cual quiere decir que estamos utilizando un solo objeto de cada uno.

En la seccin anterior creamos las clases que modelan los beans con los que interactuaremos para la respuesta a las acciones. Estas clases tienen dos tipos de mtodos: Actions y ActionLis teners .

Un mtodo Action es un mtodo que se invoca como respuesta a algn evento y que genera un cambio en la navegacin. Estos mtodos estn asociados a cambios o consultas en la capa de negocio y deben tener String como retorno. El String es la cadena que representa la accin que se va a seguir. Todas las acciones (invocadas directamente o a travs de un mtodo del back-bean) son procesadas por los controladores de JSF y se encuentran descritas en el archivo faces-config.xml.

3 / 13

Desarrollo del problema

Un mtodo ActionListener es un mtodo que se invoca antes de un mtodo de accin . Por lo general se utilizan para inicializar valores que se necesitarn para ejecutar una accin o para leer parmetros que se envan desde las formas. Estos mtodos no generan ningn cambio en la navegacin y tienen como parmetro un evento de donde se puede obtener informacin del contexto. 2. Caractersticas de una pgina JSF

En las pginas de nuestra aplicacin utilizaremos jsps con tags de jsf embebido. Para esto se deben importar las libreras de tags y elementos del core de jsf que se utilizarn.

Como elemento raz, contenedor de todos los elementos que componen esta vista, debemos tener el tag view que se encuentra en los elementos del core.

4 / 13

Desarrollo del problema

Al terminar la construccin de la pgina cerramos la jerarqua sin olvidar el view con el que se inici.

En la imagen anterior podemos ver un siguiente elemento de jsf que permite cargar algn recurso para la versin local especificada en esta vista y guardar este recurso como un mapa de propiedades en el espacio de request . Este recurso es por lo general el mapa de etiquetas especificadas que nos servir para la internacionalizacin del sitio. De acuerdo con la versin locale del navegador se selecciona el archivo correspondiente y se carga en la memoria para utilizarlo como referencia en adelante.

Antes de iniciar con la construccin del cuerpo de esta pgina, vemos el uso de la variable que se ha creado para referenciar el recurso cargado: un elemento h:outputText es utilizado para poner el ttulo de la pgina, el valor de este elemento ser el obtenido a travs de la llave tituloPrincipal en el mapa de recursos. Para hacer referencia a una variable en JSF se utiliza la notacin: #{variable}.

En este tutorial utilizamos el cdigo JSF embebido en elementos HTML comunes. Para la construccin del cuerpo de las pginas utilizamos tablas y en una de ellas insertamos una tabla JSF que contiene todos los elementos de las formas como se ve a continuacin:

5 / 13

Desarrollo del problema

En componentes lacolumnas imagen anterior JSF y dichos tenemos componentes. una composicin de elementos que permiten agrupar de GridLayout x Panel de Grid swing. especificadas es un contenedor como de atributo componentes del tag. Se que puede distribuye ver como los elementos el distribuidor en una malla el mensajes lo directamente en request. hacemos las Messages formas. de En en confirmacin cuando nuestra los es beans un stos componente aplicacin, de de necesitan este las acciones. programa es que el desplegar componente permite Se y tambin pueden mostrar mensajes es agregar el utilizamos utilizado como mapa mensajes el de por caso para mensajes los mostrar de componentes personalizados campos almacenados los errores requeridos como y en utilizan o botn como que es genere parmetros. el elemento una accin estndar debe para pertenecer la creacin a una de forma, formas. al Al igual igual que que los en campos HTML que todo se link principal. sencillo En y este Aunque un link ejemplo asociado slo tenemos hay a dos una opciones la imagen. creacin en de esta cuatro pgina, links el para ejemplo las opciones muestra de cmo la pgina crear un link Note las acciones y actionListeners que se asocian a cada uno de los links. de diferentes sitios Otros web. pginas elementos Para del estudiar ColegioWeb. como cada inputs, uno outputs de estos yde combos elementos de seleccin puede ver hacen los ejemplos parte de en la las creacin Al En mismo la Form siguiente tiempo seccin que se se construye explica cmo cada configurar una las la vistas navegacin es necesario de nuestro enlazar sitio. la navegacin. Construyendo la Navegacin Para mostrar la ejecucin de la secuencia de acciones que se desarrollan en un requerimiento, utilizaremos como ejemplo el Requerimiento Funcional de agregar un estudiante (R1). El diagrama de estados para este requerimiento es:

6 / 13

Desarrollo del problema

Todas descriptor las de acciones de navegacin descritas en este diagrama se deben implementar en el de faces-config.xml Los ActionListener back-beans una accin de ylas son navegacin) acciones se no ejecutan tienen como primero resultado se en implementan el ciclo alguna de vida modificacin como del mtodos componente en la en navegacin. los (antes Ejemplos reglas que.y utilizaremos en cada paso son:

Accin para el paso de la pgina inicial a la pgina de agregar estudiante

Accin una accin para exitosa pasar de en la el pgina back-bean. de agregar estudiante a esta misma pgina luego de ejecutar La descripcin de esta secuencia se encuentra a continuacin: 1. primero EstudianteBean Partiendo hace de tal la inicializacin la como pgina se declar de inicio, del back-bean en queremos el archivo que ir faces-config.xml). a soportar la pgina las de acciones agregar La inicializacin estudiante (una instancia es pero un de ActionListener . mtodo agregar estudiante Este action se un vacio) deben estudiante, listener y inicializar se es en una nuestro una los invocacin elementos referencia caso, a se un que al inicializan mtodo dao necesitemos sobre de los el la datos que instancia para se del resolver consulta. formulario estudianteBean, el requerimiento (con un en este de 2. A travs de un link sencillo invocamos la accin agregarEstudianteAction procesada somos dirigidos por las a reglas la pgina de navegacin de agregar estudiante. descritas en nuestro faces-config y como , esta resultado accin es 3. Una sobre vez el bean se completan que soporta los datos nuestro para requerimiento registrar un invocando estudiante, el invocamos mtodo una nueva accin agregarEstudiante Como atributo vimos del back-bean. en la preparacin De all obtenemos la pgina, los los datos datos que del necesitamos formulario estn para relacionados crear un estudiante. con . un sencillo), faces-config delegamos retornamos para obtener el el servicio String una que respuesta de agregar ser procesado y un redirigir estudiante por nuestra las a reglas nuestra pgina. de capa navegacin de negocio en el (un dao 4. pgina mensaje tenemos Como de en agregar el resultado contexto encabezado estudiante. exitoso de JSF de de Sin todas para nuestra embargo, que las pginas. sea operacin, como desplegado parte la regla del a travs cuerpo de navegacin del de tag la accin de redirige mensajes colocamos a la que misma un Si muestre frente navegacin el resultado al en error. la produce pgina En es un el caso como error, ycrea retornamos del colocamos resultado tutorial el se la String en pgina retorna el mismo correspondiente original. null. contexto Un retorno el a mensaje la nulo regla en que una de error queremos accin para de que ejecutar se De se crean esta manera los otros. se completa un requerimiento de agregar un estudiante y de manera anloga

Empaquetando fuentes en un archivo .war

Una aplicacin web se distribuye en un archivo jar que contiene todos los archivos que la constituyen y un descriptor web.

7 / 13

Desarrollo del problema

Para la construccin del archivo war que instalaremos en el servidor utilizaremos una de las herramientas del IDE de JBoss. Para esto hay que habilitar la opcin de packaging para el proyecto.

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

En la imagen dos, se muestra la ventana de configuracin de empaquetamiento de un proyecto. Se debe habilitar la opcin y a continuacin construir el archivo con la estructura interna. 1. Seleccione la opcin Add y escriba el nombre del archivo que se va a crear. (Puede adems especificar el destino, la opcin por defecto es la raz del proyecto).

8 / 13

Desarrollo del problema

2. clic agregar derecho Sobre y el seleccionando archivo las opciones que se la crea opcin empiece correspondiente. a adicionar los Puede subarchivos filtrar los y archivos carpetas que haciendo desea include/exclude carpetas que se utilizar en el war utilizando ypackaging puede cambiar la estructura de prefijos . 3. ejecutamos Al utilizando finalizar la tarea la declaracin, de construccin. seleccione en la ventana de propiedades y apuede continuacin 4. ara construir el archivo, seleccione la ok opcin run aparece al hacer clic derecho sobre el proyecto. Con esta opcin se del crear men el contextual archivo que packaging-build.xml en la raz de su proyecto y verificar ms adelante lo utilizaremos para ejecutar tareas automticamente. Tambin debe encontrar la primera versin del ColegioWeb.war especific con cualquier para programa esto. Para para comprimir la estructura archivos de (winzip, carpetas winrar, del archivo etc.). en la carpeta creado, de destino abrirlo que

Configuracin de la Base de Datos

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

9 / 13

Desarrollo del problema

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

Ingresamos al mdulo de administracin de nuestro motor MySQL a travs del navegador en la direccin: http://127.0.0.1/mysql

10 / 13

Desarrollo del problema

Desde esta pgina podemos crear la base de datos que necesitamos simplemente indicando el nombre. Una vez hemos creado colegioweb , debemos crear las tablas necesarias para nuestro proyecto.

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

Tambin, En la distribucin de este tutorial encuentra el script de creacin de la tabla estudiant es en el directorio db.

11 / 13

Desarrollo del problema

Desde el administrador de la base de datos (phpMyAdmin) podemos ejecutar scripts SQL seleccionando la opcin SQL de la barra superior. Copie y pegue el query descrito en el script, en el espacio de cdigo de phpMyAdmin. Ejecute el query y de esta manera se crear la tabla de estudiantes que necesitamos.

12 / 13

Desarrollo del problema

La conexin travs de un con la nuestro base de datos se desde servidor (JBoss Appplication Server) a se datasource est utilizando (en en caso donde MySql serealiza especifican Driver). los parmetros de conexin y el driver que Lea el archivo JSF_ColegioWeb/db/colegio-ds.xml con (direccin la que del se host: realizarn puerto/nombre las conexiones. de la base de datos), .el All se el nombre especifica de la usuario URL de la conexin contrasea

Este archivo especificaremos se debe a continuacin. desplegar junto con el war de db nuestra aplicacin en de el servidor loestn cual datasource Nota: configuradas Para las en para tareas su proyecto buscar de despliegue los en archivos la misma se utilizarn en carpeta la localizacin tareas como automticas original se encuentra del tutorial. en ANT el que tutorial. Copie el

13 / 13