ndice general_
1. INTRODUCCIN
...............................................................................1
2. CREACIN DE UNA APLICACIN WEB CON JSF
...............................13 3. USANDO ADF FACES
TABLES...........................................................45
4. USANDO ADF FACES TREE
..............................................................71 5.
MENS
...........................................................................................97
GLOSARIO
.........................................................................................119
REFERENCIAS WEB
............................................................................121
BIBLIOGRAFA
..................................................................................123
1ndice_
Introduccin
1.1. 1.2.
QU ES JSF?
...............................................................................3
JSF VS STRUTS
.............................................................................4
1.2.1. Escalabilidad
.....................................................................5
1.2.2. Controlador
.......................................................................5
1.2.3. Navegacin
.......................................................................6
1.2.4. Conclusiones
.....................................................................8
1.3. 1.4.
IMPLEMENTACIN DE JSF: ADF FACES
.........................................9 ENTORNO DE DESARROLLO
DEL CURSO ......................................11
1
11.1. QU ES JSF? patrn Modelo-Vista-Controlador (MVC).
Introduccin
JavaServer Faces (JSF) es un framework estndar Java que permite
construir aplicaciones Web. Se define por las especificaciones JSR
127, JSR 252 y JSR 276 e implementa el
Dicho modelo MVC es un patrn de arquitectura de desarrollo
software que separa las aplicaciones en tres capas diferenciadas:
datos (Modelo), interfaz de usuario (Vista) y lgica de control
(Controlador). Esto permite una separacin entre la interfaz de
usuario y la lgica 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 definicin de la navegacin entre pginas
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 programacin a travs de componentes y basada en
eventos. Adems, las clases de componentes UI incluidas en JSF
encapsulan su funcionalidad y no la presentacin en un tipo de
cliente especfico por lo que esto permite poder ser pintados en
distintos clientes. Por otro lado, JSF permite tambin la creacin de
nuestros propios componentes UI personalizados a partir de la
extensin de los ya existentes e incluye la propiedad de render para
pintarlos segn nos convenga.
3
1uso de determinados clientes.
Introduccin
Adems, la tecnologa JSF ha sido diseada para ser flexible al
contrario que otras tecnologas actuales que exigen la utilizacin de
lenguajes de marcadores, protocolos o el
Por todo esto, JSF es fcil de usar, su arquitectura define
claramente una separacin entre las capas de lgica y presentacin
permitiendo que la conexin entre ambas sea sencilla. Este diseo
posibilita a cada miembro del equipo de desarrollo centrarse en la
parte de la aplicacin que le corresponde desarrollar,
proporcionando adems un modelo de programacin sencilla que
simplifica la posterior unin de todos los mdulos. De esta forma,
desarrolladores Web sin experiencia pueden utilizar componentes UI
de JSF en sus pginas Web sin escribir apenas cdigo. Por ltimo,
destacar que JSF resulta atractivo tanto para desarrolladores
noveles como expertos. Los primeros podrn comprobar cmo se aaden
componentes a una pgina con un simple drag and drop (es fcil de
usar y muy visual) mientras que los segundos encontrarn un estndar
robusto que les ofrece mucho potencial y flexibilidad para
programar.
1.2.
JSF VS STRUTS
En este apartado describiremos las principales caractersticas de
JSF frente a uno de los framework de desarrollo ms extendidos
(Struts), con el objeto de obtener una regla de valoracin en cuanto
a qu nos aporta JSF. Debido a que Struts es un framework mucho ms
maduro que JSF (ste tan slo lleva dos aos utilizndose), en
principio, puede parecer mucho ms seguro y rentable abordar el
desarrollo de una aplicacin utilizndolo. No obstante, como veremos,
esto no tiene por qu ser as en todos los casos, ya que, JSF adems
de ser un framework con mucho potencial, presenta ventajas sobre
Struts como por ejemplo, que JSF proporciona la capacidad de
construir componentes desde distintas tecnologas 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 pginas deben pasar al ActionForm siguiendo un modelo
especfico de entrada, lo que requiere realizar codificacin 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
11.2.1. Escalabilidad mejorar el framework. Asimismo, JSF
proporciona una funcionalidad equivalente
Introduccin
Tanto Struts como JSF proporcionan un nivel de escalabilidad tal
que les permite satisfacer futuros requerimientos. As, una de las
caractersticas de Struts es poseer una clase RequestProcessor que
tiene varios mtodos para recuperar informacin a lo largo de todo el
ciclo de vida de la peticin. Podemos extender esta clase con el
objetivo de reemplazar o
permitindonos
extender
determinadas interfaces del ciclo de vida. Adems, JSF desacopla
totalmente el pintado del Controlador permitiendo a los
desarrolladores proporcionar sus propias herramientas de pintado
para construir componentes personalizados. sta es una de las
caractersticas ms potentes de JSF que no proporciona Struts. 1.2.2.
Controlador Podemos considerar que las caractersticas ms
importantes de un framework son el controlador y la navegacin.
Struts utiliza para la capa del controlador los patrones Front
Controller y Command Patterm. As, la forma de trabajar es la
siguiente: un servlet realiza una solicitud, transforma los
parmetros http en un Java ActionForm y ste en una clase Action (un
comando). El framework de Struts utiliza slo un manejador de
eventos para las peticiones http de tal forma que, una vez
satisfecha la peticin, el ActionForm devuelve el resultado al
Controlador que lo utiliza para seleccionar la navegacin siguiente.
JSF, sin embargo, utiliza el patrn Page Controller. Aunque slo
dispone de un nico servlet para recibir pgina con componentes, se
ejecutarn distintos eventos por cada uno de ellos, traducindolos
gracias a un traductor de componentes. Asimismo, los componentes
tambin pueden vincularse a los datos desde el Modelo. De esta
forma, JSF aade ms ventajas al Controlador y, al mismo tiempo,
proporciona toda la flexibilidad del patrn Page Controller. Como
hemos indicado, JSF puede tener varios manejadores de eventos en
una sola pgina mientras que Struts slo es capaz de procesar un
evento por peticin. Adems, con Struts el ActionForm debe extender
clases creando as otra capa de cdigo engorroso y con posibilidad de
disearse mal, forzando de esta forma a la capa de modelo a ser un
ActionForm. Sin embargo, en JSF esta capa es totalmente
independiente.
5
11.2.3. Navegacin determina a qu pgina se navega).
Introduccin
Respecto a la navegacin, tanto Struts como JSF se basan en un
modelo declarativo, definindola mediante el uso de reglas en
ficheros de configuracin XML (struts-config.xml, faces-config.xml).
Ambos soportan tanto la navegacin esttica (cuando de una pgina se
navega directamente a la siguiente), como la dinmica (cuando es una
accin o lgica la que
Struts utiliza el concepto de forwards para definir la
navegacin. Basndose en cadenas el framework de Struts decide qu
pgina es la siguiente y la traduce. De esta forma, para definirla,
se puede utilizar un Action tal y como mostramos a continuacin:
Struts soporta la navegacin dinmica mediante la definicin de
especificaciones en la definicin de un Action, permitiendo tener
mltiples forwards en un mismo Action:
Siendo posible programar qu forward devolver: public
ActionForward execute( ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws
Exception { ActionErrors errors = new ActionErrors();
6
1ActionForward forward = new ActionForward(); // return value
MyForm myForm = (MyForm) form; try { // } catch (Exception e) { //
Error errors.add("name", new ActionError("id")); forward =
mapping.findForward("success"); return (forward); } forward =
mapping.findForward("success"); return (forward); }
Introduccin
Sin embargo, en JSF la navegacin esttica se soporta gracias a la
definicin de reglas de navegacin en el fichero de configuracin de
las faces(faces-config.xml). En el siguiente ejemplo, mostramos en
una regla de navegacin cmo navegar de una pgina a la siguiente:
/FromPage.jsp success /ToPage.jsp
A diferencia de Struts, la navegacin en JSF se aplica a nivel de
pgina y puede ser independiente de la accin. sta hay que
especificarla implcitamente en el componente, permitiendo de esta
forma un control de grano ms fino en la pgina. Es posible, adems,
tener varios componentes en una pgina definiendo distintas acciones
y compartiendo las mismas reglas de navegacin tal y como podemos
observar en el siguiente ejemplo:
7
1comportarse como un manejador de acciones:
Introduccin
Con respecto a la navegacin dinmica, JSF la soporta permitiendo
a los componentes
Asimismo, es posible codificar manejadores de acciones en
cualquier clase implementando as la navegacin dinmica:
public String doButton1Action() { return "success"; }
Aunque para soportar la navegacin dinmica las reglas de
navegacin no necesitan especificar la accin, JSF nos permite
definir la accin en la regla de navegacin. De esta forma, estamos
obligando a una regla de navegacin especfica a realizar una
accin:
/FromPage.jsp #{pc_FromPage.doButton1Action} success
/ToPage.jsp
1.2.4. Conclusiones Como hemos podido observar, aunque tanto
Struts como JSF son suficientemente flexibles desde el punto de
vista de la navegacin, JSF permite una mayor flexibilidad y un
mejor diseo de las reglas. Adems, es mucho ms sencillo en JSF tener
una pgina con varias reglas de navegacin sin necesidad de codificar
un montn de lgica 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 navegacin. Como hemos podido ver, en general,
JSF es mucho ms flexible que Struts (que no deja de ser un
framework robusto que funciona bien). Volviendo al principio de
este punto, en el que
8
1JSF, lo ms conservador es decantarse por el uso de Struts.
Introduccin
indicbamos que a priori por ser ms maduro pareca ms 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
Sin embargo, para seguir una direccin estratgica y un modelo de
programacin, la opcin seleccionada para el desarrollo de nuevas
aplicaciones debera ser JSF. Es por todo esto que merece la pena
que los desarrolladores inviertan tiempo en aprender JSF y se
utilice. JSF es ms sencillo que Struts cuando se desarrolla
manualmente, incrementndose de manera notable la productividad al
utilizar un IDE de Desarrollo de Aplicaciones como Jdeveloper.
1.3.
IMPLEMENTACIN DE JSF: ADF FACES
Oracle ha realizado la implementacin de JSF a partir de
directrices como el diseo de patrones e infraestructuras de
aplicaciones en un framework al que ha denominado ADF (Application
Development Framework). Una de las ventajas de ADF es que es una
plataforma independiente que corre en cualquier servidor J2EE,
proporcionando opciones para cada capa y desarrollando todas las
fases del ciclo de vida sin obligarnos a usarlas todas. Por otra
parte, ADF Faces es la implementacin que Oracle hace de JSF y se
basa en el patrn MVC. Nos centraremos en presentar la capa de la
Vista que proporciona la interfaz de usuario de la aplicacin.
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, bastara con usar el componente
adecuado, evitando de esta forma el desorden en el cdigo de los
lenguajes de marcadores y abstrayndonos del http. Escribir
componentes JSF quizs 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 aadirles cualquier
funcionalidad que sea posible. De esta forma, no tendramos que
escribir ms cdigo UI, simplemente usaramos componentes ADF Faces.
Los componentes ADF Faces tienen una arquitectura interesante que
est basada en una clara divisin de responsabilidades. De esta
forma, el componente define su propio comportamiento o
funcionalidad y el pintado que describe la presentacin.
9
1desplegable.
Introduccin
Por ejemplo, podemos tener un componente que define cmo un
usuario selecciona una nica opcin; y en el pintado, definir cmo se
hace por un botn de tipo radio o una lista
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 (telfonos mviles). De esta forma, la lgica del
componente queda separada e independiente del dispositivo en el que
se muestra. ADF Faces incluye ms 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. Tambin proporciona componentes ms complejos como
tablas que permiten la ordenacin por columnas y la capacidad de
mostrarlas u ocultarlas, o componentes de tipo rbol que pueden
mostrar datos de un modo jerrquico. Por otro lado, no todos los
componentes que proporciona ADF son grficos, dispone de otros ms
orientados a realizar interacciones con el usuario, como el
componente que permite la subida de ficheros. Tambin hay otro
componente diseado para establecer dilogos con usuarios y tener la
capacidad de devolver el foco al punto donde se inici el dilogo
(algo no siempre sencillo de realizar).
En la actualidad, todos estos componentes usan HTML y WML como
lenguajes de marcadores, por lo que pueden usarse indistintamente
en navegadores comunes, telfonos mviles o PDA. Oracle est
modernizando el pintado de estos componentes aadiendo una
combinacin de DHTML y JavaScript que proporcionarn cada vez ms
experiencia en clientes ricos e incluyendo el pintado parcial de
pginas. Este nuevo kit de pintado ser ms potente que cualquier
implementacin Swing. Adems, y dado que un gran nmero de fbricas 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. Adems de
esta implementacin, existe una versin open source a partir de cdigo
proporcionado por Oracle a Apache. El nombre inicial de este
proyecto era ADF Faces, aunque ha pasado a denominarse Trinidad
(segn ha determinado la comunidad de Apache MyFaces).
10
1Foundation. 1.4. ENTORNO DE DESARROLLO DEL CURSO
Introduccin
El desarrollo de ADF Faces comenz en 2001 y tuvo lugar fuera de
la Apache Software
Los componentes actuales de Trinidad tienen licencia ASF y
pueden usarse pblicamente.
El objetivo establecido en el presente curso es iniciar al
desarrollo de Aplicaciones Web con tecnologa JSF. Para cumplir con
este objetivo, debemos acercarnos lo mximo posible a lo que sera el
desarrollo de un proyecto real, teniendo, por tanto, una base de
datos donde almacenar la informacin y una capa de Modelo para
implementar la persistencia y definir la lgica de negocio. 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 pgina oficial de MySql e instalar siguiendo un
simple Wizard. Como framework de desarrollo de aplicaciones nos
hemos decantado por JDeveloper 10.1.3 que incorpora la
implementacin ADF Faces de JSF y que podremos descargar de la pgina
oficial de Oracle (http://www.oracle.com/tools/jdev_home.html).
11
1recuerde_ Usuario (UI). eventos. JSF es totalmente
independiente de la Capa del Modelo. JSF separa el pintado de los
componentes del Controlador.
Introduccin
JSF es un framework estndar Java para el desarrollo de
aplicaciones Web basado en el patrn MVC y constituido por una serie
de Componentes de
JSF realiza su programacin a travs de componentes y est basado
en
En JSF la navegacin se aplica a nivel de pgina por lo que puede
ser independiente de la accin.
12
2ndice_
Creacin de una aplicacin web con JSF
2.1. 2.2.
ANLISIS
...................................................................................15
2.1.1. Modelo fsico de datos
.....................................................15 CONSTRUCCIN
.........................................................................16
2.2.1. JDeveloper
......................................................................16
2.2.1.1. Incluir la librera de conexin con MySql en
JDeveloper.....................................................16
2.2.1.2. Creacin de la conexin con la base de datos Test de Mysql
.....................................................19 2.2.1.3.
Creacin del Data Source Test para el servidor de aplicaciones
embebido de Jdeveloper.............23 2.2.1.4. Creacin de las
tablas del esquema en la base de datos
Test......................................................24
2.2.1.5. Creacin una aplicacin JSF en JDeveloper .........29
2.2.1.6. Propiedades de los proyectos
.............................31 2.2.2. Preparacin del Modelo
...................................................34 2.2.2.1.
Creacin de los Objetos de Dominio ....................34 2.2.2.2.
Creacin del EJB de Sesin .................................39
2.2.2.3. Creacin del Data Control
...................................43
13
22.1. ANLISIS durante el curso. que cumplir los siguientes
objetivos:
Creacin de una aplicacin web con JSF
En este apartado vamos a presentar un anlisis de la aplicacin
web que desarrollaremos
El problema que vamos a resolver es la gestin de una agenda de
contactos, la cual tiene
Gestin de la informacin de los contactos. Clasificacin de los
contactos por tipo. Gestin de la informacin relacionada con los
domicilios de los contactos. Gestin de las relaciones entre los
distintos contactos almacenados en la agenda.
Para satisfacer los objetivos establecidos anteriormente ser
necesario implementar las siguientes acciones:
Listado de los contactos de la agenda. Formulario de alta de un
contacto. Formulario de edicin de los datos de un contacto.
Operacin de borrado de un contacto. Listado de los domicilios de un
contacto. Operacin para relacionar los contactos de la agenda. rbol
para mostrar las relaciones entre los contactos.
2.1.1. Modelo fsico de datos El Modelo de datos fsico para
almacenar la informacin que gestiona la agenda de contactos es el
siguiente:
15
2contacto de la agenda (idcontactorelacionado).
Creacin de una aplicacin web con JSF
El esquema est compuesto por tres tablas que se especifican a
continuacin:
Contacto: esta tabla almacena la informacin de los contactos y
est compuesta por el nombre, los apellidos, el telfono, el tipo de
contacto y si est relacionado con otro
Tipocontacto: contiene la informacin de los tipos de contactos
que establece la agenda. Las descripciones que tiene almacenadas
son: 'Amigos', 'Familia' y 'Trabajo'.
Domicilio: en esta tabla se almacena la informacin de los
domicilios de los contactos. Se guardar la direccin, la provincia,
el municipio, cdigo postal y el identificador del contacto al que
pertenece el domicilio.
2.2.
CONSTRUCCIN
Vamos a comenzar con la construccin 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 Introduccin, es un framework para el desarrollo de
aplicaciones Java que aumenta notablemente el nivel de
productividad y ofrece un elevado nmero de componentes UI. 2.2.1.1.
Incluir la librera de conexin con MySql en JDeveloper Para poder
conectarnos con una base de datos MySql necesitaremos dar de alta
la librera de conexin en el IDE de desarrollo. Estos son los pasos
que debemos seguir: 1. Primero guardamos el archivo .jar con la
librera que contiene el driver de conexin en la carpeta de la
instalacin de JDeveloper j22e\home\applib. Todas las libreras
almacenadas en esta carpeta podrn ser utilizadas por cualquier
aplicacin que desarrollemos con JDeveloper. 2. Iniciamos
JDeveloper
16
2
Creacin de una aplicacin web con JSF
3.
A continuacin, damos de alta la librera en JDeveloper. Para
ello, seleccionamos en el men Tools, Manage Libraries. Se abre la
siguiente ventana:
4.
Pulsamos el botn New, y en la ventana que se abre introducimos
el nombre de la librera mysql-connector-java-3.1.7-bin.
17
2
Creacin de una aplicacin web con JSF
5.
Pulsamos Add Entry y en la ventana de explorador que se abre
seleccionamos el archivo jar de la librera.
18
26.
Creacin de una aplicacin web con JSF
Para finalizar, pulsamos Aceptar para completar la operacin.
2.2.1.2. Creacin de la conexin con la base de datos Test de
Mysql Vamos a dar de alta una conexin con la base de datos Test de
Mysql que ser la que utilicemos para crear nuestro esquema de
tablas para la Aplicacin Web de Agenda. 1. Pulsamos sobre la pestaa
Connections, marcamos Database, y pulsamos sobre el botn derecho
del ratn, en el men que aparece seleccionamos New Database
Connection.
19
22.
Creacin de una aplicacin web con JSF
Pulsamos Siguiente, indicamos el nombre de la conexin Test y
seleccionamos como tipo de conexin Controlador JDBC de
Terceros.
3.
Pulsamos Siguiente e introducimos el nombre del usuario y la
contrasea de la base de datos MySql. El usuario por defecto usado
es root y la contrasea la que hayamos establecido en la instalacin
de MySql.
20
24. com.mysql.jdbc.Driver.
Creacin de una aplicacin web con JSF
Pulsamos Siguiente. A continuacin pulsamos New, e introducimos
la clase del driver
5.
Pulsamos Browse y seleccionamos la librera de usuario
mysql-connector-java3.1.7-bin.
6.
Una vez seleccionados la clase del driver de conexin y la
librera indicamos la cadena de conexin
jdbc:mysql://localhost:3306/test.
21
2
Creacin de una aplicacin web con JSF
7.
Para finalizar, podemos realizar un test a la conexin que
acabamos de dar de alta pulsando Siguiente, Test Connection. Si la
prueba de conexin es satisfactoria, pulsamos Terminar para
almacenar los datos de la conexin.
22
2Jdeveloper datos Test que hemos dado de alta en el apartado
anterior. 1.
Creacin de una aplicacin web con JSF
2.2.1.3. Creacin del Data Source Test para el servidor de
aplicaciones embebido de
Vamos a definir el DataSource o la fuente de datos a partir de
la conexin de la base de
Seleccionamos en el men Tools, Embedded OC4J Server
Preferences.
2.
Seleccionamos en el men de rbol Data Sources y pulsamos sobre el
botn Refresh Now.
23
23. campo JNDI Name. En este caso jdbc/TestDS.
Creacin de una aplicacin web con JSF
Con esta operacin hemos creado el Data Source para la conexin de
Base de Datos Test. El nombre que se utiliza para referirse al Data
Source es el especificado por el
2.2.1.4. Creacin de las tablas del esquema en la base de datos
Test En este apartado vamos a crear las tablas en el esquema Test
de la Base de Datos MySql. El script de creacin de las tablas es el
siguiente:
CREATE TABLE `test`.`tipocontacto` ( `idtipocontacto` INT
UNSIGNED NOT NULL AUTO_INCREMENT, `tipocontacto` VARCHAR(45) NOT
NULL, PRIMARY KEY (`idtipocontacto`) ) ENGINE = InnoDB; CREATE
TABLE `test`.`contacto` ( `idcontacto` INT NOT NULL AUTO_INCREMENT,
`nombre` VARCHAR(45) NOT NULL, `apellido1` VARCHAR(45) NOT NULL,
`apellido2` VARCHAR(45) NOT NULL, `telefono` VARCHAR(9) NOT NULL,
`idcontactorelacionado` INT NULL, `idtipocontacto` INT NOT NULL,
PRIMARY KEY (`idcontacto`)) ENGINE = InnoDB; CREATE TABLE
`test`.`domicilio` ( `iddomicilio` INT NOT NULL AUTO_INCREMENT,
`direccion` VARCHAR(100) NOT NULL, `provincia` VARCHAR(45) NOT
NULL, `municipio` VARCHAR(45) NOT NULL, `codigopostal` VARCHAR(5)
NOT NULL, `idcontacto` INT NOT NULL, PRIMARY KEY (`iddomicilio`))
ENGINE = InnoDB;
24
2Para crear las tablas realizamos los pasos siguientes: 1.
2.
Creacin de una aplicacin web con JSF
Copiamos de este documento el cdigo del script de creacin de las
tablas. Seleccionamos en el men Tools, SQL Worksheet. En el campo
Connection marcamos la conexin que hemos dado de alta Test y
pulsamos aceptar.
3.
Despus de pulsar Aceptar, se abrir una pestaa con el nombre de
la conexin y un rea de texto Enter SQL Statement. Pegamos sobre
esta rea el cdigo de creacin de las tablas del esquema y con el
ratn seleccionamos el cdigo de creacin de la primera tabla.
25
24. de resultados.
Creacin de una aplicacin web con JSF
Si pulsamos sobre el botn con forma triangular de color verde se
ejecutar el cdigo seleccionado. Si todo es correcto obtendremos un
mensaje de confirmacin en el rea
5.
A continuacin, seleccionamos el cdigo de la siguiente tabla y
pulsamos el botn de ejecucin. As hasta completar el proceso para
las tres tablas que conforman el esquema.
Una vez hemos cargado el esquema completo de la aplicacin,
realizaremos una insercin de datos para mostrar informacin inicial
cuando comencemos el desarrollo. El cdigo con los datos iniciales
es el siguiente:
insert into tipocontacto(idtipocontacto, tipocontacto) values(1,
"Amigos"); insert into tipocontacto(idtipocontacto, tipocontacto)
values(2, "Familia"); insert into tipocontacto(idtipocontacto,
tipocontacto) values(3, "Trabajo"); insert into
contacto(idcontacto, nombre, apellido1, apellido2, telefono,
idtipocontacto) values(1, "Antonio", "Fernandez", "Daz",
"954545454", 1); insert into contacto(idcontacto, nombre,
apellido1, apellido2, telefono, idtipocontacto,
idcontactorelacionado) values(2, "Mariana", "Cornejo", "Manovel",
"954525252", 3, 1); insert into contacto(idcontacto, nombre,
apellido1, apellido2, telefono, idtipocontacto,
idcontactorelacionado) values(3, "Maria", "Fernndez", "Castizo",
"954515151", 2, 1); insert into contacto(idcontacto, nombre,
apellido1, apellido2, telefono, idtipocontacto) values(4,
"Patricia", "Roca", "Castizo", "954515151", 1);
26
2insert into contacto(idcontacto, nombre, idtipocontacto,
idcontactorelacionado) insert into contacto(idcontacto, nombre,
idtipocontacto, idcontactorelacionado) insert into
contacto(idcontacto, nombre,
Creacin de una aplicacin web con JSFapellido2, telefono,
apellido1,
values(5, "Antonio", "Fernndez", "Reina", "957600000", 3, 4);
apellido1, apellido2, telefono,
values(6, "Javier", "Aguilar", "Garrido", "95644550", 3, 4);
apellido1, apellido2, telefono, idtipocontacto) values(7, "Manuel",
"Arteaga", "Alvarez", "95544550", 1); insert into
contacto(idcontacto, nombre, apellido1, apellido2, telefono,
idtipocontacto) values(8, "Francisco", "Ruiz", "Castro",
"95644550", 3); insert into contacto(idcontacto, nombre, apellido1,
apellido2, telefono, idtipocontacto) values(9, "Diego", "Ruiz",
"Ruiz", "95244551", 2); insert into contacto(idcontacto, nombre,
apellido1, apellido2, telefono, idtipocontacto,
idcontactorelacionado) values(10, "Maribel", "Leal", "Ruiz",
"95848550", 1, 8); insert into contacto(idcontacto, nombre,
apellido1, apellido2, telefono, idtipocontacto) values(11,
"Raquel", "Ruiz", "Mellado", "95144650", 1); insert into
contacto(idcontacto, nombre, apellido1, apellido2, telefono,
idtipocontacto) values(12, "Miguel", "Carmona", "Garca",
"95744650", 3); insert into contacto(idcontacto, nombre, apellido1,
apellido2, telefono, idtipocontacto, idcontactorelacionado)
values(13, "Ana Mara", "Delgado", "Sierra", "95744650", 2, 5);
insert into contacto(idcontacto, nombre, apellido1, apellido2,
telefono, idtipocontacto) values(14, "Rosala", "Milln", "Alpresa",
"95744650", 2); insert into domicilio(iddomicilio, direccion,
provincia, municipio, codigopostal, idcontacto) values(1,"C\ Manuel
del Valle n1", "Sevilla", "Sevilla","41008",1); insert into
domicilio(iddomicilio, direccion, provincia, municipio,
codigopostal, idcontacto) values(2,"C\ Jose Lus de Caso n1",
"Sevilla", "Sevilla","41005",1); insert into domicilio(iddomicilio,
direccion, provincia, municipio, codigopostal, idcontacto)
27
2idcontacto) idcontacto)
Creacin de una aplicacin web con JSF
values(3,"C\ Jos Lus de Caso n2", "Sevilla",
"Sevilla","41005",2); insert into domicilio(iddomicilio, direccion,
provincia, municipio, codigopostal, values(4,"C\ Jose Lus de Caso
n78", "Sevilla", "Sevilla","41005",3); insert into
domicilio(iddomicilio, direccion, provincia, municipio,
codigopostal, values(5,"Avenida Resolana n78", "Sevilla",
"Sevilla","41004",4); insert into domicilio(iddomicilio, direccion,
provincia, municipio, codigopostal, idcontacto) values(6,"Avenida
Carlos III sn", "Sevilla", "Sevilla","41004",5); insert into
domicilio(iddomicilio, direccion, provincia, municipio,
codigopostal, idcontacto) values(7,"Avenida "Sevilla","41001",6);
insert into domicilio(iddomicilio, direccion, provincia, municipio,
codigopostal, idcontacto) values(8,"C\ Mara Auxiliadora n4 Bloque 1
5B", "Sevilla", "Sevilla","41002",7); insert into
domicilio(iddomicilio, direccion, provincia, municipio,
codigopostal, idcontacto) values(9,"C\ Repblica Argentina",
"Crdoba", "Crdoba","14600",8); insert into domicilio(iddomicilio,
direccion, provincia, municipio, codigopostal, idcontacto)
values(10,"C\Susana "Crdoba","14700",9); insert into
domicilio(iddomicilio, direccion, provincia, municipio,
codigopostal, idcontacto) values(11,"Avenida lvaro Domecq n1 ",
"Jerez", "Cdiz","24700",10); insert into domicilio(iddomicilio,
direccion, provincia, municipio, codigopostal, idcontacto)
values(12,"C\ Mercader sn", "Granada", "Granada","44700",11);
insert into domicilio(iddomicilio, direccion, provincia, municipio,
codigopostal, idcontacto) values(13,"C\ Recaredo n1 n", "Granada",
"Granada","44700",12); insert into domicilio(iddomicilio,
direccion, provincia, municipio, codigopostal, idcontacto)
values(14,"C\ Vela n 2 2 A", "Granada", "Granada","44700",13);
Bentez n 23 portal B, 2A", "Crdoba", de los Descubrimientos sn",
"Sevilla",
28
2idcontacto) verde con forma triangular. 2.2.1.5. Creacin una
aplicacin JSF en JDeveloper
Creacin de una aplicacin web con JSF
insert into domicilio(iddomicilio, direccion, provincia,
municipio, codigopostal, values(15,"C\ Larios n4 3B", "Malaga",
"Malaga","44700",14);
Este script lo ejecutaremos en la misma ventana donde realizamos
la carga de las tablas siguiendo el mismo procedimiento:
seleccionamos el cdigo a ejecutar y pulsamos el botn
En este apartado vamos a crear una aplicacin en JDeveloper donde
trabajaremos para realizar el desarrollo de la agenda. 1.
Seleccionamos en el men File, New y en la ventana emergente
General, Application.
2.
Indicamos el nombre de la aplicacin Agenda, el prefijo del
paquete de la aplicacin agenda y seleccionamos como plantilla de
aplicacin Web Application [JSF, EJB].
29
2
Creacin de una aplicacin web con JSF
3.
Para finalizar, pulsamos Aceptar y tendremos creada la aplicacin
con dos proyectos, uno para la parte del modelo de la aplicacin
Model y otro para la parte del controlador y la vista
ViewController.
30
22.2.1.6. Propiedades de los proyectos 1.
Creacin de una aplicacin web con JSF
En las propiedades de los proyectos se define informacin
relativa al mismo, como las carpetas en las que se almacenan los
fuentes y las clases, las libreras que incluye, etc. Para acceder a
las propiedades de los proyectos de la aplicacin de Agenda:
Marcamos con el ratn por ejemplo el proyecto de Model, pulsamos el
botn derecho del ratn y seleccionamos Proyect Properties.
2.
En la pestaa 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 aplicacin Agenda.
31
23.
Creacin de una aplicacin web con JSF
La pestaa Compiler contiene las propiedades del compilador.
4.
Si pulsamos sobre la pestaa J2EE Application podemos modificar
el nombre por defecto de la aplicacin web y el contexto con el que
se desplegar.
32
25. del proyecto ViewController.
Creacin de una aplicacin web con JSF
La pestaa JSP Tag Libraries muestra las libreras de etiquetas
que tenemos dadas de alta en el proyecto. El proyecto Model no debe
tener incluidas libreras de etiquetas debido a que, es un proyecto
para la capa de Modelo siguiendo el paradigma de desarrollo J2EE.
Para ver las libreras de etiquetas podemos acceder a las
propiedades
6.
Como podemos observar, por defecto el proyecto de ViewController
tiene dadas de alta las libreras de JSF de la implementacin de SUN.
Para aadir las libreras de JSF de la implementacin de Oracle
pulsamos el botn Add y seleccionamos ADF Faces Components y ADF
Faces HTML.
33
27. Libraries.
Creacin de una aplicacin web con JSF
Para ver las libreras que tenemos incluidas en el proyecto
pulsamos sobre la opcin
2.2.2. Preparacin del Modelo En este apartado vamos a preparar
la capa de modelo. Como hemos mencionado antes, la tecnologa que se
usar ser CMP Entity Beans y EJB. La mayora de las aplicaciones J2EE
requieren servicios transaccionales, los EJB Session Bean ofrecen
este servicio de lgica 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. 2.2.2.1. Creacin de los Objetos de
Dominio Vamos a crear los objetos de dominio a partir de las tablas
de datos de la Base de Datos Test: 1. Seleccionamos el proyecto
Model, pulsamos el botn derecho del ratn y New.
34
2
Creacin de una aplicacin web con JSF
2.
En el men, elegimos Business Tier, EJB, CMP Entity Beans from
Tables y pulsamos Aceptar.
35
23. JavaBeans 3.0 (J2EE 5.0).
Creacin de una aplicacin web con JSF
Despus de la ventana de bienvenida, seleccionamos la versin de
los Enterprise
4.
A continuacin, seleccionamos el nombre de la conexin de la Base
de Datos Test.
36
25. (Contacto, Domicilio y TipoContacto).
Creacin de una aplicacin web con JSF
Pulsamos Siguiente, marcamos Auto-Query y como tipos de objetos
Tables. Pasamos al rea de Selected las tres tablas que conforman el
esquema de la Agenda
6.
Pulsamos Siguiente, indicamos el nombre del paquete donde se
crearn los Entity Beans. Seleccionamos como tipo de acceso
PROPERTY, marcamos implementacin de la interfaz
java.io.Serializable. Usaremos la clase java.util.List como tipo de
coleccin.
37
27. se van a generar.
Creacin de una aplicacin web con JSF
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
8.
La pantalla final muestra un resumen. Pulsamos Terminar para
generar las clases Java de las entidades.
38
2en el men File, Save All para guardar todo el trabajo.
Creacin de una aplicacin web con JSF
Como resultado de este proceso hemos creado las clases Java de
los Entity Beans. Pulsamos
Si desplegamos el proyecto de model, abrimos la carpeta de
Application Sources y expandimos el paquete agenda.model podemos
ver los nuevos Entity Beans.
Si seleccionamos y hacemos doble click con el ratn sobre la
clase Contacto podemos ver que tenemos un atributo por cada campo
de la tabla contacto. 2.2.2.2. Creacin del EJB de Sesin A
continuacin, vamos a crear el EJB de Sesin para encapsular la lgica
de negocio de la aplicacin. La capa de Modelo, como mencionbamos,
est compuesta por CMP Entity Beans como tecnologa de persistencia y
EJB para la implementar la lgica de negocio. 1. Marcamos con el
ratn el proyecto Model y pulsamos botn derecho New como hicimos
anteriormente.
39
22.
Creacin de una aplicacin web con JSF
En el men en forma de rbol seleccionamos Business Tier, EJB,
Session Bean.
3.
En el primer paso, indicamos el nombre del EJB de sesin
AgendaSessionEJB, tipo de sesin Stateless y tipo de transaccin
Container. Marcamos Generate Session Facade Methods e implementacin
de las entidades EJB 3.0 Entities.
40
24. entidades que tenemos en el proyecto de el Data Control.
Creacin de una aplicacin web con JSF
El siguiente paso muestra los mtodos que se generan
automticamente para las model (Contacto, Domicilio y Tipocontacto)
adems de los mtodos de fachada. Marcamos todos para crearlos en
5.
En
el
siguiente
paso
indicamos
el
nombre
de
la
clase
del
EJB de
sesin
agenda.model.AgendaSessionEJBBean y la carpeta del proyecto
donde se crear.
41
26.
Creacin de una aplicacin web con JSF
Por ltimo, indicamos el nombre de las interfaces Local que
implementar el EJB. Para desarrollar con JSF slo 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 sesin.
42
22.2.2.4. Creacin del Data Control Para crear el Data
Control:
Creacin de una aplicacin web con JSF
En este apartado vamos a crear el Data Control a partir del EJB
de Sesin que encapsula la lgica de negocio de la aplicacin. El Data
Control es una interfaz para blindar el modelo con la capa cliente
de la aplicacin J2EE en este caso las pginas Web JSF.
Marcamos con el ratn el EJB AgendaSessionEJBBean, pulsamos el
botn derecho y Create Data Control. Como resultado de esta operacin
tendremos:
Un fichero Xml para cada CMP Entity Bean donde se describen los
atributos, los parmetros y los mtodos de acceso.
Un fichero UpdateableSingleValue.xml donde se describen las
operaciones de control sobre objetos con valores simples.
Un fichero UpdateableCollection.xml donde se especifican las
operaciones de control sobre los objetos con valores mltiples.
El fichero DataControls.dcx que define la interfaz del Data
Control.
43
2recuerde_ paleta de conexiones.
Creacin de una aplicacin web con JSF
Es necesario incluir en Jdeveloper la librera del driver de
conexin a la base de datos MySql
(mysql-connector-java-3.1.7-bin.jar).
Tendremos que dar de alta la conexin con la Base de Datos Test
en la
Adems, deberemos crear el DataSource jdbc/TestDS.
El tipo de aplicacin que crearemos ser Web Application [JSF,
EJB].
Para la Capa de Modelo, los objetos de dominio del sistema de la
agenda se representarn por medio de CMP (Container-Managed
Persistence) Entity Beans.
Usamos un EJB de sesin 3.0 para implementar la lgica de
negocio.
El Data Control es una interfaz que se genera a partir del EJB
de sesin 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
3ndice_
Usando ADF Faces Tables
3.1. 3.2. 3.3.
CAPA DE PRESENTACIN DE DATOS ADF FACES, JSF ..................47
PREPARACIN DE UNA PLANTILLA
.............................................47 PGINA DE BSQUEDA DE
CONTACTOS ......................................53 3.3.1. Navegacin
.....................................................................53
3.3.2. Aplicando la plantilla
definida..........................................55 3.3.3.
Definicin de la consulta de bsqueda .............................56
3.3.4. Desarrollo del formulario de bsqueda
............................57 3.3.5. Tabla de resultados de la
pgina de bsqueda .................61 3.3.6. Implementacin de la
lgica de negocio de la bsqueda ..64 3.3.7. Ejecucin de la pgina de
bsqueda.................................64 3.3.8. Tabla detalle de
los Domicilios de los Contactos...............66
45
33.1. CAPA DE PRESENTACIN DE DATOS ADF FACES, JSF establecer la
lgica de negocio de la aplicacin de la agenda. que implementa
JSF.
Usando ADF Faces Tables
En el captulo anterior preparamos la Capa del Modelo para poder
acceder a los datos y
En los sucesivos captulos y apartados nos centraremos en la capa
del controlador y la vista
3.2.
PREPARACIN DE UNA PLANTILLA
En la gran mayora de los desarrollos Web, se hace uso de la
definicin de una plantilla para conseguir un aspecto similar en
todas las pginas de la aplicacin. Nuestra primera pgina JSF ser una
plantilla para definir un aspecto comn para todas nuestras pginas.
Para crear la pgina JSF que nos servir como plantilla vamos a
seguir los siguientes pasos: 1. 2. Marcamos con el ratn el proyecto
ViewController, pulsamos botn derecho, New. Seleccionamos en el men
de la ventana desplegada Web Tier, JSF, JSF JSP y pulsamos Aceptar.
3. 4. Pulsamos Siguiente en la ventana de bienvenida para la
creacin de pginas JSF JSP. A continuacin indicamos en nombre de la
pgina template, marcamos la opcin de JSP Document (*.jspx) y
pulsamos Siguiente.
47
35. Managed Bean.
Usando ADF Faces Tables
En el siguiente paso se especifica si queremos publicar de forma
automtica, mtodos de acceso a los componentes de nuestra pgina en
una clase Java que se denomina Backing. Por defecto el nombre de
estas clases ser backing_ seguido del nombre de la pgina JSF. A
esta clase, Java la dar de alta en el controlador como un
Para la plantilla seleccionamos la opcin de Do Not Automatically
Expose UI Component s in a Managed Bean y pulsamos Siguiente.
6.
A continuacin debemos elegir qu librera de etiquetas aadimos a
la pgina. Por defecto aparecen seleccionadas siempre las del ncleo
JSF de SUN. Nosotros aadiremos ADF Faces Components 10_1_3_0_4 y
ADF Faces HTML 10_1_3_0_4.
48
37. tales como incluir las hojas de estilo. Pulsamos
Terminar.
Usando ADF Faces Tables
En el paso siguiente vamos a indicar el ttulo de la pgina y a
definir aspectos visuales
Finalizado el wizard, tendremos la pgina template.jspx dentro de
la carpeta Web Content del proyecto ViewController. Vamos a aadir
componentes a nuestra pgina 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 seleccin superior nos permite elegir de qu librera
de etiquetas queremos usar un componente. Seleccionamos la librera
de etiquetas ADF Faces Core y arrastramos el componente Panel Page
a la pgina de plantilla. El resultado es el siguiente:
Si queremos ver el cdigo fuente basta con que pulsemos en la
pestaa Source situada en la parte inferior de la ventana. Vamos a
cambiar el ttulo de la ventana para dejarlo vaco, para ello
accedemos a la paleta de propiedades. Si no est visible pulsamos
View, Property Inspector.
50
3borramos el contenido. derecho, Aceptar. seleccionamos New,
General, File, Aceptar. En la
Usando ADF Faces Tables
Hacemos clic con el ratn sobre el campo que contiene el valor de
la propiedad Title y
A continuacin, vamos a crear un fichero de recursos en el
proyecto para permitir el soporte multilenguaje. Seleccionamos el
proyecto ViewController con el ratn, pulsamos botn ventana
emergente introducimos el nombre del fichero UIResources.properties
y pulsamos de nuevo
Vamos a aadir 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
Ahora vamos a declarar en la plantilla el fichero de recursos:
1. 2. Abrimos la pgina de la plantilla. Pulsamos en el men View,
Structure para ver la estructura de la pgina.
51
3
Usando ADF Faces Tables
3.
Accedemos a la Paleta de Componentes, desplegamos la lista de
componentes de la librera JSF Core y arrastramos a la etiqueta
afh:head en la Paleta de Estructura el componente LoadBundle.
4.
En la ventana emergente pulsamos el botn que contiene tres
puntos, elegimos la opcin de Properties File, marcamos el fichero
UIResources.properties y pulsamos Aceptar.
52
3recursos res y pulsamos aceptar.
Usando ADF Faces Tables
Para terminar indicamos el nombre de la variable que usaremos
para acceder al fichero de
Una vez registrado el acceso al fichero de recursos en nuestra
plantilla, vamos a hacer uso de las propiedades que definimos
anteriormente. En la Paleta de Estructura abrimos el componente
af:PanelPage que ya habamos arrastrado, marcamos con el ratn
branding, pulsamos botn derecho, Insert inside branding, ADF Faces
Core y seleccionamos el componente OutputText. A continuacin, en la
Paleta de Propiedades cambiamos el valor de la propiedad Value por
#{res['plantilla.marca']}. Repetimos el proceso anterior para los
elementos brandingApp y appAbout. El valor de la propiedad Value
ser #{res['plantilla.marcaAplicacion']} y #{res['plantilla.sobre']}
respectivamente.
3.3.
PGINA DE BSQUEDA DE CONTACTOS
En este apartado vamos a desarrollar una pgina que mostrar el
listado de los contactos de la agenda. Esta pgina tendr un buscador
para poder filtrar el contenido de la lista de los contactos.
3.3.1. Navegacin Vamos a comenzar dando de alta la nueva pgina: 1.
Desplegamos el contenido de la carpeta Web Content, WEB-INF y
abrimos el archivo faces-config.xml. En este fichero se define todo
el flujo de la navegacin entre las
53
32. JSF Page al diagrama. 3. Cambiamos el nombre de la pgina por
buscadorContactos.jspx.
Usando ADF Faces Tables
pginas mediante la definicin de reglas de navegacin y se dan de
alta los Backings de las pginas como Managed Beans, tal y como
mencionamos anteriormente. En la Paleta de Componentes
seleccionamos JSF Navigation Diagram y arrastramos
4.
A continuacin, hacemos doble clic el diagrama de la pgina para
iniciar el wizard de creacin.
5.
Pulsamos siguiente hasta llegar al paso 2, donde marcamos
Automatically Expose UI Components in a New Managed Bean y pulsamos
Siguiente. El nombre del Managed Bean debe ser
backing_buscadorContactos, la clase BuscadorContactos y el paquete
agenda.view.backing.
54
3
Usando ADF Faces Tables
6.
Pulsamos Siguiente y debemos tener seleccionadas las libreras de
etiquetas ADF Faces Components 10_1_3_0_4, ADF Faces HTML
10_1_3_0_4, JSF Core 1.0 y JSF HTML 1.0. Si todo es correcto
pulsamos Terminar y se abrir en modo diseo la pgina
buscadorContactos.jspx que acabamos de dar de alta.
3.3.2. Aplicando la plantilla definida Para aplicar la plantilla
a la pgina para buscar contactos que acabamos de dar de alta,
debemos seguir lo siguientes pasos: 1. Abrimos plantilla.jspx,
accedemos a la Paleta de Estructura, seleccionamos adf:html y
pulsamos botn derecho Copiar. 2. Volvemos a la pgina
buscadorContactos.jspx, nos situamos en la Paleta de Estructura y
eliminamos la etiqueta adf:html. 3. 4. Pegamos la etiqueta adf:html
que copiamos de la plantilla y guardamos los cambios. Seleccionamos
la etiqueta af:panelPage y accedemos a la Paleta de Propiedades
para establecer la propiedad Title a Buscador Contactos.
55
3fuente de la pgina del buscador. verde. 3.3.3. Definicin de la
consulta de bsqueda
Usando ADF Faces Tables
Si todo el proceso ha concluido satisfactoriamente, pulsamos en
Source para ver el cdigo En la esquina superior derecha aparecer un
recuadro
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:
@NamedQuery(name="findAllContacto", query="select object(o) from
Contacto o")
Nosotros vamos a aadir la nueva consulta parametrizada de la
siguiente forma: 1. Importamos la clase NamedQueries del paquete
javax.persistence aadiendo import javax.persistence.NamedQueries;.
2. 3. Eliminamos la consulta para obtener todos los contactos.
Aadimos el siguiente conjunto de consultas:
@NamedQueries({ @NamedQuery(name="findAllContacto", Contacto
o"), query="select object(o) from
@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")})
Hemos mantenido la anterior y aadido una nueva
findContactoByParameters. 4. 5. Recompilamos la clase para
verificar que no hay ningn error de sintaxis. A continuacin,
seleccionamos con el ratn la clase del EJB de Session
AgendaSessionEJBBeanBean, pulsamos botn derecho Edit Session
Facade.
56
36. query que acabamos de aadir findContactoByParameters.
Usando ADF Faces Tables
En la ventana emergente desplegamos la clase de la entidad
Contacto y marcamos la
7.
Como ltimo paso volvemos a seleccionar el EJB de Session,
pulsamos botn derecho, Create Data Control. Con esta operacin
refrescamos el Data Control para que aada la nueva consulta y poder
utilizarla desde las pginas JSF. De igual forma, cada vez que
modifiquemos o incluyamos nuevos mtodos en el EJB deberemos generar
el Data Control para que los cambios aplicados sean visibles
durante el desarrollo de las pginas Web.
3.3.4. Desarrollo del formulario de bsqueda Volvemos al proyecto
ViewController y a la pgina del buscador. Para desarrollar el
formulario seguiremos los siguientes pasos: 1. Accedemos a la
Paleta de Componentes y arrastramos el componente PanelBox de la
librera de etiquetas ADF Faces Core a la etiqueta af:PanelPage que
podremos ver con claridad en la paleta de Estructura.
57
32. panelBoxBuscador. panelBoxBuscador.
Usando ADF Faces Tables
En la Paleta de Propiedades editamos el valor de la propiedad Id
y la establecemos a
Esta propiedad hace referencia al identificador que tendr el
componente en la clase Java del backing. As, despus de realizar
este cambio tenemos un atributo en la clase
agenda.view.backing.BuscadorContactos de tipo CorePanelBox con el
nombre
Es importante renombrar los componentes que iremos aadiendo a
las pginas para poder localizarlos con mayor facilidad en el
backing. Para no extender demasiado la descripcin del desarrollo
vamos a asumir que estamos renombrando los componentes con el
siguiente formato: nombre_componente + nombre_descriptivo. Por
ejemplo panelBoxBuscador. 3. A continuacin, arrastramos cuatro
componentes de tipo PanelHorizontal sobre la etiqueta af:PanelBox.
4. Modificamos la propiedad Haling de los tres primeros componentes
de tipo panel horizontal y la establecemos a right. 5. Abrimos el
fichero de recurso que creamos para el proyecto
UIResources.properties y aadimos:
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
6.
En
la
paleta
Data
Control
desplegamos
el
mtodo
findContactoByParameters(Object, Object, Object) y arrastramos
el parmetro nombre sobre la etiqueta af:PanelHorizontal. Se abrir
una pequea ventana emergente donde seleccionaremos Text, ADF
InputText w/Label.
58
3
Usando ADF Faces Tables
7.
Seguidamente, cambiamos la propiedad Label por la referencia al
fichero de recursos. Introduciremos:
#{res['buscadorContactos.formulario.nombre']}.
8.
A continuacin, arrastramos desde la paleta de Data Control el
parmetro apellido1 hasta el segundo panel horizontal como
TextInput. De igual forma cambiamos el valor de la propiedad Label
por #{res['buscadorContactos.formulario.apellido1']}.
9.
Volvemos de nuevo a la paleta de Data Control para arrastrar el
parmetro 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 parmetro 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 relacin de los atributos que queremos
establecer. En este caso el parmetro idtipocontacto se relaciona
con la propiedad idtipocontacto. Para concluir, indicamos que el
atributo tipocontacto es el que se muestra en el combo de seleccin
y el texto de la opcin de no seleccin es Todos.
60
3#{res['buscadorContactos.formulario.botonBuscar']}. bsqueda.
3.3.5. Tabla de resultados de la pgina de bsqueda
Usando ADF Faces Tables
12. En este punto, vamos a arrastrar un componente commandButton
sobre el ltimo panel horizontal. Editamos el valor de la propiedad
Text e introducimos el valor
Con este paso hemos terminado de desarrollar el formulario de
bsqueda. En el apartado siguiente introduciremos un componente de
tipo tabla para mostrar el resultado de la
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 bsqueda. El componente Table es uno de
los ms destacados de la implementacin de ADF Faces de JSF. Es un
componente muy verstil y personalizable que permite mostrar
informacin organizada en filas y columnas. Alguna de las
caractersticas que presenta son: 1. 2. 3. 4. Dispone de un
componente de seleccin simple o mltiple por filas. Realiza una
paginacin automtica. Incluye ordenacin por columnas. Establece
bandeo por filas y columnas.
A lo largo del desarrollo de la tabla para presentar los
resultados de la bsqueda, iremos aplicando cada una de las
caractersticas que acabamos de comentar. Para crear la tabla de
resultados seguiremos los siguientes pasos: 1. 2. Abrimos la pgina
buscadorContactos.jspx si no la tenemos abierta. Accedemos a la
paleta de Data Control y desplegamos el mtodo
finContactoByParameters(Object, Object, Object). Marcamos con el
ratn la lista de objetos Contacto que aparece como resultado de
este mtodo y la arrastramos sobre la etiqueta af:panelPage. 3. Se
abrir una ventana emergente y seleccionamos Tables, ADF Read-only
Table.
61
3
Usando ADF Faces Tables
4.
Una vez hemos seleccionado la opcin de ADF Read-only Table, se
abre una ventana donde podremos elegir qu columnas mostramos en
nuestra tabla, si incluimos seleccin por filas y si queremos
activar la opcin de ordenacin por columnas. Eliminamos las columnas
referentes a los atributos de identificador de contacto,
identificador de tipo contacto y identificador del contacto
relacionado.
5.
Ya tenemos el componente creado en la pgina. Accedemos a la
paleta de Propiedades y cambiamos la propiedad Id del componente
por el valor TableResultados.
6.
En la paleta de Estructura desplegamos el componente af:table,
marcamos la tercera columna que contiene la propiedad del nombre
del contacto y la arrastramos para colocarla como la primera
columna de la tabla.
62
37. es #{res[buscadorContactos.tablaContactos.nombre]}. 8. 9.
Eliminamos el botn de Submit del componente table.
Usando ADF Faces Tables
Editamos el valor de la propiedad HeaderText de cada una de las
columnas y le asignamos la referencia correspondiente al fichero de
recursos. Por ejemplo, el valor de la propiedad HeaderText para la
columna que muestra el nombre de los contactos
En la paleta de Estructura hacemos doble clic sobre la etiqueta
af:table. En la ventana emergente, pulsamos sobre la pestaa
Formating, marcamos la opcin de Include Range Navigation y
establecemos el valor del campo Rows a 5. Con esto paginaremos los
resultados de cinco en cinco filas. Marcamos Include Table Banding,
seleccionamos Rows y establecemos el valor de Banding Interval a 1.
Este parmetro indica que bandearemos los resultados por filas y de
uno en uno.
10. Para finalizar pulsamos Aceptar.
63
33.3.6. Implementacin de la lgica de negocio de la bsqueda
continuacin, vamos a especificar la lgica de negocio de la
consulta: 1. denominado AgendaSessionEJBBeanBean. 2.
Usando ADF Faces Tables
Ya tenemos pintado el formulario de bsqueda y la tabla para
presentar los resultados. A
Abrimos la clase del EJB de sesin que tenemos en el proyecto
Model y que hemos
Editamos el mtodo public List findContactoByParameters(Object
nombre, Object apellido1, Object idtipocontacto) que es el
encargado de realizar la consulta y aadimos el siguiente cdigo
antes de la llamada a return.
// Preparacin de los parmetros de bsqueda nombre =
nombre!=null?nombre!=""?"%"+nombre+"%":"%":"%"; apellido1 =
apellido1!=null?apellido1!=""?"%"+apellido1+"%":"%":"%";
idtipocontacto =
idtipocontacto!=null?idtipocontacto!=""?idtipocontacto:"%":"%";
Con este cdigo estamos indicando que si no se especifica el
valor de algunos de los parmetros, debe buscar por todo. Adems, se
buscar dentro del contenido de los campos de tipo texto como son
nombre y apellidos, si se encuentra la cadena introducida como
parmetro. Por ejemplo, si introducimos en la condicin de bsqueda el
valor nt como nombre, el resultado debe presentar todo los
contactos cuyo nombre contenga la cadena nt. 3.3.7. Ejecucin de la
pgina de bsqueda Vamos a ver a continuacin como ejecutar una pgina
JSF y como establecer una pgina como inicial a la hora de arrancar
el Servidor de Aplicaciones OC4J embebido que incluye JDeveloper.
Seguimos los siguientes pasos: 1. Marcamos el proyecto
ViewController, botn derecho del ratn, y seleccionamos Run. 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 ejecucin.
Nosotros estableceremos como objetivo nuestra pgina
buscadorContactos.jspx. Pulsamos el botn de
64
3pgina de bsqueda. Una vez terminado pulsamos Aceptar.
Usando ADF Faces Tables
Browse, accedemos a la carpeta de ficheros public_html y
seleccionamos nuestra
Despus de realizar estos pasos, el servidor comienza y
iniciarse. Se abrir una ventana de Internet Explorer y nos mostrar
la pgina solicitada. El resultado deber ser muy parecido al
siguiente:
65
33.3.8. Tabla detalle de los Domicilios de los Contactos de los
domicilios del nuevo contacto seleccionado.
Usando ADF Faces Tables
Para finalizar la pgina del buscador, vamos a incluir una tabla
ms para mostrar los domicilios de los contactos. Cada vez que
seleccionemos un contacto, se recargar la tabla
Vamos a seguir los siguientes pasos para presentar el detalle de
los domicilios: 1. En el proyecto Model, desplegamos el paquete
agenda.model y abrimos la clase Domicilio. 2. A continuacin,
sustituimos la siguiente lnea de cdigo donde se especifica la
consulta de todos los domicilios (@NamedQuery(name =
"findAllDomicilio", query = "select object(o) from Domicilio o"))
por el siguiente cdigo:
@NamedQueries( { @NamedQuery(name = "findAllDomicilio", query =
"select object(o) from Domicilio o"), @NamedQuery(name
="findDomicilioByIdContacto", query = "select object(o) from
Domicilio o where o.idcontacto like :idcontacto")})
Para
poder
compilar
la
clase
de
Domicilio
debemos
importa
javax.persistence.NamedQueries. Con este cdigo hemos aadido una
consulta para buscar los domicilios de un contacto. 3. A
continuacin pulsamos botn derecho del ratn sobre la clase del EJB
de sesin y seleccionamos Edit Session Facade, desplegamos la
entidad Domicilio y marcamos el nuevo mtodo de consulta que hemos
creado.
66
34. seleccionamos Create Data Control. 5. Volvemos al proyecto
ViewControler y abrimos buscadorContactos.jspx 6.
Usando ADF Faces Tables
Por ltimo, generamos el DataControl del EJB de sesin para poder
trabajar en el proyecto de la vista con el nuevo mtodo de consulta
de domicilios. Para realizar esta operacin, pulsamos botn derecho
del ratn sobre la clase del EJB y
la
pgina
Accedemos a la paleta de DataControl y pulsamos botn derecho,
Refresh. Despus de realizar esta operacin debemos tener el nuevo
mtodo publicado.
7.
Seleccionamos con el ratn a lista de tipo Domicilio que nos
devuelve el mtodo 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 parmetro de idcontacto del mtodo. Pulsamos con el ratn
sobre el campo Value, hasta que
67
3
Usando ADF Faces Tables
aparece un botn 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. 9. En la siguiente
ventana eliminamos las columnas que muestran los atributos de
idcontacto, idcomicilio. Marcamos la opcin de Enable sorting. 10.
Accedemos a la paleta de Propiedades y cambiamos la propiedad Id
asignndole el nuevo valor tableDomicilios. Accedemos a la propiedad
PartialTriggers, pulsamos el botn con tres puntos. En la ventana
emergente pulsamos New, marcamos con el ratn sobre la nueva fila
donde nos aparecer una lista con los componentes de la pgina.
Seleccionamos tableResultados y pulsamos Aceptar. Con esto hemos
especificado que cada vez que se recargue la tabla de los contactos
se recargar la tabla con los domicilios. 11. Eliminamos el botn de
Submit de la tabla de domicilios. 12. Accedemos a la etiqueta
af:tableSelectOne de la tabla de resultados que muestra los
contactos y ponemos la propiedad AutoSubmit de este componente a
true.
68
3domicilios de los contactos. Si ejecutamos el proyecto
ViewController este es el resultado:
Usando ADF Faces Tables
Despus de realizar estos pasos hemos finalizado el desarrollo de
la tabla de detalle de los
Podemos observar que el ttulo 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
3recuerde_las pginas de nuestras aplicaciones.
Usando ADF Faces Tables
Se debe definir una plantilla para proporcionar un aspecto
estndar a todas
La pgina de la plantilla no publica sus componentes en un
Managed Bean.
Las
libreras
de
componentes
JSF
que
utilizamos
son
ADF
Faces
Components 10_1_3_0_4 y ADF Faces HTML 10_1_3_0_4 adems de las
del ncleo de JSF de SUN.
Las clases java donde se publican los mtodos de acceso de a los
componentes de la pgina reciben el nombre de Backing. Los backing
de las pginas se publican en el fichero faces-config.xml del
Controlador como Managed Bean.
Debemos renombrar la propiedad Id de los componentes que aadimos
a nuestras pginas con objeto de localizar los mtodos de acceso
publicados en el Backing con mayor facilidad.
El componente Table de ADF Faces es uno de los componentes ms
destacados y permite introducir seleccin simple o mltiple por
filas, realizar paginacin, ordenacin por columnas y bandeo por
filas y columnas.
La propiedad AutoSubmit de un componente indica que si se
modifica el valor del componente, ste hace submit de forma
automtica.
La propiedad partialTrigger provoca un refresco del propio
componente en funcin del identificador del componente a quien
referencia. Es decir, si el componente referenciado cambia, el
componente que define el partialTrigger refresca.
70
4ndice_
Usando ADF Faces Tree
4.1. 4.2. 4.3.
FORMULARIOS DE ALTA Y EDICIN DE CONTACTOS ...................73
NAVEGACIN
.............................................................................73
PGINA DE EDICIN DE CONTACTOS
.........................................75 4.3.1. Nueva consulta
para la entidad de contacto .....................77 4.3.2.
Construccin del
formulario.............................................78 4.3.3.
Botn de Grabar para actualizar los datos del contacto ....82 4.3.4.
Botn de Volver
...............................................................83
4.3.5. Botn Editar en la pgina de bsqueda de contactos........83
4.3.6. Ejecucin de la pgina para la edicin de contactos
.........85
4.4.
PGINA DE ALTA DE CONTACTOS
...............................................86 4.4.1. Creamos la
pgina nuevoContacto.jspx............................86 4.4.2.
Aplicamos la plantilla a la pgina de nuevo contacto........86
4.4.3. Construccin del
formulario.............................................87 4.4.4.
Botn Grabar
...................................................................90
4.4.5. Botn Cancelar
................................................................91
4.4.6. Enlace en la pgina del buscador
.....................................92 4.4.7. Ejecucin de la pgina
para el alta de contactos ..............92
4.5.
BOTN PARA ELIMINAR
CONTACTOS..........................................93
71
44.1. FORMULARIOS DE ALTA Y EDICIN DE CONTACTOS la agenda y
poder editar los ya existentes. 4.2. NAVEGACIN
Usando ADF Faces Tree
En este tema vamos a realizar el desarrollo de los formularios
para dar de alta contactos en
Vamos a comenzar dando de alta las pginas en el fichero del
controlador: 1. En el proyecto ViewController, abrimos la carpeta
WEB Content, WEB-INF y abrimos el fichero faces-config.xml como
hicimos en el tema anterior. Pulsamos la pestaa de Diagram si no
vemos el fichero en forma de diagrama. Como podemos ver, tenemos ya
la pgina buscadorContactos.jspx que es la pgina inicial de la
agenda. 2. Accedemos a la paleta de componentes, arrastramos JSF
Page al diagrama y cambiamos el nombre de la pgina por el de
edicionContacto.jspx. 3. A continuacin, vamos a establecer una
regla de navegacin desde la pgina de bsqueda de contactos hasta la
pgina que utilizaremos para editar los datos de un contacto. En la
paleta de componentes seleccionamos JSF Navigation Case, pulsamos
con el ratn sobre la pgina buscadorContactos.jspx y volvemos a
pulsar sobre la pgina edicionContacto.jspx. Por defecto, el nombre
de las reglas de navegacin es success. Para cambiar el nombre de la
regla que acabamos de aadir, hacemos doble clic sobre success e
introducimos editar. 4. Volvemos a la paleta de componentes,
seleccionamos JSF Page y arrastramos al diagrama otra pgina. Esta
pgina ser la encargada de dar de alta nuevos contactos y la
nombraremos nuevoContacto.jspx. 5. Para navegar a la pgina de alta
de contactos necesitaremos crear una nueva regla de navegacin desde
buscadorContactos.jspx hasta nuevoContacto.jspx. Para hacer esto
arrastraremos JSF Navegation Case hasta la pgina del buscador y
volvemos a pulsar con el botn derecho del ratn cuando flecha est
encima de la pgina del nuevo contacto. Renombraremos la regla de
navegacin con el nombre nuevo.
73
4En este punto el diagrama debe presentar un aspecto similar al
siguiente:
Usando ADF Faces Tree
Hasta ahora tenemos establecidas las reglas de navegacin para ir
desde la pgina del buscador hasta las pginas de edicin y alta. Para
volver desde cada una de stas al buscador sera necesario establecer
reglas de navegacin en ambas pginas. En estos casos, cuando se
tiene una pgina que tiene que ser navegable desde otras pginas, lo
ms indicado es establecer una regla de navegacin global. Para
establecer una regla de navegacin global a la pgina
budcadorContactos.jspx seguiremos los siguientes pasos. 1. 2.
Pulsamos en la pestaa OverView. Seleccionamos Navigation Rules y
pulsamos New en el recuadro de Navigation Rules. 3. En la ventana
emergente, en el campo From View ID introducimos * y pulsamos
Aceptar.
74
44.
Usando ADF Faces Tree
En el recuadro de Navigation Cases pulsamos New. En la ventana
emergente, seleccionamos buscadorContactos.jspx en el campo To View
ID, establecemos el valor del campo From Outcome a buscadorGlobal y
pulsamos Aceptar.
Finalizado el punto cuatro tendremos definida una regla de
navegacin global sobre la pgina del buscador til para todas las
pginas de la agenda.
4.3.
PGINA DE EDICIN DE CONTACTOS
Vamos a desarrollar el formulario de la pgina para la edicin de
los contactos de la agenda. En primer lugar, tendremos que dar de
alta la pgina y aplicar la plantilla que definimos en el tema 3.
Para dar de alta la pgina en el proyecto seguiremos los siguientes
pasos: 1. En el fichero del controlador faces-config.xml, pulsamos
sobre la pestaa de Diagram para volver a ver el diagrama. 2.
Hacemos doble clic con el ratn sobre la pgina de
edicinContactos.jspx para iniciar el wizard de creacin de las
paginas JSF. 3. En el paso 1 verificamos que la opcin marcada es
JSP Document (*.jspx).
75
44. Bean. 5. pulsamos Terminar.
Usando ADF Faces Tree
En el paso 4 publicamos automticamente los componentes UI en un
Managed Bean marcando sobre Automatically Expose UI Components in a
New Magnaged
En el siguiente paso, si no estn incluidas las libreras de ADF
Faces las aadimos y
Finalizado este punto, tenemos creada la pgina en el proyecto.
Podemos observar que ahora el diagrama del controlador no muestra
un smbolo de advertencia en la pgina de edicin, al contrario que en
la pgina de nuevo contacto. Esto indica que el componente JSP Page
que representa la pgina en el diagrama no tiene asociado ninguna
pgina en el proyecto.
Lo siguiente ser aplicar la plantilla: 1. Abrimos la pgina de la
plantilla y en la paleta de estructura copiamos la etiqueta
afh:html. 2. Abrimos la pgina edicionContacto.jspx si no est
abierta y, en la paleta de estructura eliminamos la etiqueta
afh:html y pegamos sobre la etiqueta view. 3. Desplegamos la
etiqueta afh:html hasta llegar a la etiqueta del componente
af:panelPage donde estableceremos el valor de la propiedad Title a
Edicin Contactos.
76
44.3.1. Nueva consulta para la entidad de contacto
Usando ADF Faces Tree
Ya tenemos lista la pgina de edicin para empezar a aadir los
componentes UI necesarios.
Para implementar el formulario de edicin necesitaremos crear una
nueva consulta en la entidad Contacto para poder localizar un
contacto en la agenda por su identificador. Para aadir el nuevo
mtodo de consulta por el identificador de contacto, seguiremos los
siguientes puntos: 1. 2. En el proyecto Model, abrimos la clase
agenda.model.Contacto. Aadimos la nueva query dentro del bloque de
cdigo donde se declaran todas las consultas. El cdigo de la nueva
consulta es:
@NamedQuery(name = "findContactoByIdContacto", query = "select
object(o) from Contacto o where o.idcontacto = :idcontacto")
3. 4.
Compilamos la clase para verificar que no contiene errores.
Seleccionamos la clase del EJB, pulsamos botn derecho, Edit Session
Facade y en la ventana emergente marcamos el mtodo
findContactoByIdContacto perteneciente a la clase Contacto y
pulsamos Aceptar.
5.
Pulsamos de nuevo botn derecho sobre la clase del EJB y
seleccionamos Create Data Control.
77
4Una vez generado el Data Control tenemos disponible
findContactoByIdContacto para poder utilizarlo en las pginas JSF.
4.3.2. Construccin del formulario
Usando ADF Faces Treeel mtodo
En este punto vamos a realizar la construccin del formulario que
nos permitir modificar la informacin de un contacto. Para crear el
formulario realizaremos los siguientes pasos: 1. 2. Accedemos a la
paleta de Data Control. Seleccionamos la lista de tipo Contacto que
nos devuelve el mtodo
findContactoByIdContacto(Object) y lo arrastramos hasta la
paleta de estructura sobre la etiqueta af:panelPage. 3. En el men
de la ventana emergente seleccionamos Forms, ADF Forms.
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.
5.
En la siguiente ventana debemos introducir la fuente del
parmetro con el que la consulta nos devolver el contacto que
queremos editar. Hacemos doble clic sobre el campo Valor y pulsamos
el botn que tiene tres puntos. Seleccionamos ADF Bindings, data,
buscadorContactosPageDef, findContactoByParametersIter, currentRow,
dataProvider y hacemos doble clic. El rea Expression, aadiremos
despus de dataProvider .idcontacto. La expresin debe quedar de tal
y como esta:
${data.buscadorContactosPageDef.findContactoByParametersIter.currentRow.dataProvide
r.idcontacto}
78
4
Usando ADF Faces Tree
6.
Abrimos el fichero UIResource.properties y aadimos:
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=Telfono
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 aadido
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']}
Debemos repetir el proceso para el resto de af:inputText.
79
48. estructura. 9. One Choice.
Usando ADF Faces Tree
En la paleta de Data Control seleccionamos la lista de objetos
de tipo Contacto que devuelve el mtodo
findContactoByIdContacto(Object) y la desplegamos. Marcamos
idtipocontacto y lo arrastramos sobre la etiqueta af:panelForm en
la paleta de
En el men de la ventana emergente seleccionamos Sigle
Selections, ADF Select
10. En la siguiente ventana emergente, pulsamos Add para aadir
un valor a la propiedad List Data Source y seleccionamos la lista
de tipo TipoContacto que devuelve el mtodo
findAllTipocontacto();
80
4y pulsamos Aceptar.
Usando ADF Faces Tree
11. Pulsamos Aceptar y verificamos el que atributo
idtipocontacto de la entidad que vamos a actualizar est relacionado
con el atributo idtipocontacto del valor de List Data Source. En el
valor del campo Display Attribute seleccionamos tipocontacto
12. Hacemos doble clic sobre la etiqueta af:selectOneChoice del
componente de seleccin que acabamos de aadir y cambiamos el valor
de la propiedad Label de la pestaa de propiedades comunes por:
#{res['edicionContacto.formulario.tipoContacto']}
Hasta aqu hemos concluido el pintado del formulario. En el
siguiente apartado aadiremos los botones necesarios para poder
grabar los cambios y volver a la pgina del buscador de
contactos.
81
44.3.3. Botn de Grabar para actualizar los datos del contacto
formulario. Los pasos a seguir, sern los siguientes: 1. Accedemos a
la paleta de Data Control,
Usando ADF Faces Tree
En este apartado vamos a incluir el botn para grabar los cambios
realizados en el
seleccionamos
el
mtodo
mergeEntity(Object) y lo arrastramos sobre la etiqueta
af:panelForm en la paleta de Estructura. Este mtodo es un mtodo
general para actualizar los cambios en una entidad. 2. En el men de
la ventana emergente seleccionamos Methods, ADF Command Button.
3.
Una vez hemos seleccionado el componente de botn se abre un
nueva ventana emergente donde se establece el valor del parmetro
del mtodo mergeEntity(Object). Hacemos doble clic sobre el campo
Value y pulsamos el botn con los tres puntos.
4.
En la ventana emergente desplegamos el contenido de ADF Bindings
, bindings, findContactoByIdContactoIter, currentRow y hacemos
doble clic sobre dataProvider. Con esto hemos indicado que la
entidad a guardar los cambios es la fila actual del iterador del
mtodo de consulta findContactoByIdContacto.
82
45. 6. cambiamos el valor de la propiedad Text por :
#{res['edicionContacto.formulario.botonGrabar']}
Usando ADF Faces Tree
Pulsamos Aceptar, y de nuevo Aceptar en la ventana de Action
Binding Editor. Hacemos doble clic sobre la etiqueta
af:commandButton que acabamos de crear y
Finalizado el punto seis tenemos completado la definicin del
botn para grabar los cambios de los contactos. 4.3.4. Botn de
Volver Vamos a incluir un botn para volver a la pgina del buscador
de contactos. Para ello, seguiremos los pasos que a continuacin se
describen. 1. Accedemos a la paleta de componentes, seleccionamos
commandButton de la librera de etiquetas ADF Faces Core y lo
arrastramos sobre la etiqueta af:panelForm en la paleta de
estructura. 2. En la paleta de propiedades, cambiamos el valor de
la propiedad Text por:
#{res['edicionContacto.formulario.botonVolver']}
3.
Establecemos el valor de la propiedad Action a
buscadorGlobal.
4.3.5. Botn Editar en la pgina de bsqueda de contactos En este
apartado vamos a incluir el botn de editar en la tabla de
resultados de la bsqueda de contactos y vamos a definir una
condicin de refresco sobre esta tabla. Para introducir el botn de
editar en la tabla de resultados de la bsqueda haremos lo
siguiente: 1. 2. Abrimos la pgina buscadorContactos.jspx si no est
abierta. En la paleta de estructura, buscamos la etiqueta
af:tableSelectionOne del componente con identificador
tableResultados.
83
43. af:tableSelectionOne, CommandButton. 4.
#{res['buscadorContactos.tablaContactos.botonEditar']}
Usando ADF Faces Tree
Una vez localizado, lo seleccionamos, pulsamos botn derecho,
Insert inside
En la paleta de propiedades, cambiamos la propiedad Text del
nuevo botn por:
5.
Establecemos el valor de la propiedad Action a editar.
Lo siguiente que haremos ser establecer la condicin de refresco:
1. Sobre la vista de diseo de la pgina del buscador pulsamos botn
derecho del ratn y seleccionamos Go to Page Definition. 2. En la
paleta de estructura seleccionamos con el ratn executables,
pulsamos botn derecho y elegimos Insert inside executables,
invokeAction.
3.
En la ventana emergente asignamos el campo Id el valor
refreshResults y en el campo Binds seleccionamos
finContactoByParameters.
4.
Pulsamos la pestaa de opciones avanzadas y en el campo
RefreshCondition pegamos el siguiente cdigo:
${!adfFacesContext.postback}
Con esta condicin estamos indicando que se ejecute la operacin
de refresco sobre la consulta que genera los resultados cada vez
que volvemos de otra pgina.
84
44.3.6. Ejecucin de la pgina para la edicin de contactos
Seleccionamos el proyecto ViewController, botn derecho del ratn,
Run.
Usando ADF Faces Tree
Vamos a ejecutar el proyecto para ver que todo funciona como
cabe de esperar.
En la ventana del buscador, pulsamos el botn Editar y accedemos
a la pgina para la edicin de contactos que debe parecerse a la que
muestra la imagen siguiente:
Podemos realizar un cambio en cualquiera de los campos, pulsamos
Grabar y al volver a la pgina del buscador pulsando el botn Volver
veremos la modificacin aplicada.
85
44.4. PGINA DE ALTA DE CONTACTOS contactos de la agenda. 4.4.1.
Creamos la pgina nuevoContacto.jspx Para crear la pgina de alta de
contactos seguiremos los siguientes pasos: 1.
Usando ADF Faces Tree
En este apartado vamos a detallar los pasos a seguir para
construir la pgina de alta de los
Abrimos el fichero del controlador faces-config.xml, pulsamos
sobre la pestaa de Diagram para volver a ver el diagrama.
2.
Hacemos doble clic con el ratn sobre la pgina de
nuevoContactos.jspx para iniciar el wizard de creacin de las
paginas JSF.
3.
En el paso 1 del wizard verificamos que la opcin marcada es JSP
Document (*.jspx).
4.
En el paso 4 del wizard publicamos automticamente los
componentes UI en un Managed Bean marcando sobre Automatically
Expose UI Components in a New Magnaged Bean.
5.
En el siguiente paso, si no estn incluidas las libreras de ADF
Faces las aadimos y pulsamos Terminar.
4.4.2. Aplicamos la plantilla a la pgina de nuevo contacto Como
hemos hecho para las anteriores pginas, aplicamos la plantilla: 1.
Abrimos la pgina de la plantilla y en la paleta de estructura
copiamos la etiqueta afh:html. 2. Abrimos la pgina
nuevoContacto.jspx si no est abierta y en la paleta de estructura
eliminamos la etiqueta afh:html y pegamos sobre la etiqueta view.
3. Desplegamos la etiqueta afh:html hasta llegar a la etiqueta del
componente af:panelPage donde estableceremos el valor de la
propiedad Title a Nuevo Contacto.
86
44.4.3. Construccin del formulario nuevos contactos. Seguiremos
los puntos que a continuacin se describen: 1. 2. Accedemos a la
paleta de Data Control. Seleccionamos af:panelPage. 3. la lista de
tipo Contacto que nos
Usando ADF Faces Tree
En este punto vamos a realizar la construccin del formulario que
nos permitir dar de alta
devuelve
el
mtodo
findAllContacto() y lo arrastramos hasta la paleta de estructura
sobre la etiqueta
En el men de la ventana emergente seleccionamos Forms, ADF
Creation Forms.
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
41. Abrimos el fichero UIResources.properties y aadimos:
nuevoContacto.formulario.nombre=Nombre
nuevoContacto.formulario.apellido1=Primer Apellido
nuevoContacto.formulario.apellido2=Segundo Apellido
nuevoContacto.formulario.telefono=Telfono
nuevoContacto.formulario.tipoContacto=Tipo de Contacto
nuevoContacto.formulario.botonGrabar=Grabar
nuevoContacto.formulario.botonCancelar=Cancelar
Usando ADF Faces Tree
2.
Aplicamos las propiedades que hemos aadido 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']}
Debemos repetir el proceso para el resto de af:inputText. 3. En
la paleta de Data Control seleccionamos la lista de objetos de tipo
Contacto que devuelve el mtodo findAllContacto() y la desplegamos.
Marcamos idtipocontacto y lo arrastramos sobre la etiqueta
af:panelForm en la paleta de estructura. 4. En el men de la ventana
emergente seleccionamos Sigle Selections, ADF Select One
Choice.
5.
En la siguiente ventana emergente, pulsamos Add para aadir un
valor a la propiedad List Data Source y seleccionamos la lista de
tipo TipoContacto que devuelve el mtodo findAllTipocontacto();
88
4
Usando ADF Faces Tree
6.
Pulsamos Aceptar y verificamos el que atributo idtipocontacto de
la entidad que vamos a actualizar est relacionado con el atributo
idtipocontacto del valor de List Data Source. En el valor del campo
Display Attribute seleccionamos tipocontacto y pulsamos
Aceptar.
89
47. propiedades comunes por:
#{res['nuevoContacto.formulario.tipoContacto']}
Usando ADF Faces Tree
Hacemos doble clic sobre la etiqueta af:selectOneChoice del
componente de seleccin que acabamos de aadir y cambiamos el valor
de la propiedad Label de la pestaa de
4.4.4. Botn Grabar En este apartado vamos a incluir el botn para
grabar los cambios realizados en el formulario. Los pasos a seguir,
sern los siguientes: 1. Accedemos a la paleta de Data Control,
seleccionamos el mtodo
persistEntity(Object) y lo arrastramos sobre la etiqueta
af:panelForm en la paleta de Estructura. Este mtodo es general para
crear una entidad. 2. En el men de la ventana emergente
seleccionamos Methods, ADF Command Button.
3.
Una vez hemos seleccionado el componente de botn, se abre un
nueva ventana emergente donde se establece el valor del parmetro
del mtodo persistEntity(Object). Hacemos doble clic sobre el campo
Value y pulsamos el botn con los tres puntos.
4.
En la ventana emergente desplegamos el contenido de ADF Bindings
, bindings, findAllContactoIter, currentRow y hacemos doble clic
sobre dataProvider. Con esto hemos indicado que la entidad a
guardar los cambios es la fila actual del iterador del mtodo de
consulta findAllContacto.
90
4
Usando ADF Faces Tree
5. 6.
Pulsamos Aceptar, y de nuevo Aceptar en la ventana de Action
Binding Editor. Hacemos doble clic sobre la etiqueta
af:commandButton que acabamos de crear y cambiamos el valor de la
propiedad Text por :
#{res['nuevoContacto.formulario.botonGrabar']}
7.
Le asignamos a la propiedad Action el valor buscadorGlobal.
4.4.5. Botn Cancelar Para finalizar, slo nos queda aadir un botn
para cancelar la operacin de alta de un nuevo contacto. 1. Desde la
paleta de componentes arrastramos commanButton sobre la etiqueta
af:panelForm en la paleta de estructura. 2. En la paleta de
estructura hacemos doble clic sobre la etiqueta af:commandButton
del nuevo botn que hemos aadido y establecemos el valor de la
propiedad Text a:
#{res['nuevoContacto.formulario.botonCancelar']}
91
43. buscadorGlobal. 4.4.6. Enlace en la pgina del buscador
siguiente: 1. 2. Abrimos la pgina buscadorContactos.jspx si no est
abierta.
Usando ADF Faces Tree
En la paleta de propiedades establecemos el valor de la
propiedad Action a
Para introducir el botn de nuevo en la tabla de resultados de la
bsqueda haremos lo
En la paleta de estructura, buscamos la etiqueta
af:tableSelectionOne del componente con identificador
tableResultados.
3.
Una vez localizado, lo seleccionamos, pulsamos botn derecho,
Insert inside af:tableSelectionOne, CommandButton.
4.
En la paleta de propiedades cambiamos la propiedad Text del
nuevo botn por:
#{res['buscadorContactos.tablaContactos.botonNuevo']}
5.
Establecemos el valor de la propiedad Action a nuevo.
4.4.7. Ejecucin de la pgina par
