Una aplicación JEE5 completa:First Cup

Arquitectura de la aplicación• La aplicación First Cup tiene tres componentes

principales:− DukesAgeService: Un servicio Web que calcula la edad de

Duke, la mascota de Java. Duke nació el 23 de Mayo de 1995, cuando al primera demo de la tecnología Java fue lanzada oficialmente.

− DukesBirthdayBean: Un stateless enterprise Bean que calcula la diferencia entre la edad del usuario y la de Duke.

− Firstcup: Una aplicación web creada con la tecnología JavaServer Faces que accede al servicio DukesAgeServicepara mostrar la edad de Duke, lee la fecha proporcionada por el usuario, accede a DukesBirthdayBean para calcular quién es más viejo y muestra los años de diferencia entre el usuario y Duke.

Arquitectura de la aplicación• La aplicación web consta de lo siguiente:

− greeting.jsp: la página JSP en la que el usuario introduce una fecha.− response.jsp: la página JSP que le dice al usuario si es más viejo o joven

que Duke, basándose en la edad que introdujo en la página greeting.jsp.− DukesBDay.java: es un bean administrador por JavaServer Faces que

define las propiedades para capturar la fecha de nacimiento del usuario, conseguir la edad actual de Duke desde el Web Service, y tomar la diferencia de edad entre el usuario y Duke a través del enterprise bean.

− faces-config.xml: Un fichero para configurar recursos de la aplicaciónJavaServer Faces. En el caso de esa aplicación, el fichero configura un conjunto de recursos conteniendo mensajes, el bean DukesBDay y lasreglas de navegación de páginas.

− web.xml: El descriptor de despliegue de la aplicación, usado paraconfigurar aspectos de la aplicación instalada. En este caso, proporcionaun mapeo de la instancia de FacesServlet que acepta peticiones de entrada, las pasa al ciclo de vida para procesarlas e inicializa los recursos.

Codificando

Codificando• Crear un directorio para este ejemplo:

− Creamos la carpeta: C:\CursoSoa− Copiamos la carpeta bp-project en ella

• Especificando algunas cosas:− En el directorio CursoSOA\bp-project, copia el build.properties.sample file a

build.properties.− Abre en un editor de textos el fichero build.properties− Cambia el valor de javaee.home a el path de tu Application Server o

Glassfish. Usa siempre las barras “/” aunque estemos en Windows.− Cambia el valor de firstcup.tutorial.home a C:/CursoSoa− Elimina la palabra example del valor de la variable

javaee.server.passwordfile− Abre el archivo C:\CursoSOA\bp-project\admin-password.txt y

establecemos el valor de AS_ADMIN_PASSWORD a la password de nuestro AppServ. En nuestro caso: cursosoa

Codificando

• Creando el Web Service− DukesAgeService es un extremo (endpoint) JAX-WS

implementado como un Servlet.

− Comenzaremos creando un servlet, luego añadiremos la etiqueta o annotation @WebService para hacer que esa clasesea un extremo o endpoint Web Service, y finalmenteañadiremos el método getDukesAge para calcular y devolverla edad de Duke.

Codificando• Creando el extremo en netbeans

− Seleccionar File->New Project.− Seleccionar Web en el panel de Categories− Selecciona Web Application en el panel Projects− Click en Next.− Poner el nombre del proyecto a firstcup-dukes-age.− Poner Project Location el valor c:\CursoSoa.− Seleccionar Sun App. Server del menú Server.− Seleccionar Java EE 5 del menú J2EE version.− Dar el valor: /DukesAgeService a Context Path.− Click en Finish.− Ahora deberíamos poder ver el módulo que hemos creado en el panel

Projects. − En el panel Projects, hacemos click derecho en el fichero index.jsp y

borramos el archivo.

Codificando

• Creamos ahora la clase DukesAge:− Seleccionamos File->New File.

− Nos aseguramos de que está seleccionado firstcup-dukes-age en el menú de proyecto.

− Seleccionamos Java Classes en el panel de Categories.

− Seleccionamos Java Class en el panel File Types.

− Click en Next.

− Establecemos el Class Name a DukesAge.

− Establecemos Package al valor com.sun.firstcup.webservice.

− Click en Finish.• Ahora deberíamos poder ver el módulo creado en el panel Projects.

Codificando

• Etiquetamos la clase DukesAge como un Web Service− Añadimos la annotation @WebService a la clase.

@WebService

public class DukesAge {

...

}

− Borramos el constructor por defecto:public DukesAge() {

}

− Añadimos el método getDukesAge con tipo devuelto int.public int getDukesAge() {

}

Codificando• Añadimos la etiqueta @WebMethod a getDukesAge

@WebMethod

public int getDukesAge() {

}

• Añadimos el siguiente código a getDukesAge:

• Resolvemos los líneas de import− Hacemos click derecho en el editor de código y seleccionamos Fix Imports− En el diálogo Fix Imports, elegimos el paquete javax.jws.WebService− Seleccionamos File->Save en el menú para grabar lo que tenemos hasta ahora y

que se reflejen los cambios en el editor.

Calendar dukesBirthday = new GregorianCalendar(1995, Calendar.MAY, 23);Calendar now = Calendar.getInstance();

int dukesAge = now.get(Calendar.YEAR) - dukesBirthday.get(Calendar.YEAR);dukesBirthday.add(Calendar.YEAR, dukesAge);

if (now.before(dukesBirthday)) {dukesAge--;

}return dukesAge;

Codificando

• Construyendo y desplegando el Web Service− Construyendo el servicio DukesAgeService

• Seleccionamos firstcup-dukes-age en el panel Projects.

• Pulsamos click derecho firstcup-dukes-age y elegimos Build Project.

− Desplegando el Web Service endpoint:• El endpoint DukesAgeService fue empaquetado en un fichero WAR,

firstcup-dukes-age.war. Ahora desplegaremos este fichero en el App. Server.

• Seleccionamos firstcup-dukes-age en el panel Projects.

• Pulsamos click derecho en firstcup-dukes-age y elegimos Deploy Project.

Codificando

• Creando el Enterprise Bean− DukesBirthdayBean es un stateless session bean. Los beans

de sesión sin estado, son beans que no mantienen un estadoconversacional con un cliente. Con los stateless session beans el cliente hace peticiones aisladas que no dependen de ningún estado o petición previas. Si se requiere estadoconversacional, usaríamos stateful session beans .

− Para crear DukesBirthdayBean se necesita crear dos ficherosfuente Java: DukesBirthdayBean, la clase enterprise bean; y DukesBirthdayRemote, el enterprise bean business interface. La clase enterprise bean y el business interface son los dos únicos ficheros necesarios para crear un enterprise bean.

Codificando• Creando la Enterprise Application

− Ahora, crearemos el enterprise application archive (EAR) (archivo .EAR) que contendrá el enterprise Bean DukesBirthdayBean y el cliente web firstcup.

− Selecciona File->New Project.− Selecciona Enterprise en el panel Categories.− Selecciona Enterprise Application en el panel Projects.− Click en Next.− Dar el valor “firstcup” a Project Name.− Dar el valor C:\CursoSOA a Project Location.

− Por defecto, el asistente crea un módulo enterprise bean llamado firstcup-ejb y un módulo web application llamado firstcup-war. Dejamos todo comoestá..

− Click en Finish.

Codificando• Setting the Context Root

Especificaremos el context root o contexto raíz para identificar la aplicaciónweb dentro de un servidor J2EE.

− Expandimos el módulo firstcup en el panel Projects.− En el nodo Configuration File, hacemos doble click en el fichero

application.xml.− Ya en el fichero application.xml, localizamos el elemento context-root− Cambiamos el context root de /firstcup-war a /firstcup.− Seleccionamos File -> Save para grabar el fichero.− Ahora hacemos click derecho en el módulo firstcup-war en el panel

Projects.− Seleccionamos Properties en el menú emergente.− En el árbol de Categories, seleccionamos Run.− Cambiamos el Context Path a /firstcup.− Click en botón OK.

Codificando• Creando la clase Enterprise Bean DukesBirthdayBean

Ahora, crearemos los ficheros fuente tanto de la clase enterprise bean, como del business interface en NetBeans. El business interfaceDukesBirthdayRemote es un interfaz remoto (remote interface).

− Seleccionamos el projecto firstcup-ejb en el panel Projects.− Seleccionamos File->New File.− Seleccionamos Enterprise en el panel Categories.− Seleccionamos Session Bean en el panel File Types.− Click en botón Next.− Damos el valor DukesBirthdayBean a EJB Name.− Damos el valor com.sun.firstcup.ejb a Package name.− Establecemos el Session Type a Stateless.− Elegimos uncheck Local y check Remote en el área Create Interface.− Click en Finish.

Codificando• Modificando DukesBirthdayBean.java (I)

Ahora añadiremos el código que calcula la diferencia en años entre Duke y el usuario.

− En DukesBirthdayBean.java,borramos el constructor por defecto vacío que NetBeans ha generado.

− Justo después de la declaración de clase, pegamos el siguiente código:private static Logger logger = Logger.getLogger("com.sun.firstcup.ejb.DukesBirthdayBean");public int getAgeDifference(Date date) {

int ageDifference;

Calendar theirBirthday = new GregorianCalendar();Calendar dukesBirthday = new GregorianCalendar(1995, Calendar.MAY, 23);

// Set the Calendar object to the passed in DatetheirBirthday.setTime(date);

// Subtract the user's age from Duke's ageageDifference = dukesBirthday.get(Calendar.YEAR) - theirBirthday.get(Calendar.YEAR);logger.info("Raw ageDifference is: " + ageDifference);// Check to see if Duke's birthday occurs before the user's. If so, // subtract one from the age differenceif (dukesBirthday.before(theirBirthday) && (ageDifference > 0)) {

ageDifference--;}logger.info("Final ageDifference is: " + ageDifference);

return ageDifference;}

Codificando

• Modificando DukesBirthdayBean.java (II)− Hacemos click derecho en la ventana de editor y

seleccionamos Fix Imports.

− Elegimos:• java.util.logging.Logger para la clase Logger.

• java.util.Date para la clase Date.

− Click en OK

− Hacemos click derecho dentro del nuevo método getAgeDifference y seleccionamos EJB Methods->Add to Remote Interface.

− Seleccionamos File->Save

Codificando

• Modificando DukesBirthdayBean.java (y III)− Expandimos el mçodulo firstcup-ejb en el panel Projects.

− Hacemos doble click en DukesBirthdayRemote.java que estçabajo Source Packages->com.sun.firstcup.ejb.

− Hacemos click derecho en la ventan editor y elegimosFix Imports.

− Seleccionamos java.util.Date como nombre completamentecualificado de la clase Date y pulsamos OK.

− Borramos la cláusula throws de la definición del método, de modo que nos quedemos sólo con lo siguiente:int getAgeDifference(Date date); <-OJO AL “;”

− Seleccionamos File->Save.

Codificando

• Creando el cliente Web

Codificando• Estableciendo que firstcup-war tenga soporte a JavaServer Faces (I)

1. Hacemos click derecho en el módulo firstcup-war de la Enterprise Application firstcup en el panel Projects.

2. Seleccionamos Properties en el menú emergente.

3. Seleccionamos Frameworks en el árbol Categories.

4. Click en Add.

5. Seleccionamos JavaServer Faces en la lista que aparece.

6. Click en botón OK.

7. Cambiamos el valor de servlet URL mapping a /firstcupWeb/* <-OJO AL *1. Este path será el path de la instancia de FacesServlet. Todas las peticiones deben incluir

este path en la comunicación entre el context path de la aplicación y la página en la URL. Los usuarios no tienen que incluir este path en la URL porque firstcup ya incluyeuna página index.jsp que redirige a los usuarios a la página greeting.jsp cuando ellosintroducen esta URL: http://localhost:8080/firstcup

8. Deseleccionamos el checkbox “validate xml”

9. Click en botón OK

Codificando• Estableciendo que firstcup-war tenga soporte a JavaServer

Faces (y II)Los pasos que quedan, enseñan cómo llevar a cabo la redirección desde la página index.jsp hacia la página greeting.jsp.

− Expandir el módulo firstcup-war en el panel Projects y hacer doble click en Web Pages.

− Hacer click derecho en welcomeJSF.jsp, seleccionar Delete del menúemergente y pulsar Yes en la ventana de diálogo.

− Hacer doble click en index.jsp. − NetBeans generó este fichero cuando creamos el projecto firstcup.− Borrar todo lo que hay en la página.− Introducir lo siguiente en la página JSP:

<jsp:forward page="/firstcupWeb/greeting.jsp"/>

− Grabar los cambios con File -> Save.

Codificando• Creando un cliente Web Service para el módulo Web de

firstcup-war

EL módulo web firstcup-war debe consumir el web service firstcup-dukes-age paraobtener la edad actual de Duke. Para que esto sea posible, se necesita un cliente web service para el módulo web firstcup-war.− Seleccionar firstcup-war del panel Project.− Seleccionar File -> New File.− Seleccionar Web Services del panel Categories.− Seleccionar Web Service client del panel File Types.− Click en botón Next.− Seleccionar WSDL URL.− Dentro del campo WSDL URL, teclear la siguiente dirección del fichero WSDL del web service

que nuestro cliente web service va a consumir. http://localhost:8080/DukesAgeService/DukesAgeService?WSDL

− En el campo Package, teclear el siguiente paquete donde se crearan los nuevos ficheros:com.sun.firstcup.webservice

− Click en botón Finish.

Codificando• Creando un paquete de recursos -Resource Bundle- (I)

En esta sección, crearemos el bloque que contendrá el texto estático y losmensajes de error usados por las páginas JSP. El cliente firstcup soporta tantolocales en Inglés como en Español. Además, necesitamos crear dos ficherosde propiedades, de modo que cada uno de ellos contengan los mensajescorrespondientes a los dos locales.

− Pulsar click derecho sobre firstcup-war en el panel Projects.− Seleccionar New -> File del menú emergente.− Seleccionar ahora Other en el panel de Categories− Seleccionar a hora Properties File en la ventana File Types− En la ventana de New Properties File, introducir WebMessages en el

campo File Name.− En el campo Folder, introducir src/java/com/sun/firstcup/web como

dirección del fichero.

− Click en botón Finish.

Codificando• Creando un paquete de recursos (y II)

− Después de que NetBeans cree el fichero de propiedades, copiar estoslíneas al fichero

− Estos mensajes serán referenciados en las páginas JSP.

− Ahora en el panel Projects, seleccionamos WebMessages.properties, pulsamos click derecho y elegimos Add locale. En la ventana emergente, buscamos en la zona de Predefined locales a es_ES_EURO –español/España/EURO

− Seleccionamos el nuevo fichero y lo traducimos. Grabamos.

− File->Refresh all files y refrescamos.

Welcome=Hi. My name is Duke. Let us find out who is older -- You or me. DukeIs=Duke isYearsOldToday=years old today.Instructions=Enter your birthday and click submit.YourBD=Your birthdayPattern=MM/dd/yyyyDateError=Please enter the date in the form MM/dd/yyyy.YouAre=You are Year=yearYears=yearsOlder=older than Duke!Younger=younger than Duke!SameAge= the same age as Duke!Submit=SubmitBack=Back

Welcome=Hola. Mi nombre es Duke. Veamos quien es mas viejo -- Tu o yo.DukeIs=Duke tieneYearsOldToday=años a dia de hoy.Instructions=Introduce tu fecha de cumpleaños y haz click en enviar o submit.YourBD=Tu cumpleañosPattern=MM/dd/yyyyDateError=Por favor, introduce la fecha en formato MM/dd/yyyy.YouAre=Tu eres-tienesYear=AñoYears=añosOlder=mas viejo que Duke!Younger=mas joven que Duke!SameAge=la misma edad que Duke!Submit=EnviarBack=Atras

Codificando• Configurando Resource Bundle (bloque de recursos) en su

fichero de configuración

• Expandir el módulo firstcup-war en el panel Projects

• Abrir la carpeta Web Pages -> WEB-INF y hacemos doble click en faces-config.xml.

• Antes de la etiqueta </faces-config> añadimos:

• El elemento base-name del elemento resource-bundle identifica en nombrecompletamente cualificado de la clase en el resource bundle. El elemento var identificael nombre con el que las páginas JSP referenciarán el resource bundle. A partir de ahora, será bundle simplemente. El elemento locale-config identifica los locales soportados por el resource bundle.

<application><resource-bundle>

<base-name>com.sun.firstcup.web.WebMessages</base-name><var>bundle</var>

</resource-bundle><locale-config><default-locale>en</default-locale><supported-locale>es</supported-locale>

</locale-config></application>

Codificando• Añadiendo una dependencia en el módulo Enterprise Bean.

El módulo firstcup-war depende de algunas clases en el módulofirstcup-ejb. Necesitamos decirle a Netbeans que estadependencia existe haciendo lo siguiente:.− Pulsamos click derecho en el módulo firstcup-war en el panel Projects− Seleccionamos Properties.− Seleccionamos Libraries del panel Categories− Seleccionamos Add Project.− Nos dirigimos a C:\CursoSOA\firstcup.− Seleccionamos el projecto firstcup-ejb− Click en Add Project JAR Files.− Nos aseguramos de que esté seleccionado Build Required Projects− Click en OK.

Codificando

• Creando la clase Managed Bean “DukesBDay”

• El componente JabaBean DukesBDay es un backing bean (bean de copia). Un backing bean es un managed bean de JavaServer Faces que actúa como almacéntemporal de datos para los valores de una página determinada de JavaServer Faces. Un managed bean (bean administrado) es un componente JavaBeans que unaaplicación JavaServer Faces instancia y almacena en su contexto (scope).

Codificando

• Creando una clase vacía− Hacemos click derecho sobre el módulo firstcup-war en el

panel Projects.

− Seleccionamos New -> Java Class

− Introducimos DukesBDay en el campo Class Name.

− Introducimos com.sun.firstcup.web en el campo Package.

− Click en Finish.

Codificando

• Añadiendo una referencia Enterprise Bean− Justo después d ela declaración de clase, añadimos una

variable private para almacenar una referencia al enterprise bean usando la´anotación@EJB:

@EJB

private DukesBirthdayRemote dukesBirthday;

− Acto seguido, pulsamos botón derecho del ratón sobre el código y en el menú emergente, elegimos la opción FixImports.

Codificando• Añadiendo propiedades al bean

En esta tarea, añadiremos las siguientes propiedades al bean DukesBDay:

− age para obtener la edad de Duke desde el Web Service

− yourBD Para almacenar la edad de nacimiento del usuario

− ageDiff Para obtener la diferencia de edad desde el Enterprise Bean

− absAgeDiff Para almacenar el valor absoluto de la diferencia de edad.

• Después de la declaración de la variable dukesBirthday, añadimos las siguientes variables prvate:− private int age;− private Date yourBD;− private int ageDiff;− private int absAgeDiff;

• Inicializamos las variables añadiendo lo siguiente dentro del constructor por defecto:− age = -1;− yourBD = null;− ageDiff = -1;− absAgeDiff = -1;

• Una vez más, debemos hacer un Fix Imports y File->Save.

Codificando

• Generando los métodos de acceso a las propiedades.− Seleccionamos DukesBDay

− Click derecho en la ventana de editor.

− En el menú emergente, seleccionamos Refactor->Encapsulate Fields

− En el diálogo Encapsulate Fields, deseleccionamos el check en getDukesBirthday y en setDukesBirthday.

− Click en botón Next.

− Click en botón Do Refactoring en el panel Refactoring al final de la ventana del IDE.

Este proceso debe crear dos métodos por cada propiedad: uno para obtener el valor y otro para establececerlo.

Codificando• Obteniendo la edad actual de Duke (I)

El código que añadiremos al método getAge accederá a la edad actual de Duke a través del Web Service.

− Expandimos el módulo: firstcup-war.− Expandimos Web Service References en el módulo firstcup-war.− Desde Web Service References, vamos a:

DukesAgeService->DukesAgeService->DukesAgePort->getDukesAge.− Arrastramos la operación getDukesAge desde dentro del nodo DukesAgePort al método

getAge que está en el editor en el fichero DukesBDay.java, directamente antes de la línea return age; de modo que el método getAge queda así:

public int getAge() {

try { // Call Web Service Operation

com.sun.firstcup.webservice.DukesAgeService service = new com.sun.firstcup.webservice.DukesAgeService();

com.sun.firstcup.webservice.DukesAge port = service.getDukesAgePort();

// TODO process result here

int result = port.getDukesAge();

System.out.println("Result = "+result);

} catch (Exception ex) {

// TODO handle custom exceptions here

}

return age;

}

Codificando

• Obteniendo la edad actual de Duke (y II)− En el método getAge de DukesBDay, cambiamos la línea:

int result = port.getDukesAge();

De modo que sea la variable age en vez de result la queobtenga el valor esperado en esta sentencia:

age = port.getDukesAge();

− Ahora eliminamos la siguiente línea del método getAgeSystem.out.println("Result = "+result);

Codificando• Obteniendo la diferencia de edad desde el Enterprise

Bean DukesBirthdayBean− En esta parte, añadiremos código al método getAgeDiff para

obtenet la diferencia de edad entre la edad del usuario y la eda de Duke desde el EJB, y para establecer el valor de la variable absAgeDiff al valor absoluto de esa diferencia.

− Dentro del método getAgeDiff, justo antes de la sentenciareturn, añadimos el siguiente código:

ageDiff = dukesBirthday.getAgeDifference(yourBD);if(ageDiff < 0){

setAbsAgeDiff(Math.abs(ageDiff));} else {

setAbsAgeDiff(ageDiff);}

Codificando• Configurando el Bean DukesBDay en el fichero de configuración

La tecnología JavaServer Faces permite usar el fichero de configuración para inicializar, configurar y almacenar managed beans en uno de los siguientes contextos:− request , que empieza cuando el usuario envía una página y finaliza

cuando se devuelve la respuesta.

− session , que comienza cuando el usuario accede a una página porprimera vez, y termina cuando la sesión de usuario finaliza voluntariamenteo por ejemplo, por exceso de tiempo (time out)

− application , que acaba cuando el servidor detiene la aplicación.

Una vez que es configurado un Bean, puede una página JavaServer Faces crear y acceder a ese bean.

Codificando• Configurando el Managed Bean “DukesBDay”

− Expandimos el módulo firstcup-war en el panel Projects.

− Abrimos la carpeta Web Pages -> WEB-INF.

− Hacemos doble click en faces-config.xml.

− Hacemos click derercho en la ventana de editor y seleccionamosJavaServer Faces -> Add Managed Bean.

− En el diálogo Add Managed Bean introducimos en el campo Bean Name el valor dukesBDay.

− Introducimos com.sun.firstcup.web.DukesBDay en el campo Bean Class.

− Seleccionamos session en el menú scope (alcance o contexto).

− Introducimos la cadena: DukesBDay backing bean en el campo Bean Description.

− Click en botón Add.

− Ahora deberíamos poder ver lo siguiente en el fichero faces-config.xml:<managed-bean>

<description>DukesBDay backing bean</description>

<managed-bean-name>dukesBDay</managed-bean-name>

<managed-bean-class>com.sun.firstcup.web.DukesBDay</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

− El elemento managed-bean-name es el nombre con el que las páginas JavaServer Faces se referirán al bean. El elemento managed-bean-class es el nombre de clase completamente cualificado del bean. El elemento managed-bean-scope es el contexto o alcance en el que el bean es guardado. Especificamossession scope porque necesitamos que una instancia del bean esté disponible durante toda la sesión, de modo que todas las páginas puedan acceder a los valores guardados en ese bean.

Codificando• Creando la página greeting.jsp

La página greeting.jsp incluye el mensaje de bienvenida, muestra la edadactual de Duke, y acepta la fecha de nacimiento del usuario. Para crear la página, se necesitarán realizar las tareas siguientes:

− Crear una página JSP vacía.− Declarar las librerías de etiquetas JavaServer Faces.− Añadir las etiquetas: f:view y h:form tag.− Añadir los componentes label para mostrar texto y mensajes localizados.− Añadir un componente input para aceptar la fecha de nacimiento del

usuario.− Registrar un convertidor en el componente input para convertir la fecha en

el tipo adecuado.− Añadir un mensaje de error a medida para mostrar si el proceso de

conversión falla.− Añadir un componente button para que el usuario pueda enviar (submit) la

página.

Codificando• Creating an Empty JSP Page

− Hacemos click derecho en el módulo firstcup-war del panel Projects.− Seleccionamos New -> JSP en el menú emergente.− Introducimos greeting en el campo JSP File Name.− Click en botón Finish.

− En el fichero greeting.jsp, después de la etiqueta html, reemplazamos la etiqueta head que ya esté en la página y añadimos la siguiente, que define el tipo de contenido (content type):

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Firstcup Greeting Page&lt;/title>

</head>

− Borramos las marcas de comienzo y fin de body.− Borramos del fichero la línea <h1>JSP Page</h1>.− Seleccionamos File -> Save para guardar el fichero.

Codificando• Declarando las librerías de etiquetas JavaServer Faces

− La tecnología JavaServer Faces define etiquetas JSP a medida (custom tags) pararepresentar componentes de UI (User Interface), convertidores, validadores y receptores de eventos (event listeners) en una página JSP. Una etiqueta a medida proporciona un mediopara referenciar lógica Java dentro de una página JSP, de modo que se libera al autor de incluir esa lógica en distintas páginas, permitiendo reusarla añadiendo las mismas etiquetasen distintas páginas JSP. Véase Custom Tags.

− Las Custom tags se definen en tag libraries (bibliotecas de etiquetas). La tecnologíaJavaServer Faces define dos bibliotecas de etiquetas. La HTML Render Kit library define todas las etiquetas estándar de componentes UI. Cada instancia de una etiqueta de componente usada en una página, representa a un componente objeto de tipo stateful en el servidor. La biblioteca central de etiquetas (Core Tag Library) define etiquetas pararepresentar tipos convertidores, validadores de datos, receptores de eventos (eventelisteners) y otras funciones y objetos. De forma similar, a las etiquetas de componentes, cadainstancia de un convertidor, validador o etiqueta listener, representa a un objeto en el servidor.

− Para usar etiquetas en una página, hay que declarar bibliotecas de etiquetas, de este modo:− Después de la marca </head> del fichero greeting.jsp, AÑADIMOS una declaración taglib

para la biblioteca HTML render kit tag:<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

Cuando usamos una etiqueta de esta librería de etiquetas, el desarrollador debe usar el prefijo h: paraespecificar en qué biblioteca de etiquetas está definido la etiqueta. La URI apunta a la definición de la biblioteca de etiquetas.

Después de la declaración anterior, añadimos una nueva declaración taglib de la core tag library; para ella, el prefijo a usar por el desarrollador será la f:

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>

Codificando• Añadiendo las etiquetas f:view y f:form

− Una página JavaServer Faces se representa por un árbol de compontes UI. Cuando la implementación de JavaServer Faces procesa la página durante su cicliode vida, recorrerá el árbol de componentes y ejecutará tareas tales como convertirlos valores de los componentes al tipo adecuado, validar los valores de loscomponentes y almacenarlos en backing beans.

− Toda página JSP que use JavaServer Faces debe incluir una etiqueta view, queestá definida en la core tag library. La etiqueta view representa la raíz del árbol de componentes. Todas las etiquetas de componentes JavaServer Faces deben estarincluídas dentro de la etiqueta view

− Una página típica JavaServer Faces también incluye un formulario en el que el usuario introduce algunos datos en campos de entrada, y pulsa el botón de enviar(submit típico). Si tiene un formulario, también tiene que tener una etiqueta form. Todos los componentes que formen parte del envío de datos (submit ) deben estardentro de la etiqueta form.

− Para añadir las etiquetas view y form a la página, pegamos el siguiente códigodespués de las declaraciones de biblioteca

<f:view><h:form></h:form>

</f:view>

Codificando• Añadiendo etiquetas de salida (output labels) para

mostrar contenido de solo lectura (I)− Uno de los componentes más comunmente usados es la etiqueta outputText, que

representa un componente de sólo lectura que únicamente muestra contenido.− La página greeting.jsp contienen etiquetas outputText que muestran el mensaje de

bienvenida, las instruciones, la etiqueta del componente input y la edad actual de Duke

− Las etiquetas outputText que muestran los mensajes localizados referencian a los mensajes procedentes del resource bundle que previamente habíamos configurado. La etiqueta outputText que muestra la edad de Duke referencia la edad de la propiedad age (edad) del bean DukesBDay

− Para referenciar valores para mostrar, las etiquetas outputText usan la sintaxis del lenguaje de expresión unificado (unified expression language). Esa sintaxis permite usar la notación . o [] (entre corchetes) para referenciar objetos y sus propiedades.

− El nombre con el cual una expresión referencia a un objeto se define en el fichero de configuración faces-config.xml. Nosotros nos referiremos a nuestro resourcebundle con el nombre bundle, lo cual ya habíamos configurado.

CodificandoAñadiendo etiquetas de salida (output labels) para mostrar contenido de solo lectura

(y II)− Para referenciar los valores de sólo lectura mostrados en la página greeting.jsp usando expresiones y etiquetas

outputText, añadiremos etiquetas entre las marcas de comienzo y final h:form. Añadimos una etiqueta outputTextque mostrará: "Hi. I'm Duke. Let's see who's older - you or me." Y le ponemos h2 para formatear:

<h2><h:outputText value="#{bundle.Welcome}"/></h2>− El atributo value de la etiqueta outputText especifica el texto a mostrar. En este caso, el atributo value usa una

expresión para referenciar el mensaje almacenado en el resource bundle, llamado bundle, bajo la clave welcome.

− Después de la etiqueta outputText que acabamos de añadir, añadimos una etiqueta outputText que mostrará: "Duke is".

<h:outputText value="#{bundle.DukeIs} "− Después de la etiqueta outputText que acabamos de añadir, incluiremos una etiqueta outputText que mostrará la

edad de Duke:

<h:outputText value="#{dukesBDay.age}“/>− La parte de la expresión dukesBDay se refiere al Bean dukesBDay. La parte age de la expresión ser refiere a la

propiedad age del bean dukesBDay.

− Después de la etiqueta outputText añadida en el paso anterior, añadiremos una etiqueta paragraph (párrafo) para mostrar las instruciones para rellenar el formulario.

<p><h:outputText value="#{bundle.Instructions}“/>− Después de la etiqueta outputText anterior, añadimos otra etiqueta paragraph (<p>) y una etiqueta outputText que

muestre la descripción para el componente input (el componente de entrada de nuestra fecha de nacimiento).

<p><h:outputText value="#{bundle.YourBD} "/>

Codificando• Añadir un componente input para aceptar la fecha de nacimiento del usuario

− Otra etiqueta muy usada es la etiqueta inputText. Esta etiqueta representa un campo de texto, que acepta una entrada desde el usuario. La etiqueta inputText

− también usa expresiones para referenciar valores.− Sin embargo, la etiqueta inputText también puede usar expresiones para extablecer

valores además de para obtenerlos. − La etiqueta inputText en la página greeting.jsp, acepta la fecha de nacimiento del

usuario y establece este valor a la propiedad yourBD del bean DukesBDay.− Añadimos el siguiente código justo después de la etiqueta outputText del paso

anterior:<h:inputText id="userBirthday"></h:inputText>

− Después, registraremos un convertidor (converter) en este componente. Cualquier mensaje de error mostrado como resultado de un fallo de conversión refereniará al atributo id.

− Añadimos un atributo value a la etiqueta inputText que referencia la propiedad yourBD de DukesBDay:

<h:inputText id="userBirthday"value="#{dukesBDay.yourBD}"></h:inputText>

Codificando• Registrando un converter (convertidor) en el componente input

− La tecnología JavaServer Faces incluye un conjunto estándar de convertidores (converters) y validadores (validators) que pueden registrarse en componentes,

− con la finalidad de convertir y validar sus datos. Se registra un convertidor o un validador anidando la etiqueta que representa al convertidor o validador dentro de la etiqueta del componente input.

− Añadimos una etiqueta f:convertDateTime dentro de la etiqueta inputText y especificamos el formato aceptable de la entrada

<f:convertDateTime pattern="MM/dd/yyyy" /><h:inputText ...></h:inputText>

− Si el usuario no introduce algo que pueda ser convertido a un tipo Date(fecha), o la fecha que se introduce no cumple el patrón especificado, tiene lugar un error de conversión. Más adelante veremos cómo crear un mensaje de error y cómo mostrarlo.

− Después de la etiqueta </h:inputText>, añadimos una etiqueta outputTextque le dirá al usuario cuál es el patrón esperado.

<h:outputText value=" #{bundle.Pattern}“/>

Codificando• Añadiendo un mensaje de error para mostrar si la conversión

falla− Para especificar que se muestre un mensaje de error si la conversión falla, hacemos lo

siguiente:− Añadimos un atributo converterMessage a la etiqueta inputText y la usamos para detallar el

mensaje de error:<h:inputText id="userBirthday"

value="#{dukesBDay.yourBD}"

converterMessage="#{bundle.DateError}"

</h:inputText>

− Si la conversión de la entrada del usuario falla, se mostrará el siguiente mensaje que estáalmacenado en la clave DateError del resource bundle:

Please enter the date in the format MM/dd/yyyy

− Ahora añadimos una etiqueta paragraph seguido de una etiqueta message para indicar dónde debe aparecer el mensaje, justo antes de </h:form>:

<p><h:message for="userBirthday" style="color:red"/>

</h:form>

− El atributo style indica el estilo del mensaje de error. En este caso, el texto del mensaje irá en rojo. El atributo for hace referencia al ID del componente que generó el error.

Codificando• Añadir un botón para enviar (submit) el formulario

− Para que el usuario envíe el formulario con su fecha de nacimiento al servidor, se necesita añadir un botón de submit.

− Justo ANTES de la etiqueta message que se añadió en la sección anterior, añadimos la siguiente etiqueta paragraph y la etiqueta commandButton:

<p><h:commandButton value ="#{bundle.Submit}" action ="success"/>

<p><h:message for="userBirthday" style="color:red"/>

</h:form>

− File->Save

• El atributo value indica el texto mostrado en el botón. Una vez más, se puede usar una expresión para este valor.

• El atributo action indica una salida lógica, que informa al sistema de navegación qué página mostrar a continuación.

Codificando• Definiendo la navegación de página (Navigation):

− La tecnología JavaServer Faces soporta un potente sistema basado en reglas para definir el flujo de páginas de una aplicación. Estas reglas, se definen en el fichero de configuración faces-config.xml.

1. Expandimos el módulo firstcup-war del árbol Projects

2. Abrimos las carpetas Web Pages -> WEB-INF.

3. Doble-click en faces-config.xml.

4. Click-Derecho en la ventana de editor, y en el menú emergente, seleccionar JavaServer Faces -> Add Navigation Rule.

5. En el diálogo que aparece, introducimos /greeting.jsp en el campo Rule from View

6. Click en Add

7. Repetimos el proceso del punto 4 al 6, pero dando esta vez el valor /response.jsp al campo Rule from View

8. Click-derecho otra vez en el editor y seleccionamos JavaServer Faces -> Add Navigation Case.

9. Seleccionamos /greeting.jsp del menú From View

10. Introducimos success en el campo From Outcome

11. Seleccionamos /response.jsp del menú To View

12. Click en Add

13. Repetimos los pasos del 8 al 12, excepto que ahora seleccionamos /response.jsp del menú From View y seleccionar /greeting.jsp del menú To View (de nuevo introducir Success en el campo From Outcome).

Ahora deberíamos ver dos reglas de navegación, una que define cómo navegar desde greeeting.jsp hacia response.jsp, y otra que define cómo navegar desde response.jsp hacia greeting.jsp. La etiqueta from-view-id indica cuál es la página actual. La etiqueta to-view-id indica a qué página nos dirigirnos.

Recordamos que en la sección en la que añadimos un botón con la etiqueta commandButton con el atributo action que indicaba una cadena lógica de salida (success). Cuando se pulsa el botón, el sistema de navegación intenta hacer corresponder el ID de página actual con la salida lógica a una regla de navegación. Si encuentra una correspondencia, navegará hacia la página que la regla especifica en la etiqueta to-view-id

14. File->Save

Codificando• Creando la página response.jsp (I)

1. Click derecho en el módulo firstcup-war2. Seleccionar New->JSP del menú popup3. Introducir response en campo JSP File Name4. Click en Finish5. En el fichero response.jsp, después de la etiqueta html,

reemplazamos la etiqueta head que deja el asistente con la siguiente:

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Response Page</title></head>

6. (básicamente, lo que cambia es el valor de title )

Codificando• Creando la página response.jsp (II)

− Borramos las marcas de comienzo y final de body− Borramos la línea: <h1>JSP Page</h2>− Añadimos las siguientes declaraciones taglib justo después de la etiqueta </head>:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

− Después de las declaraciones taglib, añadimos las etiquetas <f:view> y </f:view>− Entre las marcas f:view, añadimos las etiquetas <h:form> y </h:form>− Entre las marcas h:form, incluímos las siguientes líneas:

<h2><h:outputText value="#{bundle.YouAre} "/>

<h:outputText value="#{bundle.SameAge}" rendered="#{dukesBDay.ageDiff == 0}"/>

<h:outputText value="#{dukesBDay.absAgeDiff}" rendered="#{dukesBDay.ageDiff < 0}"/>

<h:outputText value=" #{bundle.Year} " rendered="#{dukesBDay.ageDiff == -1}"/>

<h:outputText value=" #{bundle.Years} " rendered="#{dukesBDay.ageDiff < -1}"/>

<h:outputText value="#{bundle.Younger}" rendered="#{dukesBDay.ageDiff < 0}"/>

<h:outputText value="#{dukesBDay.absAgeDiff}" rendered="#{dukesBDay.ageDiff > 0}"/>

<h:outputText value=" #{bundle.Year} " rendered="#{dukesBDay.ageDiff == 1}"/>

<h:outputText value=" #{bundle.Years} " rendered="#{dukesBDay.ageDiff > 1}"/>

<h:outputText value="#{bundle.Older}" rendered="#{dukesBDay.ageDiff > 0}"/>

Codificando• Creando la página response.jsp (y III)

Las etiquetas outputText de la página response.jsp usan el atributo rendered para controlar cuál de las etiquetas tienen contenido. Repasemos el conjunto de etiquetas outputText:

− La primera etiqueta mostrará el texto "You are"− El atributo rendered en la segunda etiqueta outputText referencia una expresión que

comprueba si la propiedad ageDiff de DukesBDay es igual a cero. Si esta expresión devuelve true, entonces se presentará el mensaje referenciado por el valor de la etiqueta. Este mensaje es "the same age as Duke"

− El atributo value de la tercera etiqueta referencia la propiedad absAgeDiff de DukesBDay. Esta propiedad almacena el valor absoluto de la diferencia de edad.

− Las expresiones referenciadas por los atributos rendered de las etiquetas cuarta y quinta comprueban si la diferencia de edad es o no igual a -1 o menor que --1 para determinar si la diferencia de edad es sólo de un año o más de un año, de modo que se presente "year" o "years" (en plural).

− La sexta etiqueta comprueba si ageDiff es menor que cero. Si es cierto, entonces se presentará el valor absoluto de la diferencia de edad junto con el mensaje "younger thanDuke!"; por ejemplo: "You are 10 years younger than Duke!".

− El último grupo de etiquetas funciona de forma similar al grupo previo, salvo que sus atributos rendered comprueban diferencias de edad superiores a cero, indicando que el usuario es más viejo que Duke.

− Antes de la marca </h:form>, añadimos las siguiente línea con una etiqueta commandButtonpara presentar un botón que se usará para regresar a la página greeting.jsp

<p><h:commandButton id="back" value="#{bundle.Back}" action="success"/>

− File->Save

Codificando• Haciendo el Building, Packaging y Deploying

(construcción, empaquetado y despliegue) de la Enterprise Application "firstcup"− En esta sección, se construirá el DukesBirthdayBean y el

cliente web firstcup, se empaquetará en un fichero EAR, se desplegará el EAR al servidor y se ejecutará la aplicación.

• Consta de estos tareas:− Preparando el descriptor de despliegue− Haciendo el Building y el Packaging de la Enterprise

Application− Desplegando (deploying) la la Enterprise Application firstcup− Ejecutando la aplicación firstcup

Codificando• Preparando el descriptor de despliegue

En esta tarea, borraremos algunos parámetros extra del descriptor de despliegue del módulo firstcup-war. Netbeans genera estos parámetros, pero no son necesarios para nuestro ejemplo.

− Expandir el módulo firstcup-war en el panel Projects− Expandir el directorio Configuration Files− Doble click en web.xml− Click "General" en la zona superior de la ventana de editor.− Seleccionar el signo "+" junto a Context Parameters− Desde la tabla Context Parameters, seleccionar el primer parámetro de

context en la tabla, y hacer click en Remove. Borrar así todos los parámetros.

− Pulsamos XML en la zona superior de la ventana de editor.− Borramos el elemento welcome-file-list y todo su contenido.− File->Save

Codificando• Haciendo el Building y el Packaging de la Enterprise Application

− Construiremos y empaquetaremos el enterprise bean DukesBirthdayBean y el cliente web firstcup dentro de un fichero EAR, firstcup.ear, en el directorio dist

− Seleccionamos firstcup en el panel Projects

− Hacemos Click derecho en firstcup y seleccionamos Build Project

• Desplegando (deploying) la la Enterprise Application firstcup− Seleccionar firstcup en el panel Projects

− Hacemos click derecho en firstcup y seleccionamos Deploy Project

Codificando

• Ejecutando la aplicación firstcup− Lanzamos un navegador de internet.

− Introducimos la siguiente URL: http://localhost:8080/firstcup

− Introducimos nuestra fecha de nacimiento en el campo de texto "Your BirthDay". Nos aseguramos de que cumpla el patrón MM/dd/yyyy

− Click en botón Submit

− Después de que se lance la página response.jsp, hacemos click en el botón back hacia la página greeting.jsp

Depurando• Solución de bugs de Application Server y glassfish 9

− Aunque en la versión beta actual de Glashfish, el core de Sun App. Server ya está solucionado este problema, se mostrará cómo salir del apuro en la versión estable 9 usada en este curso.

• Si al hacer el deploy, nos encontramos con este mensaje de error:"Cannot determine the Java EE module type“

• Junto con un path a un directorio temporal que cuelga de “Configuración local”

• Entonces tenemos del bug de la ubicación multibyte (por culpa de la ó)

− Solución: Cambiar la variable de entorno TMP a c:\temp, previa creación del directorio si no existiese.

− Más información

• http://www.netbeans.org/issues/show_bug.cgi?id=70391

• https://glassfish.dev.java.net/issues/show_bug.cgi?id=601

Ejecutando

• Ejemplos:

Ejecutando

• Ejemplo de usuario más viejo que Duke

Vemos que nuestra aplicación es un

poco impertinente.

Ejecutando

• Más ejemplos: mentimos un poco… usuario más joven que Duke

Ejecutando

• Más ejemplos: usuario que nace el mismo día que Duke: 23 de Mayo de 1995

Ejecutando

• Más ejemplos: no seguimos el patrón

☺Nos equivocamos a

propósito…Y la aplicación nos corrige.

Final

FIN DE LA PRESENTACIÓN