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 !

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

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

9 Siguiente �

10

Dejar vacío persistente Unit. Siguiente ..

11

Siguiente �

12

Clic en la lupa

13

Escoger la conexión antes definida. Clic en Copy Connection

14

Siguiente �

15

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

16

Siguiente ..

17

Siguiente �

18

Terminar �

19

Visualice el código generado Crea una clase para cada tabla!

20

Añadir el siguiente query a la clase Employees : @Entity @NamedQueries({ @NamedQuery(name = "Employees.findAll", query = "select o from Employees o") , @NamedQuery(name = "Employees.findByName", query = "select o from Employees o where o.firstName like :p_name") }) Alt + Enter para auto añadir los imports Las anotaciones son una forma alternativa de crear �queries� JPQL

21

Clic derecho sobre persistente.xml y escoger New Service Facade � Esto creara un clase con los métodos CRUD ( create , read , update, delete)

22

Clic en New Unit Esto creara un nuevo Persistence Unit JPA

23

Siguiente �

24

Siguiente �

25

Siguiente ..

26

Finish ..

27

Agregar estas líneas debajo de TODO , para buscar el primer empleado el cual tenga el nombre empezando con la letra �P� Luego imprimiremos su apellido: Employees a = javaServiceFacade.queryEmployeesFindByName("P%").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

28

Clic derecho sobre el código , y escoger RUN

CREACION DE LA CAPA WEB ( JSF � LIBRERÍA ORACLE ADF RICH FACES )

29

Crear otro proyecto ( Sub Aplicación )

30

Escoger propiedades !

31

Modificar propiedades Clic derecho / propiedades

32

Marcar modelo.jpr Con esto marcamos la dependencia de la capa web con la capa de persistencia

33

Escoger la categoría JSP Tag Libraries ,escoger Add

34

Escoger la libreria ! Estas son las librerias de tags de ADF Rich Faces

35

Quedará de esta forma !

36

En la categoría Technology Scope , escoger ADF Faces

37

Quedará de esta forma Con esto Jdeveloper nos agregara librerias ( jars ) necesarios para ejecutar JSF

38

Escoger el archivo faces-config.xml , Con la paleta a la derecha ( JSF Diagram Objects ) hacer elsiguiente diagrama de flujo !

39

Clic derecho en crear pagina

40

Escoger las propiedades

41

Arrastrar un componente �Panel Strech Layout� a la pagina browse.jspx

42

Agregar un componente �Panel 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

43

Arrastrar �Departamets� de los data controls

44

Escoger Forms / ADF Read-only Form

45

Marcar �Incluir Controles de Navegación� Escoger Aceptar

46

Quedará de esta forma !

47

Escoger �employeeList� de los Data Controls , arrastrarlos a la pagina

48

Escoger Tables / ADF Read-only Table

49

Marcar �Sorting� Escoger Aceptar

50

Cambiar la propiedad del �panel Slipter� a vertical

51

Arrastrar el área punteada hacia abajo para dar mas espacio a los controles

52

Ir a la pagina faces-config.xml , clic derecho sobre browse.jspx y escoger Run

53

Resultado !