Laboratorio usando Oracle Adf Rich Faces , Oracle toplink JPA , Oracle Xe , Oracle Data Controls

1. APLICACION JEE 5.0
ADF RICH FACES –TOPLINK JPA – DATA CONTROLS – ORACLE XE
Instructor : LEONARDO TORRES ALTEZ
Aplicación : Consulta de dos tablas : cabecera y detalle
Frameworks : JSF - ADF Rich Faces
APIS : JPA , Oracle Data Control, EJB
Tecnologias : AJAX
Requisitos : JDeveloper 11 , Internet Explorer 7.x ó Firefox 2.x , Oracle XE
1 Inicial el JDeveloper 11.
Clic en Nueva Aplicación …
2 Definir las propiedades de la
aplicación !

2. CREACION DE LA CAPA DE PERSISTENCIA ( BEANS MODELO JPA )
3 Una vez definida la aplicación nos
pedirá definir el proyecto ( sub
aplicación )
Un proyecto esta asociado a una
aplicación en Jdeveloper
4 En la vista de bases de datos clic
derecho en IDE Connection, escoger
New Connection
5 Nos conectaremos a la base de datos
Oracle Express que esta instalada en
su PC , definir las propiedades !
Hostname : 10.21.12.96
Username : hr
Password : 123
SID : XE
Para probar clic en Test Connection

3. 6 Si la conexión fue exitosa nos
conectaremos al esquema HR
7 Clic derecho sobre el proyecto
“model”
8 De la categoría TopLink JPA ,
escoger Entities from Tables

4. 9 Siguiente …
1 Dejar vacío persistente Unit.
0
Siguiente ..
1 Siguiente …
1

5. 1 Clic en la lupa
2
1 Escoger la conexión antes definida.
3 Clic en Copy Connection
1 Siguiente …
4

6. 1 Clic en Query y escoger las tablas
5 Employees y Departaments
Estas serán las tablas que usaremos
en la consulta Web
Se crearan los bean JPA a partir de
las tablas
1 Siguiente ..
6

7. 1 Siguiente …
7
1 Terminar …
8
1 Visualice el código generado
9
Crea una clase para cada tabla!

8. 2 Añadir el siguiente query a la clase
0 Employees :
@Entity
@NamedQueries({
@NamedQuery(name = quot;Employees.findAllquot;,
query = quot;select o from Employees oquot;)
,
@NamedQuery(name = quot;Employees.findByNamequot;,
query = quot;select o from Employees o where
o.firstName like :p_namequot;)
})
Alt + Enter para auto añadir los
imports
Las anotaciones son una forma
alternativa de crear “queries” JPQL
2 Clic derecho sobre persistente.xml y
1 escoger New Service Facade …
Esto creara un clase con los
métodos CRUD ( create , read ,
update, delete)
2 Clic en New Unit
2
Esto creara un nuevo Persistence
Unit JPA

9. 2 Siguiente …
3
2 Siguiente …
4

10. 2 Siguiente ..
5
2 Finish ..
6

11. 2 Agregar estas líneas debajo de TODO
7 , para buscar el primer empleado el
cual tenga el nombre empezando con
la letra “P”
Luego imprimiremos su apellido:
Employees a =
javaServiceFacade.queryEmployeesFindByName(quot;
P%quot;).get(0);
System.out.println(a.getLastName());
Este metodo main es solo de
prueba , con esto ejecutamos una
consulta para ver que JPA funciona
bien
2 Clic derecho sobre el código , y
8 escoger RUN
CREACION DE LA CAPA WEB ( JSF – LIBRERÍA ORACLE ADF RICH FACES )

12. 2 Crear otro proyecto ( Sub Aplicación )
9
3 Escoger propiedades !
0

13. 3 Modificar propiedades
1 Clic derecho / propiedades
3 Marcar modelo.jpr
2
Con esto marcamos la
dependencia de la capa web con la
capa de persistencia

14. 3 Escoger la categoría JSP Tag
3 Libraries ,escoger Add
3 Escoger la libreria !
4
Estas son las librerias de tags de
ADF Rich Faces

15. 3 Quedará de esta forma !
5
3 En la categoría Technology Scope ,
6 escoger ADF Faces
3 Quedará de esta forma
7
Con esto Jdeveloper nos agregara
librerias ( jars ) necesarios para
ejecutar JSF

16. 3 Escoger el archivo faces-config.xml ,
8
Con la paleta a la derecha ( JSF
Diagram Objects ) hacer elsiguiente
diagrama de flujo !
3 Clic derecho en crear pagina
9

17. 4 Escoger las propiedades
0
4 Arrastrar un componente “Panel
1 Strech Layout” a la pagina
browse.jspx

18. 4 Agregar un componente “Panel
2 Splitter” al centro
Clic derecho en JavaServiceFacade ,
escoger Create Data Control
Un “data control” es una
tecnologia que solo existe en
Oracle ADF , sirve para unir la capa
de persistencia con la capa web
4 Arrastrar “Departamets” de los data
3 controls

19. 4 Escoger Forms / ADF Read-only
4 Form
4 Marcar “Incluir Controles de
5 Navegación”
Escoger Aceptar
4 Quedará de esta forma !
6

20. 4 Escoger “employeeList” de los Data
7 Controls , arrastrarlos a la pagina
4 Escoger Tables / ADF Read-only
8 Table
4 Marcar “Sorting”
9
Escoger Aceptar
5 Cambiar la propiedad del “panel
0 Slipter” a vertical

21. 5 Arrastrar el área punteada hacia
1 abajo para dar mas espacio a los
controles
5 Ir a la pagina faces-config.xml , clic
2 derecho sobre browse.jspx y escoger
Run

22. 5 Resultado !
3