Professional Documents
Culture Documents
1. INTRODUCCIÓN ...............................................................................1
2. CREACIÓN DE UNA APLICACIÓN WEB CON JSF ...............................13
3. USANDO ADF FACES TABLES...........................................................45
4. USANDO ADF FACES TREE ..............................................................71
5. MENÚS ...........................................................................................97
GLOSARIO .........................................................................................119
REFERENCIAS WEB ............................................................................121
BIBLIOGRAFÍA ..................................................................................123
índice_ 1 Introducción
1
1 Introducción
JavaServer Faces (JSF) es un framework estándar Java que permite construir aplicaciones
Web. Se define por las especificaciones JSR 127, JSR 252 y JSR 276 e implementa el
patrón Modelo-Vista-Controlador (MVC).
Dicho modelo MVC es un patrón de arquitectura de desarrollo software que separa las
aplicaciones en tres capas diferenciadas: datos (Modelo), interfaz de usuario (Vista) y lógica
de control (Controlador). Esto permite una separación entre la interfaz de usuario y la lógica
que hace que el mantenimiento de las aplicaciones JSF sea sencillo.
JSF es un conjunto de componentes de usuario (UI) que permite construir la capa de vista
de las aplicaciones Web. Así, proporciona un conjunto de APIs para desarrollar estos
componentes UI y gestionar su funcionamiento mediante el tratamiento de eventos, la
validaciones de entrada, la definición de la navegación entre páginas y el soporte de
accesibilidad.
Asimismo, JSF trata el interfaz de usuario (Vista) de una forma parecida al estilo de Swing o
Visual Basic, realizando su programación a través de componentes y basada en eventos.
Además, las clases de componentes UI incluidas en JSF encapsulan su funcionalidad y no la
presentación en un tipo de cliente específico por lo que esto permite poder ser pintados en
distintos clientes.
Por otro lado, JSF permite también la creación de nuestros propios componentes UI
personalizados a partir de la extensión de los ya existentes e incluye la propiedad de
“render” para pintarlos según nos convenga.
3
1 Introducción
Además, la tecnología JSF ha sido diseñada para ser flexible al contrario que otras
tecnologías actuales que exigen la utilización de lenguajes de marcadores, protocolos o el
uso de determinados clientes.
Por todo esto, JSF es fácil de usar, su arquitectura define claramente una separación entre
las capas de lógica y presentación permitiendo que la conexión entre ambas sea sencilla.
Este diseño posibilita a cada miembro del equipo de desarrollo centrarse en la parte de la
aplicación que le corresponde desarrollar, proporcionando además un modelo de
programación sencilla que simplifica la posterior unión de todos los módulos. De esta forma,
desarrolladores Web sin experiencia pueden utilizar componentes UI de JSF en sus páginas
Web sin escribir apenas código.
Por último, destacar que JSF resulta atractivo tanto para desarrolladores noveles como
expertos. Los primeros podrán comprobar cómo se añaden componentes a una página con
un simple “drag and drop” (es fácil de usar y muy visual) mientras que los segundos
encontrarán un estándar robusto que les ofrece mucho potencial y flexibilidad para
programar.
En este apartado describiremos las principales características de JSF frente a uno de los
framework de desarrollo más extendidos (Struts), con el objeto de obtener una regla de
valoración en cuanto a qué nos aporta JSF.
Debido a que Struts es un framework mucho más maduro que JSF (éste tan sólo lleva dos
años utilizándose), en principio, puede parecer mucho más seguro y rentable abordar el
desarrollo de una aplicación utilizándolo. No obstante, como veremos, esto no tiene por qué
ser así en todos los casos, ya que, JSF además de ser un framework con mucho potencial,
presenta ventajas sobre Struts como por ejemplo, que JSF proporciona la capacidad de
construir componentes desde distintas tecnologías por lo que se presta a ser desarrollado
desde una amplia variedad de herramientas.
Por otra parte, aunque Struts se diseñó inicialmente para ser independiente de la capa del
modelo, normalmente los datos de las páginas deben pasar al ActionForm siguiendo un
modelo específico de entrada, lo que requiere realizar codificación manual. JSF, sin embargo,
oculta los detalles de los datos dentro del árbol componentes, permitiendo vincular a
cualquier clase Java componentes ricos como rejillas de datos.
4
1 Introducción
1.2.1. Escalabilidad
Tanto Struts como JSF proporcionan un nivel de escalabilidad tal que les permite satisfacer
futuros requerimientos. Así, una de las características de Struts es poseer una clase
RequestProcessor que tiene varios métodos para recuperar información a lo largo de todo
el ciclo de vida de la petición. Podemos extender esta clase con el objetivo de reemplazar o
mejorar el framework.
1.2.2. Controlador
JSF, sin embargo, utiliza el patrón Page Controller. Aunque sólo dispone de un único
servlet para recibir página con componentes, se ejecutarán distintos eventos por cada uno
de ellos, traduciéndolos gracias a un traductor de componentes.
Asimismo, los componentes también pueden vincularse a los datos desde el Modelo. De esta
forma, JSF añade más ventajas al Controlador y, al mismo tiempo, proporciona toda la
flexibilidad del patrón Page Controller.
Como hemos indicado, JSF puede tener varios manejadores de eventos en una sola página
mientras que Struts sólo es capaz de procesar un evento por petición. Además, con Struts el
ActionForm debe extender clases creando así otra capa de código engorroso y con
posibilidad de diseñarse mal, forzando de esta forma a la capa de modelo a ser un
ActionForm. Sin embargo, en JSF esta capa es totalmente independiente.
5
1 Introducción
1.2.3. Navegación
<action-mappings>
<action name="myForm" path="/myACtion" scope="request"
type="strutsnav.actions.MyAction">
<forward name="success" path="./target.jsp">
</forward>
<forward name="error" path="./error.jsp">
</forward>
</action>
</action-mappings>
6
1 Introducción
try {
// …
} catch (Exception e) {
// Error
errors.add("name", new ActionError("id"));
forward = mapping.findForward("success");
return (forward);
}
forward = mapping.findForward("success");
return (forward);
}
<navigation-rule>
<from-view-id>/FromPage.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/ToPage.jsp</to-view-id>
</navigation-case>
</navigation-rule>
7
1 Introducción
<navigation-rule>
<from-view-id>/FromPage.jsp</from-view-id>
<navigation-case>
<from-action>#{pc_FromPage.doButton1Action}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/ToPage.jsp</to-view-id>
</navigation-case>
</navigation-rule>
1.2.4. Conclusiones
Como hemos podido observar, aunque tanto Struts como JSF son suficientemente flexibles
desde el punto de vista de la navegación, JSF permite una mayor flexibilidad y un mejor
diseño de las reglas. Además, es mucho más sencillo en JSF tener una página con varias
reglas de navegación sin necesidad de codificar un montón de lógica del tipo if-else. Por
todo ello, es posible preveer que JSF superará a Struts debido a la flexibilidad de su
controlador y a la navegación.
Como hemos podido ver, en general, JSF es mucho más flexible que Struts (que no deja de
ser un framework robusto que funciona bien). Volviendo al principio de este punto, en el que
8
1 Introducción
indicábamos que a priori por ser más maduro parecía más rentable el uso de Struts,
debemos decir que cuando se piensa en abordar un nuevo proyecto hay que considerar
muchos factores. Así, por ejemplo, si estamos limitados por un calendario ajustado y sin
tiempo para evaluar diferentes proveedores que nos den soporte de implementaciones de
JSF, lo más conservador es decantarse por el uso de Struts.
Sin embargo, para seguir una dirección estratégica y un modelo de programación, la opción
seleccionada para el desarrollo de nuevas aplicaciones debería ser JSF. Es por todo esto que
merece la pena que los desarrolladores inviertan tiempo en aprender JSF y se utilice. JSF es
más sencillo que Struts cuando se desarrolla manualmente, incrementándose de manera
notable la productividad al utilizar un IDE de Desarrollo de Aplicaciones como Jdeveloper.
Por otra parte, ADF Faces es la implementación que Oracle hace de JSF y se basa en el
patrón MVC. Nos centraremos en presentar la capa de la Vista que proporciona la interfaz de
usuario de la aplicación. Comprobaremos que la ventaja principal de ADF Faces es la gran
cantidad de componentes que proporciona. La idea es no tener que escribir la funcionalidad
de las Interfaces de Usuario (UI) cada vez que las necesitamos. Así, bastaría con usar el
componente adecuado, evitando de esta forma el desorden en el código de los lenguajes de
marcadores y abstrayéndonos del http.
Escribir componentes JSF quizás no sea una tarea sencilla, pero usarlos es tan simple como
una llamada a una etiqueta. Ésta es precisamente la fortaleza de ADF Faces. Imaginemos
que existe una comunidad de personas que contribuyen a crear componentes y añadirles
cualquier funcionalidad que sea posible. De esta forma, no tendríamos que escribir más
código UI, simplemente usaríamos componentes ADF Faces.
Los componentes ADF Faces tienen una arquitectura interesante que está basada en una
clara división de responsabilidades. De esta forma, el componente define su propio
comportamiento o funcionalidad y el pintado que describe la presentación.
9
1 Introducción
Por ejemplo, podemos tener un componente que define cómo un usuario selecciona una
única opción; y en el pintado, definir cómo se hace por un botón de tipo radio o una lista
desplegable.
Asimismo, es posible agrupar distintas formas de pintado en un kit de pintado, lo que nos
permite disponer de un kit para HTML y otro para WML (teléfonos móviles). De esta forma, la
lógica del componente queda separada e independiente del dispositivo en el que se muestra.
ADF Faces incluye más de 100 componentes que nos proporcionan un gran potencial. Hay
componentes del tipo selectores de color, listas de valores y calendarios que pueden
utilizarse de formas distintas. También proporciona componentes más complejos como tablas
que permiten la ordenación por columnas y la capacidad de mostrarlas u ocultarlas, o
componentes de tipo árbol que pueden mostrar datos de un modo jerárquico.
Por otro lado, no todos los componentes que proporciona ADF son gráficos, dispone de otros
más orientados a realizar interacciones con el usuario, como el componente que permite la
subida de ficheros. También hay otro componente diseñado para establecer diálogos con
usuarios y tener la capacidad de devolver el foco al punto donde se inició el diálogo (algo no
siempre sencillo de realizar).
Además, y dado que un gran número de fábricas y almacenes utilizan dispositivos telnet,
ADF proporciona un kit de pintado para este tipo de dispositivos.
Como hemos podido ver, ADF Faces nos proporciona un interesante y completo conjunto de
componentes para comenzar a desarrollar aplicando JSF.
Además de esta implementación, existe una versión open source a partir de código
proporcionado por Oracle a Apache. El nombre inicial de este proyecto era ADF Faces,
aunque ha pasado a denominarse Trinidad (según ha determinado la comunidad de Apache
MyFaces).
10
1 Introducción
El desarrollo de ADF Faces comenzó en 2001 y tuvo lugar fuera de la Apache Software
Foundation.
Los componentes actuales de Trinidad tienen licencia ASF y pueden usarse públicamente.
Por ello, antes de iniciar el curso necesitaremos instalar una base de datos MySql 5.0. MySql
es una base de datos ligera y muy extendida que podremos obtener página oficial de MySql e
instalar siguiendo un simple Wizard.
11
1 Introducción
12
índice_ 2 Creación de una
aplicación web con JSF
13
2 Creación de una
aplicación web con JSF
2.1. ANÁLISIS
El problema que vamos a resolver es la gestión de una agenda de contactos, la cual tiene
que cumplir los siguientes objetivos:
Para satisfacer los objetivos establecidos anteriormente será necesario implementar las
siguientes acciones:
El Modelo de datos físico para almacenar la información que gestiona la agenda de contactos
es el siguiente:
15
2 Creación de una
aplicación web con JSF
− Contacto: esta tabla almacena la información de los contactos y está compuesta por
el nombre, los apellidos, el teléfono, el tipo de contacto y si está relacionado con otro
contacto de la agenda (“idcontactorelacionado”).
2.2. CONSTRUCCIÓN
Vamos a comenzar con la construcción del sistema que hemos descrito en el apartado
anterior. Para ello, tendremos que realizar una serie de pasos previos para preparar el
entorno de desarrollo.
2.2.1. JDeveloper
Durante el curso utilizaremos el IDE de desarrollo para aplicaciones J2EE de Oracle, que
como se ha descrito en la Introducción, es un framework para el desarrollo de aplicaciones
Java que aumenta notablemente el nivel de productividad y ofrece un elevado número de
componentes UI.
Para poder conectarnos con una base de datos MySql necesitaremos dar de alta la librería de
conexión en el IDE de desarrollo. Estos son los pasos que debemos seguir:
1. Primero guardamos el archivo .jar con la librería que contiene el driver de conexión en
la carpeta de la instalación de JDeveloper “j22e\home\applib”. Todas las librerías
almacenadas en esta carpeta podrán ser utilizadas por cualquier aplicación que
desarrollemos con JDeveloper.
2. Iniciamos JDeveloper
16
2 Creación de una
aplicación web con JSF
17
2 Creación de una
aplicación web con JSF
18
2 Creación de una
aplicación web con JSF
Vamos a dar de alta una conexión con la base de datos Test de Mysql que será la que
utilicemos para crear nuestro esquema de tablas para la Aplicación Web de Agenda.
19
2 Creación de una
aplicación web con JSF
20
2 Creación de una
aplicación web con JSF
6. Una vez seleccionados la clase del driver de conexión y la librería indicamos la cadena
de conexión “jdbc:mysql://localhost:3306/test”.
21
2 Creación de una
aplicación web con JSF
7. Para finalizar, podemos realizar un test a la conexión que acabamos de dar de alta
pulsando Siguiente, Test Connection. Si la prueba de conexión es satisfactoria,
pulsamos Terminar para almacenar los datos de la conexión.
22
2 Creación de una
aplicación web con JSF
2.2.1.3. Creación del Data Source Test para el servidor de aplicaciones embebido de
Jdeveloper
23
2 Creación de una
aplicación web con JSF
3. Con esta operación hemos creado el Data Source para la conexión de Base de Datos
Test. El nombre que se utiliza para referirse al Data Source es el especificado por el
campo JNDI Name. En este caso jdbc/TestDS.
En este apartado vamos a crear las tablas en el esquema Test de la Base de Datos MySql. El
script de creación de las tablas es el siguiente:
24
2 Creación de una
aplicación web con JSF
25
2 Creación de una
aplicación web con JSF
4. Si pulsamos sobre el botón con forma triangular de color verde se ejecutará el código
seleccionado. Si todo es correcto obtendremos un mensaje de confirmación en el área
de resultados.
Una vez hemos cargado el esquema completo de la aplicación, realizaremos una inserción de
datos para mostrar información inicial cuando comencemos el desarrollo.
26
2 Creación de una
aplicación web con JSF
27
2 Creación de una
aplicación web con JSF
28
2 Creación de una
aplicación web con JSF
Este script lo ejecutaremos en la misma ventana donde realizamos la carga de las tablas
siguiendo el mismo procedimiento: seleccionamos el código a ejecutar y pulsamos el botón
verde con forma triangular.
En este apartado vamos a crear una aplicación en JDeveloper donde trabajaremos para
realizar el desarrollo de la agenda.
29
2 Creación de una
aplicación web con JSF
3. Para finalizar, pulsamos Aceptar y tendremos creada la aplicación con dos proyectos,
uno para la parte del modelo de la aplicación Model y otro para la parte del
controlador y la vista ViewController.
30
2 Creación de una
aplicación web con JSF
En las propiedades de los proyectos se define información relativa al mismo, como las
carpetas en las que se almacenan los fuentes y las clases, las librerías que incluye, etc. Para
acceder a las propiedades de los proyectos de la aplicación de Agenda:
1. Marcamos con el ratón por ejemplo el proyecto de Model, pulsamos el botón derecho
del ratón y seleccionamos Proyect Properties.
2. En la pestaña Proyect Content se definen: las capetas que contienen las fuentes
Java, el directorio con las clases, la lista de subcarpetas incluidas o excluidas y el
paquete por defecto. Para nuestra aplicación Agenda.
31
2 Creación de una
aplicación web con JSF
32
2 Creación de una
aplicación web con JSF
5. La pestaña JSP Tag Libraries muestra las librerías de etiquetas que tenemos dadas
de alta en el proyecto. El proyecto Model no debe tener incluidas librerías de etiquetas
debido a que, es un proyecto para la capa de Modelo siguiendo el paradigma de
desarrollo J2EE. Para ver las librerías de etiquetas podemos acceder a las propiedades
del proyecto ViewController.
33
2 Creación de una
aplicación web con JSF
7. Para ver las librerías que tenemos incluidas en el proyecto pulsamos sobre la opción
Libraries.
En este apartado vamos a preparar la capa de modelo. Como hemos mencionado antes, la
tecnología que se usará será CMP Entity Beans y EJB.
La mayoría de las aplicaciones J2EE requieren servicios transaccionales, los EJB Session
Bean ofrecen este servicio de lógica de negocio transaccional. Los EJB Session Bean trabajan
con objetos del dominio del negocio. Estos objetos de dominio se representas en el sistema
por los CMP (Container-Managed Persistence) Entity Beans.
Vamos a crear los objetos de dominio a partir de las tablas de datos de la Base de Datos
Test:
34
2 Creación de una
aplicación web con JSF
2. En el menú, elegimos Business Tier, EJB, CMP Entity Beans from Tables y
pulsamos Aceptar.
35
2 Creación de una
aplicación web con JSF
36
2 Creación de una
aplicación web con JSF
6. Pulsamos Siguiente, indicamos el nombre del paquete donde se crearán los Entity
Beans. Seleccionamos como tipo de acceso PROPERTY, marcamos implementación
de la interfaz java.io.Serializable. Usaremos la clase java.util.List como tipo de
colección.
37
2 Creación de una
aplicación web con JSF
7. La siguiente pantalla nos muestra el nombre de los beans para cada una de las tablas
del esquema. En esta pantalla podemos cambiar los nombres de los Entity Beans que
se van a generar.
8. La pantalla final muestra un resumen. Pulsamos Terminar para generar las clases
Java de las entidades.
38
2 Creación de una
aplicación web con JSF
Como resultado de este proceso hemos creado las clases Java de los Entity Beans. Pulsamos
en el menú File, Save All para guardar todo el trabajo.
Si seleccionamos y hacemos doble click con el ratón sobre la clase Contacto podemos ver
que tenemos un atributo por cada campo de la tabla contacto.
1. Marcamos con el ratón el proyecto Model y pulsamos botón derecho New como
hicimos anteriormente.
39
2 Creación de una
aplicación web con JSF
40
2 Creación de una
aplicación web con JSF
4. El siguiente paso muestra los métodos que se generan automáticamente para las
entidades que tenemos en el proyecto de model (Contacto, Domicilio y
Tipocontacto) además de los métodos de fachada. Marcamos todos para crearlos en
el Data Control.
41
2 Creación de una
aplicación web con JSF
6. Por último, indicamos el nombre de las interfaces Local que implementará el EJB. Para
desarrollar con JSF sólo necesitaremos implementar la interfaz Local.
7. Para concluir el proceso, pulsamos Finalizar y en el menú File, Save para guardar los
cambios. En el paquete agenda.model tenemos la clase Java con el EJB de sesión.
42
2 Creación de una
aplicación web con JSF
En este apartado vamos a crear el Data Control a partir del EJB de Sesión que encapsula la
lógica de negocio de la aplicación. El Data Control es una interfaz para blindar el modelo con
la capa cliente de la aplicación J2EE en este caso las páginas Web JSF.
• Un fichero Xml para cada CMP Entity Bean donde se describen los atributos, los
parámetros y los métodos de acceso.
43
2 Creación de una
aplicación web con JSF
− El Data Control es una interfaz que se genera a partir del EJB de sesión y que
sirve para relacionar el modelo con los componentes UI. Esta interfaz hace
posible el pintado mediante “drag-and-drop” lo que hace muy productivo el
entorno de desarrollo.
44
índice_ 3 Usando ADF
Faces Tables
45
3 Usando ADF
Faces Tables
En el capítulo anterior preparamos la Capa del Modelo para poder acceder a los datos y
establecer la lógica de negocio de la aplicación de la agenda.
En los sucesivos capítulos y apartados nos centraremos en la capa del controlador y la vista
que implementa JSF.
En la gran mayoría de los desarrollos Web, se hace uso de la definición de una plantilla para
conseguir un aspecto similar en todas las páginas de la aplicación. Nuestra primera página
JSF será una plantilla para definir un aspecto común para todas nuestras páginas.
Para crear la página JSF que nos servirá como plantilla vamos a seguir los siguientes pasos:
47
3 Usando ADF
Faces Tables
48
3 Usando ADF
Faces Tables
Vamos a añadir componentes a nuestra página que servirá de plantilla, para ello debemos
acceder a la paleta de Componentes situada en la esquina superior derecha de JDeveloper.
Si no está visible pulsamos en el menú View, Component Palette.
49
3 Usando ADF
Faces Tables
El combo de selección superior nos permite elegir de qué librería de etiquetas queremos usar
un componente. Seleccionamos la librería de etiquetas “ADF Faces Core” y arrastramos el
componente Panel Page a la página de plantilla. El resultado es el siguiente:
Si queremos ver el código fuente basta con que pulsemos en la pestaña Source situada en
la parte inferior de la ventana.
Vamos a cambiar el título de la ventana para dejarlo vacío, para ello accedemos a la paleta
de propiedades. Si no está visible pulsamos View, Property Inspector.
50
3 Usando ADF
Faces Tables
Hacemos clic con el ratón sobre el campo que contiene el valor de la propiedad Title y
borramos el contenido.
Vamos a añadir una propiedad al fichero de recursos para hacer uso de ella en la plantilla.
Abrimos el fichero “UIResources.properties” que hemos creado e introducimos:
plantilla.marca=JSF
plantilla.marcaAplicacion= Agenda Contactos
plantilla.sobre=Curso JSF
51
3 Usando ADF
Faces Tables
52
3 Usando ADF
Faces Tables
Para terminar indicamos el nombre de la variable que usaremos para acceder al fichero de
recursos “res” y pulsamos aceptar.
Una vez registrado el acceso al fichero de recursos en nuestra plantilla, vamos a hacer uso
de las propiedades que definimos anteriormente.
En este apartado vamos a desarrollar una página que mostrará el listado de los contactos de
la agenda. Esta página tendrá un buscador para poder filtrar el contenido de la lista de los
contactos.
3.3.1. Navegación
53
3 Usando ADF
Faces Tables
54
3 Usando ADF
Faces Tables
Para aplicar la plantilla a la página para buscar contactos que acabamos de dar de alta,
debemos seguir lo siguientes pasos:
55
3 Usando ADF
Faces Tables
Vamos a definir una consulta para poder filtrar los contactos por nombre, primer apellido y
tipo de contacto. Para realizarlo, accedemos al proyecto Model y abrimos la Entity Bean de
los contactos (Contacto.java).
Podemos observar que por defecto tiene definida inicialmente una consulta para obtener
todos los contactos:
@NamedQueries({
@NamedQuery(name="findAllContacto", query="select object(o) from
Contacto o"),
@NamedQuery(name="findContactoByParameters", query="select object(o)
from Contacto o where o.nombre like :nombre and o.apellido1 like :apellido1 and
o.idtipocontacto like :idtipocontacto")})
56
3 Usando ADF
Faces Tables
7. Como último paso volvemos a seleccionar el EJB de Session, pulsamos botón derecho,
Create Data Control. Con esta operación refrescamos el Data Control para que añada
la nueva consulta y poder utilizarla desde las páginas JSF.
De igual forma, cada vez que modifiquemos o incluyamos nuevos métodos en el EJB
deberemos generar el Data Control para que los cambios aplicados sean visibles
durante el desarrollo de las páginas Web.
57
3 Usando ADF
Faces Tables
Es importante renombrar los componentes que iremos añadiendo a las páginas para
poder localizarlos con mayor facilidad en el backing. Para no extender demasiado la
descripción del desarrollo vamos a asumir que estamos renombrando los componentes
con el siguiente formato: “nombre_componente + nombre_descriptivo”. Por
ejemplo “panelBoxBuscador”.
buscadorContactos.formulario.nombre= Nombre
buscadorContactos.formulario.apellido1=Primer Apellido
buscadorContactos.formulario.tipoContacto=Tipo de Contacto
buscadorContactos.tablaContactos.nombre=Nombre
buscadorContactos.tablaContactos.apellido1=Primer Apellido
buscadorContactos.tablaContactos.apellido2=Segundo Apellido
buscadorContactos.tablaContactos.telefono=Telefono
58
3 Usando ADF
Faces Tables
9. Volvemos de nuevo a la paleta de Data Control para arrastrar el parámetro que hace
referencia al tipo de contacto. Cuando lo arrastremos sobre el tercer panel horizontal
los haremos como Single Selections, ADF Select One Choice.
10. Una vez arrastrado se abrirá una ventana emergente para editar el binding del
componente. El campo Base Data Source indica donde se recogerá el valor del
componente, en este caso en la variable del parámetro idtipocontacto. La fuente de
los datos de la lista se define en List Data Source. Pulsamos Add, marcamos la lista
TipoContacto resultante de la query findAllTipoContacto y pulsamos Aceptar.
59
3 Usando ADF
Faces Tables
11. Indicamos la relación de los atributos que queremos establecer. En este caso el
parámetro idtipocontacto se relaciona con la propiedad idtipocontacto.
60
3 Usando ADF
Faces Tables
Vamos a incluir nuestro primer componente de tipo tabla que nos servirá para mostrar el
resultado de la consulta que realicemos mediante el formulario de búsqueda.
A lo largo del desarrollo de la tabla para presentar los resultados de la búsqueda, iremos
aplicando cada una de las características que acabamos de comentar.
61
3 Usando ADF
Faces Tables
4. Una vez hemos seleccionado la opción de ADF Read-only Table, se abre una ventana
donde podremos elegir qué columnas mostramos en nuestra tabla, si incluimos
selección por filas y si queremos activar la opción de ordenación por columnas.
62
3 Usando ADF
Faces Tables
63
3 Usando ADF
Faces Tables
1. Abrimos la clase del EJB de sesión que tenemos en el proyecto Model y que hemos
denominado AgendaSessionEJBBeanBean.
Con este código estamos indicando que si no se especifica el valor de algunos de los
parámetros, debe buscar por todo. Además, se buscará dentro del contenido de
los campos de tipo texto como son nombre y apellidos, si se encuentra la cadena
introducida como parámetro. Por ejemplo, si introducimos en la condición de
búsqueda el valor “nt” como nombre, el resultado debe presentar todo los contactos
cuyo nombre contenga la cadena “nt”.
Vamos a ver a continuación como ejecutar una página JSF y como establecer una página
como inicial a la hora de arrancar el Servidor de Aplicaciones OC4J embebido que incluye
JDeveloper.
2. Como es la primera vez que ejecutamos el proyecto, se abrirá una ventana emergente
donde se nos pregunta cual es el objetivo de la ejecución. Nosotros estableceremos
como objetivo nuestra página buscadorContactos.jspx. Pulsamos el botón de
64
3 Usando ADF
Faces Tables
Después de realizar estos pasos, el servidor comienza y iniciarse. Se abrirá una ventana de
Internet Explorer y nos mostrará la página solicitada. El resultado deber ser muy parecido al
siguiente:
65
3 Usando ADF
Faces Tables
Para finalizar la página del buscador, vamos a incluir una tabla más para mostrar los
domicilios de los contactos. Cada vez que seleccionemos un contacto, se recargará la tabla
de los domicilios del nuevo contacto seleccionado.
Vamos a seguir los siguientes pasos para presentar el detalle de los domicilios:
3. A continuación pulsamos botón derecho del ratón sobre la clase del EJB de sesión y
seleccionamos Edit Session Facade, desplegamos la entidad Domicilio y marcamos
el nuevo método de consulta que hemos creado.
66
3 Usando ADF
Faces Tables
4. Por último, generamos el DataControl del EJB de sesión para poder trabajar en el
proyecto de la vista con el nuevo método de consulta de domicilios. Para realizar
esta operación, pulsamos botón derecho del ratón sobre la clase del EJB y
seleccionamos Create Data Control.
7. Seleccionamos con el ratón a lista de tipo Domicilio que nos devuelve el método
findDomicilioByIdContacto(Object) y la arrastramos a la Paleta de Estructura
sobre la etiqueta ad:panelPage. Seleccionamos Tables, ADF Read-only Table.
8. Se abre una ventana emergente donde tenemos que indicar el origen del parámetro de
idcontacto del método. Pulsamos con el ratón sobre el campo Value, hasta que
67
3 Usando ADF
Faces Tables
aparece un botón con tres puntos, lo pulsamos. Se volverá a abrir otra ventana
emergente y en el campo de Expression introduciremos lo siguiente:
${bindings.findContactoByParametersIter.currentRow.dataProvider.idcontacto}
Con esto estamos indicando que obtenga el valor del identificador de contacto del
iterador de la tabla de contactos. Pulsamos Aceptar y volvemos a pulsar Aceptar.
68
3 Usando ADF
Faces Tables
Después de realizar estos pasos hemos finalizado el desarrollo de la tabla de detalle de los
domicilios de los contactos.
Podemos observar que el título de las columnas de la tabla de los domicilios no tiene el texto
a partir de propiedades definidas en el fichero de recursos. Proponemos como ejercicio
definirlas en el fichero de recursos y utilizarlas en las propiedades HeaderText de cada
columna.
69
3 Usando ADF
Faces Tables
70
índice_ 4 Usando ADF
Faces Tree
71
4 Usando ADF
Faces Tree
En este tema vamos a realizar el desarrollo de los formularios para dar de alta contactos en
la agenda y poder editar los ya existentes.
4.2. NAVEGACIÓN
5. Para navegar a la página de alta de contactos necesitaremos crear una nueva regla de
navegación desde buscadorContactos.jspx hasta nuevoContacto.jspx. Para hacer
esto arrastraremos JSF Navegation Case hasta la página del buscador y volvemos a
pulsar con el botón derecho del ratón cuando flecha esté encima de la página del
nuevo contacto. Renombraremos la regla de navegación con el nombre nuevo.
73
4 Usando ADF
Faces Tree
Hasta ahora tenemos establecidas las reglas de navegación para ir desde la página del
buscador hasta las páginas de edición y alta. Para volver desde cada una de éstas al
buscador sería necesario establecer reglas de navegación en ambas páginas. En estos casos,
cuando se tiene una página que tiene que ser navegable desde otras páginas, lo más
indicado es establecer una regla de navegación global.
74
4 Usando ADF
Faces Tree
Finalizado el punto cuatro tendremos definida una regla de navegación global sobre la
página del buscador útil para todas las páginas de la agenda.
75
4 Usando ADF
Faces Tree
5. En el siguiente paso, si no están incluidas las librerías de ADF Faces las añadimos y
pulsamos Terminar.
Finalizado este punto, tenemos creada la página en el proyecto. Podemos observar que
ahora el diagrama del controlador no muestra un símbolo de advertencia en la página de
edición, al contrario que en la página de nuevo contacto. Esto indica que el componente JSP
Page que representa la página en el diagrama no tiene asociado ninguna página en el
proyecto.
76
4 Usando ADF
Faces Tree
Ya tenemos lista la página de edición para empezar a añadir los componentes UI necesarios.
Para añadir el nuevo método de consulta por el identificador de contacto, seguiremos los
siguientes puntos:
2. Añadimos la nueva query dentro del bloque de código donde se declaran todas las
consultas. El código de la nueva consulta es:
4. Seleccionamos la clase del EJB, pulsamos botón derecho, Edit Session Facade y en la
ventana emergente marcamos el método findContactoByIdContacto perteneciente
a la clase Contacto y pulsamos Aceptar.
5. Pulsamos de nuevo botón derecho sobre la clase del EJB y seleccionamos Create Data
Control.
77
4 Usando ADF
Faces Tree
En este punto vamos a realizar la construcción del formulario que nos permitirá modificar la
información de un contacto. Para crear el formulario realizaremos los siguientes pasos:
4. Una vez seleccionamos Forms, ADF Forms, se abre una ventana emergente donde
determinamos que campos van a componer el formulario. Nosotros eliminamos los
campos idcontacto, idcontactorelacionado e idtipocontacto.
${data.buscadorContactosPageDef.findContactoByParametersIter.currentRow.dataProvide
r.idcontacto}
78
4 Usando ADF
Faces Tree
buscadorContactos.tablaContactos.botonEditar=Editar
buscadorContactos.tablaContactos.botonNuevo=Nuevo
buscadorContactos.tablaContactos.botonEliminar=Eliminar
edicionContacto.formulario.nombre=Nombre
edicionContacto.formulario.apellido1=Primer Apellido
edicionContacto.formulario.apellido2=Segundo Apellido
edicionContacto.formulario.telefono=Teléfono
edicionContacto.formulario.tipoContacto=Tipo de Contacto
edicionContacto.formulario.botonGrabar=Grabar
edicionContacto.formulario.botonVolver=Volver
7. En este punto vamos a aplicar las propiedades que hemos añadido al fichero de
recursos a cada una de las propiedades Label de los componentes InputText que
contiene la etiqueta af:panelPage. Por ejemplo, seleccionamos la etiqueta
af:inputText del atributo nombre, hacemos doble clic y cambiamos el valor del
atributo Label por:
#{res['edicionContactos.formulario.nombre']}
79
4 Usando ADF
Faces Tree
10. En la siguiente ventana emergente, pulsamos Add para añadir un valor a la propiedad
List Data Source y seleccionamos la lista de tipo TipoContacto que devuelve el
método findAllTipocontacto();
80
4 Usando ADF
Faces Tree
#{res['edicionContacto.formulario.tipoContacto']}
Hasta aquí hemos concluido el pintado del formulario. En el siguiente apartado añadiremos
los botones necesarios para poder grabar los cambios y volver a la página del buscador de
contactos.
81
4 Usando ADF
Faces Tree
En este apartado vamos a incluir el botón para grabar los cambios realizados en el
formulario. Los pasos a seguir, serán los siguientes:
82
4 Usando ADF
Faces Tree
#{res['edicionContacto.formulario.botonGrabar']}
Finalizado el punto seis tenemos completado la definición del botón para grabar los cambios
de los contactos.
Vamos a incluir un botón para volver a la página del buscador de contactos. Para ello,
seguiremos los pasos que a continuación se describen.
#{res['edicionContacto.formulario.botonVolver']}
83
4 Usando ADF
Faces Tree
#{res['buscadorContactos.tablaContactos.botonEditar']}
1. Sobre la vista de diseño de la página del buscador pulsamos botón derecho del ratón y
seleccionamos Go to Page Definition.
${!adfFacesContext.postback}
Con esta condición estamos indicando que se ejecute la operación de refresco sobre la
consulta que genera los resultados cada vez que volvemos de otra página.
84
4 Usando ADF
Faces Tree
Vamos a ejecutar el proyecto para ver que todo funciona como cabe de esperar.
Seleccionamos el proyecto ViewController, botón derecho del ratón, Run.
85
4 Usando ADF
Faces Tree
En este apartado vamos a detallar los pasos a seguir para construir la página de alta de los
contactos de la agenda.
2. Hacemos doble clic con el ratón sobre la página de nuevoContactos.jspx para iniciar
el wizard de creación de las paginas JSF.
5. En el siguiente paso, si no están incluidas las librerías de ADF Faces las añadimos y
pulsamos Terminar.
86
4 Usando ADF
Faces Tree
En este punto vamos a realizar la construcción del formulario que nos permitirá dar de alta
nuevos contactos. Seguiremos los puntos que a continuación se describen:
4. Una vez seleccionamos Forms, ADF Creation Forms, se abre una ventana
emergente donde determinamos que campos van a componer el formulario. Nosotros
eliminamos los campos idcontacto, idcontactorelacionado e idtipocontacto.
87
4 Usando ADF
Faces Tree
nuevoContacto.formulario.nombre=Nombre
nuevoContacto.formulario.apellido1=Primer Apellido
nuevoContacto.formulario.apellido2=Segundo Apellido
nuevoContacto.formulario.telefono=Teléfono
nuevoContacto.formulario.tipoContacto=Tipo de Contacto
nuevoContacto.formulario.botonGrabar=Grabar
nuevoContacto.formulario.botonCancelar=Cancelar
2. Aplicamos las propiedades que hemos añadido al fichero de recursos, a cada una de
las propiedades Label de los componentes InputText que contiene la etiqueta
af:panelPage. Por ejemplo, seleccionamos la etiqueta af:inputText del atributo
nombre, hacemos doble clic y cambiamos el valor del atributo Label por:
#{res['nuevoContacto.formulario.nombre']}
88
4 Usando ADF
Faces Tree
89
4 Usando ADF
Faces Tree
#{res['nuevoContacto.formulario.tipoContacto']}
En este apartado vamos a incluir el botón para grabar los cambios realizados en el
formulario. Los pasos a seguir, serán los siguientes:
90
4 Usando ADF
Faces Tree
#{res['nuevoContacto.formulario.botonGrabar']}
Para finalizar, sólo nos queda añadir un botón para cancelar la operación de alta de un nuevo
contacto.
#{res['nuevoContacto.formulario.botonCancelar']}
91
4 Usando ADF
Faces Tree
#{res['buscadorContactos.tablaContactos.botonNuevo']}
Vamos a ejecutar el proyecto para ver que todo funciona como cabe esperar. Seleccionamos
el proyecto ViewController, botón derecho del ratón, Run.
92
4 Usando ADF
Faces Tree
Podemos probar a dar de alta un nuevo contacto y ver como se añade a la lista de los
contactos en la página del buscador.
Para finalizar este tema, vamos a incluir un botón para eliminar contactos de la agenda en la
página de búsqueda de contactos.
93
4 Usando ADF
Faces Tree
${bindings.findContactoByParametersIter.currentRow.dataProvider}
5. Pulsamos Aceptar.
#{res['buscadorContactos.tablaContactos.botonEliminar']}
94
4 Usando ADF
Faces Tree
− Las reglas de navegación globales se definen sobre páginas que deben ser
accedidas desde muchas páginas del resto de la aplicación.
− Cada vez que añadimos una consulta en una entidad, como por ejemplo
agenda.model.contacto, debemos añadirla al EJB mediante Edit Session
Facade y crear de nuevo el Data Control.
95
índice_ 5 Menús
97
5 Menús
En este tema vamos a crear diferentes menús para movernos por la agenda y veremos la
representación de la información de la relación de los contactos en forma de estructura de
árbol.
5.2. NAVEGACIÓN
Vamos a comenzar dando de alta una nueva página para la gestión de la relación entre los
contactos en el fichero del controlador:
99
5 Menús
Con esto hemos hecho accesibles los elementos del bindings desde la clase backing de la
página de las relaciones entre los contactos.
Después de realizar todos los pasos anteriormente descritos, el diagrama debe quedar de
forma similar al que se muestra a continuación:
100
5 Menús
5.3. MENÚS
Vamos a aplicar menús a las páginas de buscador de contactos y relaciones de los contactos
para poder navegar de una a otra por medio de las opciones del menú.
navegacion.paginaBuscador=Buscador Contactos
navegacion.paginaRelaciones=Relaciones Contactos
relacionesContactos.botonRelacionar=Relacionar
101
5 Menús
102
5 Menús
Finalizado el paso nueve, hemos añadido tres tipos de menú a nuestra página para buscar
contactos. Hemos introducido un menú lateral en el paso 8, un menú de pestañas en el paso
2 y una barra de menú en el paso 6.
5.3.2. Añadir un menú a la página que presenta las relaciones de los contactos
Para introducir los menús en la página de relaciones sólo tenemos que seguir los pasos
descritos en el punto 5.4.1 de este capítulo, con la salvedad de que la propiedad Selected a
true se establecerá esta vez en la página de las relaciones.
Vamos a desarrollar la página que muestra las relaciones que existen entre los distintos
contactos de la agenda. Añadiremos un pequeño formulario para modificar estas relaciones.
Los siguientes pasos nos muestran como dar de alta la página en el proyecto:
103
5 Menús
− En el siguiente paso, si no están incluidas las librerías de ADF Faces las añadimos y
pulsamos Terminar.
Ya tenemos lista la página de edición para empezar a añadir los componentes UI necesarios.
104
5 Menús
Cada uno de los nodos del árbol representará un contacto de la agenda. Crearemos la clase
nodo en el proyecto ViewController siguiendo los pasos que se describen a continuación:
105
5 Menús
2. Sobrescribimos el código:
106
5 Menús
por:
import java.util.ArrayList;
import java.util.Collection;
public NodoArbol() {
hijos = new ArrayList();
}
107
5 Menús
Para implementar este método seguiremos los pasos que se describen a continuación:
108
5 Menús
// Lista de Nodos
Iterator it = listaContactos.iterator();
Contacto contacto = null;
NodoArbol nodoa = new NodoArbol();
while(it.hasNext()){
nodoa.setIdcontacto(contacto.getIdcontacto());
nodoa.setNombre(contacto.getNombre());
nodoa.setApellido1(contacto.getApellido1());
nodoa.setApellido2(contacto.getApellido2());
109
5 Menús
nodoa.setIdtipocontacto(contacto.getIdtipocontacto());
nodoa.setIdcontactorelacionado(contacto.getIdcontactorelacionado());
nodoa.setTelefono(contacto.getTelefono());
aux.add(nodoa);
}
// Mapa Contactos
it = aux.iterator();
nodoa = null;
Map mapa = new HashMap();
while(it.hasNext()){
// Si es un hijo
if (nodoa.getIdcontactorelacionado() != null) {
NodoArbol nodoPadre =
(NodoArbol)mapa.get(nodoa.getIdcontactorelacionado());
nodoPadre.getHijos().add(nodoa);
} else {
nodos.add(nodoa);
110
5 Menús
}
}
import agenda.model.Contacto;
import agenda.view.NodoArbol;
OperationBinding operationBinding =
bindings.getOperationBinding("relacionarContactos");
operationBinding.execute();
getTreemodel();
return null;
}
Con este paso finalizamos nuestro desarrollo en la clase del backing de la página de
relaciones de contactos.
111
5 Menús
5.4.4. RelacionesContactosPageDef
Vamos a crear todos lo elementos necesarios para facilitar los datos a los componentes de la
página de contactos. Daremos de alta la consulta de los contactos, los iteradores y los
componentes de tipo lista tal y como se describe en los siguientes pasos:
112
5 Menús
4. Repetimos los pasos 2 y 3 para crear otro método iterador con el nombre
“findAllContactoIterR”.
5. Después de crear los métodos de los iteradores, los seleccionamos con el ratón y en
la ventana de propiedades establecemos RangeSize a “-1”. Con esto el iterador no
paginará los contactos sino que lo traerá todos.
6. Pulsamos el botón derecho del ratón sobre bindings, Insert inside bindings,
methodAction.
113
5 Menús
10. Volvemos a pulsar el botón derecho del ratón sobre bindings y seleccionamos
Insert inside bindings, list.
114
5 Menús
12. Después de pulsar Aceptar, renombramos el nuevo objeto de tipo list por
“findAllContactosList”.
14. En este punto vamos a introducir el método para relacionar los contactos. Sobre
bindings pulsamos botón derecho, Insert inside bindings, methodAction. En la
ventana emergente, pulsamos sobre el EJB y seleccionamos el método
relacionarContactos(Object , Object). El primer parámetro los establecemos a:
“${bindings.findAllContactoIter.currentRow.dataProvider.idcontacto}”
“${bindings.findAllContactoIter.currentRow.dataProvider.idcontacto}”
115
5 Menús
Concluido el paso 12, tenemos creados todos los elementos necesarios para el desarrollo de
la página.
Para completar el desarrollo de la página de relaciones, vamos a añadir los componentes que
necesitamos para presentar los contactos y establecer nuevas relaciones.
4. Vamos a añadir el botón para dar de alta las relaciones que indiquemos en los combos
que hemos introducido en la página. En la paleta de componentes, seleccionamos
CommandButton y lo arrastramos a la paleta de estructura sobre la etiqueta
af:panelPage.
116
5 Menús
Para ver el resultado del desarrollo que hemos realizado seleccionamos el proyecto
ViewController y pulsamos el botón derecho Run.
117
5 Menús
118
A
glosario_
ADF. Application Development Framework. Estructura de soporte para el
desarrollo de aplicaciones.
ADF FACES. Conjunto de componentes de interfaces de usuario basados en
Java Server Faces (JSR-127).
Classpath. Variable de entorno que determina donde buscar tanto las clases o
librerías de Java (el API de Java) como otras clases de usuario.
Controller. Controlador. Responde a eventos del usuario e invoca cambios en el
modelo y probablemente en la vista.
HTTP. Protocolo de Internet (Hyper Text Tranfer Protocol) que permite el envío
y la recepción de datos.
119
JSF. Conjunto de componentes de usuario (UI) que permiten construir la capa
glosario_
de vista de las aplicaciones Web
JSR. Java Specification Request. Petición de especificación Java.
120
Oracle Application Development Framework Tutorial:
referencias web_
http://www.oracle.com/technology/obe/ADF_tutorial_1013/index.htm
JSF versus Struts:
http://websphere.sys-con.com/read/46516.htm?CFID= 61124&CFTOKEN=FD559D82-
11F9- B3B2-738E901F37DDB4DE
Java Server Faces Technology Overview:
http://java.sun.com/javaee/javaserverfaces/overview.html
Getting Started with JavaServer Faces:
http://www.oracle.com/technology/tech/java/jsf.html
Development Guidelines for Oracle ADF Faces Applications:
http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/js
f/doc/devguide/index.html
Apache MyFaces:
http://myfaces.apache.org/
121
Oracle® Application Development Framework. Developer’s Guide. 10g
bibliografía_
Release 3 (10.1.3)
123