9/9 Curso JEE5, Soa, Web Services, ESB y XML

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 DukesAgeService
para 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ón
JavaServer Faces. En el caso de esa aplicación, el fichero configura un
conjunto de recursos conteniendo mensajes, el bean DukesBDay y las
reglas de navegación de páginas.
− web.xml: El descriptor de despliegue de la aplicación, usado para
configurar aspectos de la aplicación instalada. En este caso, proporciona
un mapeo de la instancia de FacesServlet que acepta peticiones de
entrada, las pasa al ciclo de vida para procesarlas e inicializa los recursos.

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 CursoSOAbp-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:CursoSOAbp-projectadmin-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 clase
sea un extremo o endpoint Web Service, y finalmente
añadiremos el método getDukesAge para calcular y devolver
la 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.
• 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:
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;

• 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.

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 estado
conversacional 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 estado
conversacional, usaríamos stateful session beans .
− Para crear DukesBirthdayBean se necesita crear dos ficheros
fuente 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 como
está..

Codificando
• Setting the Context Root
Especificaremos el context root o contexto raíz para identificar la aplicación
web 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 interface
DukesBirthdayRemote 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.

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 Date
theirBirthday.setTime(date);

// Subtract the user's age from Duke's age
ageDifference = 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 difference
if (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ça
bajo Source Packages->com.sun.firstcup.ejb.
− Hacemos click derecho en la ventan editor y elegimos
Fix Imports.
− Seleccionamos java.util.Date como nombre completamente
cualificado 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 incluye
una página index.jsp que redirige a los usuarios a la página greeting.jsp cuando ellos
introducen 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 para
obtener 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.
− 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 los
mensajes de error usados por las páginas JSP. El cliente firstcup soporta tanto
locales en Inglés como en Español. Además, necesitamos crear dos ficheros
de propiedades, de modo que cada uno de ellos contengan los mensajes
correspondientes 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.

Codificando
• Creando un paquete de recursos (y II)
− Después de que NetBeans cree el fichero de propiedades, copiar estos
líneas al fichero
Welcome=Hola. Mi nombre es Duke. Veamos quien es mas viejo -- Tu o yo. Welcome=Hi. My name is Duke. Let us find out who is older -- You or me.
DukeIs=Duke tiene DukeIs=Duke is
YearsOldToday=años a dia de hoy. YearsOldToday=years old today.
Instructions=Introduce tu fecha de cumpleaños y haz click en enviar o submit. Instructions=Enter your birthday and click submit.
YourBD=Tu cumpleaños YourBD=Your birthday
Pattern=MM/dd/yyyy Pattern=MM/dd/yyyy
DateError=Por favor, introduce la fecha en formato MM/dd/yyyy. DateError=Please enter the date in the form MM/dd/yyyy.
YouAre=Tu eres-tienes YouAre=You are
Year=Año Year=year
Years=años Years=years
Older=mas viejo que Duke! Older=older than Duke!
Younger=mas joven que Duke! Younger=younger than Duke!
SameAge=la misma edad que Duke! SameAge= the same age as Duke!
Submit=Enviar Submit=Submit
Back=Atras Back=Back

− 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.

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:
<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>
• El elemento base-name del elemento resource-bundle identifica en nombre
completamente cualificado de la clase en el resource bundle. El elemento var identifica
el 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.

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

El módulo firstcup-war depende de algunas clases en el módulo
firstcup-ejb. Necesitamos decirle a Netbeans que esta
dependencia 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:CursoSOAfirstcup.
− 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én
temporal de datos para los valores de una página determinada de JavaServer Faces.
Un managed bean (bean administrado) es un componente JavaBeans que una
aplicació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.

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 Fix
Imports.

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 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 que
obtenga el valor esperado en esta sentencia:
age = port.getDukesAge();
− Ahora eliminamos la siguiente línea del método getAge
System.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 sentencia
return, 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 por
primera vez, y termina cuando la sesión de usuario finaliza voluntariamente
o 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 seleccionamos
JavaServer 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. Especificamos
session 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 edad
actual 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.
− 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</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) para
representar componentes de UI (User Interface), convertidores, validadores y receptores de
eventos (event listeners) en una página JSP. Una etiqueta a medida proporciona un medio
para 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 etiquetas
en distintas páginas JSP. Véase Custom Tags.
− Las Custom tags se definen en tag libraries (bibliotecas de etiquetas). La tecnología
JavaServer 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 para
representar tipos convertidores, validadores de datos, receptores de eventos (evente
listeners) y otras funciones y objetos. De forma similar, a las etiquetas de componentes, cada
instancia 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: para
especificar 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 ciclio
de vida, recorrerá el árbol de componentes y ejecutará tareas tales como convertir
los valores de los componentes al tipo adecuado, validar los valores de los
componentes y almacenarlos en backing beans.
− Toda página JSP que use JavaServer Faces debe incluir una etiqueta view, que
está 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 estar
incluí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 estar
dentro de la etiqueta form.
− Para añadir las etiquetas view y form a la página, pegamos el siguiente código
despué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 resource
bundle con el nombre bundle, lo cual ya habíamos configurado.

Codificando
Añ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 outputText
que 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 outputText
que 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-war
2. Seleccionar New->JSP del menú popup
3. Introducir response en campo JSP File Name
4. Click en Finish
5. 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 than
Duke!"; 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 commandButton
para 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
• 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

9/9 Curso JEE5, Soa, Web Services, ESB y XML

Más contenido relacionado

La actualidad más candente (19)

Destacado (8)

Similar a 9/9 Curso JEE5, Soa, Web Services, ESB y XML (20)

Más de Juan Carlos Rubio Pineda (14)

9/9 Curso JEE5, Soa, Web Services, ESB y XML