Desarrollando Una Rica Inte

Desarrollando una Rica Interfaz de Usuario con AJAX y JSF

http://www.jdeveloperla.com/old.joomla/index.php?view=article&catid...

Desarrollando una Rica Interfaz de Usuario con AJAX y JSF Escrito por Plinio Jueves, 07 de Agosto de 2008 09:51

Tabla de Contenidos

1. Pre-requisitos 2. Creando una Aplicacin ADF con Jdeveloper 3. Agregando la Capa de Modelo 4. Creando una pgina plantilla 5. Creando una pgina de Listado de Productos 6. Asociando Datos a la pgina de Listado 7. Enriqueciendo la pgina de Listado con elementos Grficos 8. Asociando a Formulario de Datos 9. Agregando Informacin Estadstica

INTRODUCCIN

1. Propsito

El siguiente manual tiene como propsito mostrar el esquema de desarrollo de aplicaciones Fusion, las cuales incluyen las tecnologas ADF , ADF Faces Rich Client y ADF Business Components

2. Alcance

Como parte de los requerimientos del rea de Inventario de su compaa, le solicitan crear una pantalla que permita dar mantenimiento al catalogo de productos que tienen la empresa. Adems se le solicita que el mantenimiento cuente con un grfico de barras que permita visualizar grficamente el stock de todos los productos que tiene la compaa.

3. Pautas para el desarrollo de la Gua

1 of 40

10/10/2010 8:50 AM



A medida que se desarrolla la siguiente Gua, debe tener en cuenta los archivos que se adjuntan en los formatos *.gif

4. Definiciones, Acrnimos y Abreviaturas Tcnicas

ADF: Application Development Framework

5. Software

Jdeveloper 11g y Base de Datos ORACLE

DESARROLLO DE LA GUA1.Pre-requisitos Crear un schema PEOUG_JDEV con password ORACLE. Ejecutar el siguiente script script.sql

2.Creando una Aplicacin ADF con Jdeveloper Para empezar crearemos una aplicacin empleando jdeveloper 11g, para ello realizaremos los siguientes pasos.

Haga doble clic sobre el icono Jdeveloper 11g. En la paleta Application Navigator, ubicada a la Izquierda, elija la opcin New Application

2 of 40

10/10/2010 8:50 AM



Ahora ingresramos los datos del la aplicacin que vamos a construir. En este caso nuestro proyecto se llamar DemoPeoug esto es un nombre que identificar a su aplicacin, el cual estar ubicada en la carpeta c:\Labs \DemoPeoug Adicionalmente debemos indicar el tipo de plantilla que emplearemos en el proyecto. El tipo de plantilla determina en nuestro proyecto algunas tecnologas base que sern empleadas en la construccin de su aplicacin. Para este laboratorio usaremos el template Fusion Web Application.

Al finalizar el ltimo paso lo que usted ha conseguido es una aplicacin con Jdeveloper. Si nota en la parte izquierda se debe haber creado la aplicacin DemoPeoug, e incluido en ella, 2 proyectos Model y ViewController, las cuales albergarn a las clases de lgica de negocio y las paginas de su aplicacin respectivamente.

3 of 40

10/10/2010 8:50 AM



3.Agregando la Capa de Modelo. Antes de iniciar la creacin de interfaces de usuario en nuestra aplicacin, es necesario que contemos con una capa de modelo que permita la gestin de datos y la lgica de negocio. Por ello, incluiremos en esta capa un componte de lgica de negocio asociada a la tabla Producto. La tecnologa que empleamos en esta capa se llama ADF Business Components, sin embargo usted puede usar otra tecnologa como EJB DAOs para cubrir la misma necesidad. Para construir esta capa realizaremos los siguientes pasos:

Haga clic derecho sobre el proyecto Model y elija la opcin New. Luego de ello aparecer la ventana de New Gallery la cual le permitir aadir componentes en su proyecto. En este caso lo que debemos elegir ser de la categora ADF Business Components la opcin Business Components From Tables de manera similar a los mostrado en la siguiente figura, luego de elegirlo pulse OK

4 of 40

10/10/2010 8:50 AM



La siguiente pantalla de Initialize Business Component Project le permitir configurar la conexin y el esquema de base datos que emplear en el proyecto. En este caso, crearemos una nueva conexin, para ello pulse el botn que se encuentra a la derecha del campo Connection. Luego aparecer una pantalla que nos permitir configurar la conexin a la base de datos, en ella solo cambiemos los siguientes datos : Username : PEOUG_JDEV Password : ORACLE SID : ORCL El resto de campos dejarlo como esta y pulsar el boton OK

Luego usted regresar a la pantalla de Initialize Business Component Project y a continuacin usted deber pulsar el botn OK. Luego se mostrar otra pantalla en la que debemos elegir la tabla que requerimos emplear para crear nuestro componente de negocio. En este paso pulse la casilla Auto-Query y luego seleccione la tabla producto desplazndola con las fechas de seleccin haca la derecha de manera similar a lo mostrado en la siguiente figura. Luego pulse el boton de

5 of 40

10/10/2010 8:50 AM



En la siguiente pantalla continu la creacin del componente de negocio desplazandolo haca la derecha, empleando las flechas de desplazamiento y pulsando el botn Next, ver la siguiente figura :

A partir de la siguiente pantalla, pulse Next en todas las pantallas hasta llegar a la pantalla de Summary en la que deber pulsar el botn de Finish tal como muestra la figura. De esta manera habr culminado la creacin del componente de negocio.

6 of 40

10/10/2010 8:50 AM



4.Creando una pgina plantilla Ahora lo que vamos a desarrollar ser una pgina plantilla. Una pgina plantilla nos permitir definir una pgina base que brindar un diseo inicial a todas las pginas de su aplicacin. De esta manera cualquier cambio en esta pgina base automticamente se replicar en todas las pginas de su proyecto que empleen dicha plantilla. Para realizar esta pgina desarrollemos lo siguiente:

Usando la paleta: Application Navigator ubicado en la parte superior izquierda de la herramienta, haga clic derecho sobre el proyecto ViewController y elija la opcin New.

Luego de ello aparecer la ventana de New Gallery la cual le permitir aadir componentes en su proyecto. En este caso lo que debemos elegir ser de la categora JSF el componente JSF Page Template de manera similar a lo mostrado en la siguiente figura. Luego de elegir ambas opciones pulse el botn OK.

7 of 40

10/10/2010 8:50 AM



A continuacin se mostrar otra ventana en donde debemos asignar un nombre al template que estamos creando. Definmoslo a dicha pgina como templatePeoug.jspx de manera similar a lo mostrado en la siguiente figura y pulsemos Ok.

8 of 40

10/10/2010 8:50 AM



Lo que viene a continuacin es disear la plantilla creada para definir los colores, regiones e imgenes que tendr nuestra pgina base. Para ello, primero vamos a incluir en nuestra plantilla un encabezado que mostrar el logo de la compaa, para ello arrastremos de la Paleta de componentes el Layout Panel Group Layout hacia nuestra plantilla. La paleta de componentes lo ubicar en la parte derecha del jdeveloper.

Una vez que ha arrastrado modifique las propiedades de este Panel Group Layout, para ello dirjase a la paleta de propiedades que se encuentra en la parte inferior de la herramienta y cambie las siguientes propiedades.

Del grupo Common asignar a la propiedad Layout el valor de Scroll

Del grupo Style, asignar a la propiedad StyleClass el valor AFVisualRoot AFDarkTone

9 of 40

10/10/2010 8:50 AM



Vamos a utilizar un logo pequeo para que forme parte de nuestra plantilla, por ello descomprima el siguiente archivo archivos.zip y copie su contenido en la siguiente ruta C:\Labs\DemoPeoug\ViewController\public_html\images\ Luego agreguemos esa imagen en nuestra plantilla, para ello empleemos la paleta de componente y arrastremos el componente Image hacia la plantilla.

Al arrastrar el componente Image se mostrar una ventana, en donde se deber indicar la ubicacin de la imagen a incluir, pulse la opcin Edit del campo Source tal como se muestra la figura y ubique el archivo brandingImage.gif que se encuentra en la carpeta c:\Labs\images\DemoPeoug\ViewController\public_html\images\BrandImage.gif copiada previamente. Pulse Finish para culminar este paso

10 of 40

10/10/2010 8:50 AM



Como ltimo paso incluyamos el componente Facet Ref en nuestra plantilla. Este componente se encuentra en la categora de Common Component de la paleta de componentes.

Al arrastrar el componente Facet Ref, se mostrar una ventana en donde debemos indicar el nombre de dicho componente, indicar en dicho campo el nombre de center, y pulsar el boton Ok.

11 of 40

10/10/2010 8:50 AM



5.Creando una pgina de Listado de Productos. Lo que vamos a realizar ahora es una pgina que nos liste la informacin de los productos que tiene registrado el sistema. Los pasos necesarios sern los siguientes :

Para empezar la construccin de las paginas, debemos entender que ellas deben estar incluidas en un diagrama que defina el flujo que existan entre las paginas que vamos a construir. Para ello, haga doble clic sobre el archivo facesconfig.xml, el cual se encuentra en la ubicacin ViewController - > Web Content -> WEB-INF tal como se muestra en la siguiente figura.

Al hacer doble clic sobre el faces-config.xml se aperturar un diagrama en parte derecha de la herramienta, en la cual se crearn las referencias a las pginas y la relacin que existen entre ellas. Lo que tenemos que hacer es crear las referencias que existirn entre las pginas que vamos a crear. Por ello, arrastre de la paleta de componentes el elemento JSF Page de manera similar a lo mostrado a continuacin :

12 of 40

10/10/2010 8:50 AM



Luego de arrastrarlo se crear una referencia a pgina, renombrela como listaCliente.jsp de manera similar a lo mostrado en la siguiente figura :

Repita el mismo procedimiento para crear otra referencia a la pgina formularioProducto.jsp Luego relacione ambas paginas por medio de un JSF Navigation Case, el cual tambin se encuentra en la paleta de componentes . Arrastre dicho elemento y haga clic primer en la pgina listaProducto y luego haga otro clic en la pagina de formularioProducto. Al finaliza este procedimiento ustede debera tener una imagen como la siguiente :

Renombre el nombre flujo sucess por el nombre editar. Al finaliza usted debe tener el siguiente panorama :

Repita el mismo procedimiento para crear otro flujo en sentido contrario denominado regresar. Al final deber tener una imagen como la siguiente :

Ahora, construyamos la primera pgina listaProducto, para ello hagamos doble clic sobre la referencia /listaProducto.jsp luego de lo cual aparecer una pantalla como la mostrada a continuacin. Asegures que se

13 of 40

10/10/2010 8:50 AM



consider en el campo de Use Page Template a la plantilla templatePeoug que creamos previamente y luego pulse Ok.

A continuacin se debe mostrar la pgina a desarrollar con los colores y caractersticas heredades de la plantilla base. Ahora debemos crear las regiones necesarias en la nueva pgina. Para ello incluyamos un elemento Panel Splitter al elemento center de nuestra pgina de manera similar a lo mostrado en la siguiente figura.

En la parte inferior se debe mostrar las propiedades del elemento ingresado. En la categora Style modifique la propiedad StyleClass por AFVisualRoot tal como se aprecia en la siguiente figura :

14 of 40

10/10/2010 8:50 AM



Ahora arrastre el componente Panel Tabbed en la regin Second que se definir en el paso previo.

Haga Clic sobre el item showDetailItem1 que se acaba de crear y dirjase al panel de propiedades de dicho elemento que se encuentra en la parte inferior. En el modifique, de la categora Common, propiedad Text por Clientes tal como se muestra en la siguiente figura :

Seleccione nuevamente la pestaa creada y agregue un nuevo tab, para ello haga clic derecho sobre el item Clientes y elija la opcin : Insert alter Show Detail item Clientes -> Show Detail Item (Tal como se muestra a continuacin)

15 of 40

10/10/2010 8:50 AM



Asigne a la propiedad Text del nuevo item el valor de Estadsticas.Defnalo en la paleta de propiedades que se encuentra en la parte inferior de la herramienta.

Al finalizar usted debe tener las siguientes pestaas, las cuales puede estirarlas para que cubran toda la pgina.

Ahora arrastre el componente Panel Accordion en la regin definida como first.

16 of 40

10/10/2010 8:50 AM



Haga clic sobre el elemento ShowDetailItem1 creado, y luego modifique la propiedad Text con el valor Detalles, tal como se muestra en la siguiente figura

Luego, incluya en la pestaa Productos el componente Panel Colection que se encuentra en la paleta de Layout, de manera similar a lo mostrado en la siguiente figura

17 of 40

10/10/2010 8:50 AM



La pantalla construida debera lucir de la siguiente manera.

Finalmente incluiremos un componente Men, en la pgina que se ha creado, para ello haga clic derecho sobre la regin menus del tab de clientes y elija la opcion Insert Inside Facet menus -> Menu (Ver Imagen Adjunta)

Ahora vamos a agregar una nueva opcin al Menu creado, por ello seleccione el menu1 (creado en el paso anterior) y elija la opcin Insert incide Menu men 1 -> Menu Item, tal como muestra la figura.

18 of 40

10/10/2010 8:50 AM



Luego de creada la opcin de men, ubquese en la parte inferior para modificar las propiedades de dicha opcin, a la propiedad Text asigne el valor Editar y en el campo Action seleccin la opcin editar (Tal como muestra la siguiente imagen)

6.Asociando Datos a la pgina de Listado El siguiente paso en la creacin de la pgina de listado ser incluir los datos obtenidos por medio del componente Producto creado en la capa de modelo. Para realizar esta fase realicemos las siguientes actividades: Arrastre de la consola de DataControl el componente de negocio Producto1View1 hacia el tab de Productos (Justo donde la flecha indica). Cuando lo suelte le aparecer un men contextual, de el elija la opcin Tables -> ADF Read Only Table, tal como muestra la figura.

19 of 40

10/10/2010 8:50 AM



En la ventana siguiente activar las casillas Row Selection (Para permitir seleccionar una fila de la tabla)y Sorting (Para permitir el ordenamiento de cada columna de la tabla) . Luego pulse el botn Ok.

A continuacin modifique de la categora Behavior la propiedad Column Section por el valor de Mutiple. (Ver imagen siguiente)

20 of 40

10/10/2010 8:50 AM



Finalmente, probemos como va quedando nuestra pgina. Para ello seleccione cualquier lado de la pgina, haga clic derecho y seleccin la opcin Run

El resultado debe ser similar al mostrado:

21 of 40

10/10/2010 8:50 AM



7.Enriqueciendo la pgina de Listado con elementos Grficos Vamos ahora a enriquecer la consulta agregando elementos grficos. El objetivo ser mostrar la imagen de cada uno de los productos, para ello utilizaremos una de las columnas de la tabla que indica la ruta donde se encuentra almacenada cada una de las imgenes.

Realicemos los siguientes pasos.

Ubquese en la paleta de Structure, ubicado en la parte inferior izquierda y elija la etiqueta row.Imagen que me permite mostrar la informacin del campo image. Observe la siguiente imagen para que pueda ubicar dicha etiqueta :

Haga clic derecho sobre dicho elemento y elija la opcin Convert

22 of 40

10/10/2010 8:50 AM



En la siguiente ventana, elija la opcin Image y pulse Ok

Pulse Ok a la siguiente pantalla.

23 of 40

10/10/2010 8:50 AM



Para culminar modifique la propiedad source del componente imagen que a creado asignndole el valor : #{row.Imagen}

Finalizado este procedimiento, ejecute nuevamente la pgina empleando Run para ver el resultado de la pgina

24 of 40

10/10/2010 8:50 AM



Pruebe las caractersticas de Drag and Drop que tiene los elementos de la tabla, por ejemplo, seleccione la columna Imagen y arrstrela haca la segunda posicin.

25 of 40

10/10/2010 8:50 AM



8.Asociando a Formulario de Datos Luego de tener el listado de datos listo, vamos a completar dicho listado con un formulario que nos permita dar mantenimiento a los productos. Para realizar dicha actividad realicemos los siguientes pasos:

Regrese la modo de diseo en jdeveloper, y aperture el archivo faces-config

En dicho diagrama usted debe tener las referencias a las pginas listadoProducto y formProducto tal como se muestra la figura :

26 of 40

10/10/2010 8:50 AM



Ahora haga doble clic sobre la pgina formProducto.jsp. Luego de ello le aparecer una ventana como la siguiente. En ella, asegrese que se haga referencia al template templatePeoug desarrollado previamente. Si todo esta bien, pulse el botn OK

Una vez creada la pgina, utilice la paleta de Data Controls para arrastrar el componente de negocio Producto1View1 haca la seccin center de la pgina. Al ubicar dicho componente en la pgina, aparecer una ventana flotante en la cual usted deber elegir la opcin Forms - > ADF Form, tal como muestra la figura.

27 of 40

10/10/2010 8:50 AM



Luego, aparecer una ventana que nos permitir configurar los campos y los botones que tendr el formulario a crear. En dicha ventana habilite todas las casillas de manera similar a lo mostrado en la siguiente figura y pulse Ok :

Seleccione el botn Submit y en modifique sus propiedad Action seleccionando el flujo regresar (Ver imagen)

28 of 40

10/10/2010 8:50 AM



Por defecto se crean cajas de texto por cada uno los atributos. Sin embargo, usted puede modificarlo para que sean ms atractivos ante el usuario. En este paso modificaremos el campo stock convirtiendolo en una barra de valores. Para ello haga clic derecho sobre el componente Stock, tal como muestra la figura y seleccione la opcin Convert.

En la ventana siguiente, elija el tipo de componente al cual usted desea convertir ese campo. Para este ejemplo elegiremos el tipo : Input Number Slider.

29 of 40

10/10/2010 8:50 AM



Pulse Ok en la siguiente pantalla :

Con el ltimo cambio usted debe contar con la siguiente pgina.

30 of 40

10/10/2010 8:50 AM



Otro de los tems presentes en esta pgina esta asociado a la categora de los productos. Dado que este item clasifica a los productos por Electronicos, Computadoras y Electrodomesticos, vamos a convertirlo en un combo a fin que sea fcil de manipular por los usuarios. Por ello seleccionemos dicho elemento de la pgina y eliminemoslo (luego lo remplazaremos).

Ahora, regresemos a la paleta de Data Controls y arrastremos el atributo categora del componente de negocio haca la pagina.

31 of 40

10/10/2010 8:50 AM



Al dejarse en la pgina saldr un men contextual, de elija la opcin Single Selections --> ADF Select One Choice ...

Luego del ltimo paso, aparecer una ventana similar a la mostrada a continuacin. De ella elija la opcin Fixed List

Luego seleccione la opcin Categora en el campo Base Data Source Atributte

32 of 40

10/10/2010 8:50 AM



Finalmente ingrese los 3 valores fijos que tendr esta lista : Electronica Computadoras Electrodomesticos

A finalizar usted debe tener una pantalla como la siguiente. Pulse Ok para hacer efectivo los cambios.

A finalizar usted debe tener una pantalla como la siguiente :

33 of 40

10/10/2010 8:50 AM



Es momento de probar las pginas de listado y formulario juntas, para ello regrese a la pgina listado y ejectela.

Seleccione el producto 003 Macbook y elija la opcin de men Editar para visualizar los detalles del formulario.

34 of 40

10/10/2010 8:50 AM



Utilice los botones de First, Previous, Next y Last para navegar entre los datos de los productos

35 of 40

10/10/2010 8:50 AM



9.Agregando Informacin Estadstica. Una vez creada la pgina de listado, vamos a incluir en la misma pgina, una grafico estadstico que muestre los stocks de cada uno de los productos en forma de barras. Para realizar esa actividad realicemos los siguientes pasos.

Regrese la modo de diseo en el jdeveloper y haga Clic sobre la pestaa de Estadsticas

Arrastre el componente de negocio Producto1View1 hacia la pestana de estadistica y apenas salga el men contextual elija la opcin Graphs - > Bar, tal como muestra la figura:

36 of 40

10/10/2010 8:50 AM



En la ventana siguiente debemos definir los datos y las etiquetas que deben mostrarse. Por ello haga clic sobre el icono en la primera Tabla y seleccione en el campo Data Attribute el valor Stock, tal como se muestra la siguiente figura :

Luego en la segunda tabla, vuelva a pulsar el icono tal como se muestra la siguiente figura :

y seleccione en el campo Group Atributte el valor Descripcin

La ventana finalmente debera contar con la siguiente imagen, luego de lo cual debe pulsar el botn Ok.

37 of 40

10/10/2010 8:50 AM



Haga Run sobre la pgina y vea los resultados,

38 of 40

10/10/2010 8:50 AM



Comments (5)

39 of 40

10/10/2010 8:50 AM



ayuda

5. Mircoles, 25 de Marzo de 2009 17:48 Maribel Brito

yo soy principiante en jdeveloper, y felicito por el tutorial esta super, pero tengo un error q me salio: oracle.jbo.JboException) JBO-29000: Unexpected exception caught: java.sql.SQLException, msg=ORA01882: timezone region not found ----- Level 1: Detail 0 ----(java.sql.SQLException) ORA-01882: timezone region not found por favor una ayuda, les estare enormemente agradecida Otoo Como lo despliego a mis usuarios 4. Martes, 10 de Marzo de 2009 22:26 Allan

Felicidades por el Material, muy bueno, facil de comprender, lo unico es que como hago o que deberia hacer para poder desplegar una aplicacion, y si puedo personalizar una pantalla de login de usuarios de acuerdo a roles en una bd. Felicidades Excelente trabajo, que buena herramienta es el jdeveloper Excelencia Excelente trabajo, espero mas articulo tuyos Muy buen manual 1. Mircoles, 10 de Septiembre de 2008 21:54 Anita 2. Sbado, 24 de Enero de 2009 19:45 Freddy Molina Martinez 3. Sbado, 07 de Febrero de 2009 00:41 mikel

Me parece un muy buen manual, rapido y claro, soy principiante en jdeveloper y me ha servido mucho, gracias =)

40 of 40

10/10/2010 8:50 AM

Desarrollando Una Rica Inte

Documents

Transcript of Desarrollando Una Rica Inte