Curso ADF 11g–Parte 7

Tema : Template de la Aplicación

Luego del proceso de creación de la parte de negocio, será necesario la creación de elementos para la parte de interfaz de usuario. Esta parte es importante, teniendo en cuenta que ADF se ha convertido en el framework de facto para la parte de presentación en la plataforma Oracle Fusion Middleware.

La creación de interfaz de usuario comprenderá varios post. Pero empezaremos creando el template que luego será reusado por todas las páginas.

Requerimiento:

· Oracle Jdeveloper 11g. 11.1.1.3

· Oracle Database Express 11g

· Haber culminado la parte 6 del tutorial.

Capítulos Anteriores

Parte 1: Creación del Modelo de Datos.

Parte 2: Creación de Componentes de Negocio

Parte 3: Personalización de Entidades

Parte 4: Personalización de View Objects.

Parte 5: Lógica en el Módulo de Aplicaciones

Parte 6: Manejo de Bindings

Opcional :

Si no culmino los capítulos anteriores y quiere empezar desde este capítulo, puede descargar el siguiente código para continuar el curso.

Código previo.

Bien, como indicamos inicialmente vamos a crear el template de nuestra aplicación. Un template es un elemento vital en cualquier aplicación, pues permite definir el aspecto gráfico y la organización que será común entre todas nuestras páginas. Esto es importante, porque nos permite estructurar el contenido de nuestras páginas y definir elementos gráficos como el banner, pie de página y logos que deberán aparecer en todas las páginas. El termino template es equiparable con conceptos como “master page” , “plantilla” ó  “machote”.

 

Los pasos a realizar son los siguientes:

1. Para empezar, usaremos la imagen (bannerVenta.jpg) como banner del template. Por, ello descarguemos esta imagen del siguiente link y usando el manejador de archivos ubíquelo en la siguiente ruta :

<RUTA_APLICACION_VENTAS>\ViewController\public_html\images ( Deberá crear la carpeta images porque no existe).

Al final usted deberá crear una imagen como esta :

 

 

2. Abra el jdeveloper, elija el proyecto View Controller, haga clic derecho y seleccione la opción New. Luego elija de la galería de componentes el item : JSF Page Template. Pulse OK.

 

3. Bien en este punto, indicaremos las propiedades del template.

• Nombremos al template como: templateVentas
• Ubiquemos el template no en la raiz sino en la subcarpeta \templates,

Hasta este punto usted debería tener los siguientes valores. Aún no pulse OK

 

4. Ahora, usaremos el asistente para determinar la estructura del template. Active el check Use a Quick Start Layout y pulse el botón Browse.

5. Deberá aparecer el asistente. En este punto elegiremos la categoria “one-column”, el tipo 2 y el layout 1, tal como muestra la figura.

 

Este layout tendrá como características que la parte superior ser mantendrá fija. Es decir existirá un espacio definido para albergar el banner .

La parte inferior será variable,  es decir si el usuario modifica el tamaño de la página, entonces el contenido de esa sección se “re ajustara” al tamaño que tenga la pantalla.  Es importante tener en cuenta que esto dependerá de que tipo de layouts (contenedores) coloquemos en la página. Más adelante analizaremos esto.

Pulse OK para continuar con la creación del template.

6. Bien ahora toca definir la región que podrá ser modificada por cada página que use el template. Recuerde que usamos el template para compartir su estructura entre las páginas. En consecuencia será necesario definir una región que podemos modificar cuando elaboremos las páginas.  Por ello,  usando la pestaña Facet Definitions pulsemos el botón Add para añadir un nuevo facet, que identificará a la región que podrá ser modificada. Nombremos al facet como contenido, tal como se muestra en la figura.

 

7. Finalmente elija la pestaña Attributes y agregue una nuevo atributo llamado titulo. Este atributo es como una variable a nivel de página y nos servirá para poner un titulo en la parte superior de cada página.

 

 

8. Pulse OK para culminar la creación del template.

9. Analicemos que ha creado el asistente.  Observe la paleta de estructura y notará que el asistente a incluid un componente llamado panelStrechLayout. Bien este tipo de componente se denomina contenedor ó layout y sirve para albergar a otros layouts ó contenedores. Este tipo de panel tiene la característica de ajustar sus dimensiones en función del tamaño que se defina en el browser.

 

 

El panel define 2 regiones center y top ( Note que el resto de regiones se encuentra deshabilitadas porque no se usan) . El top se usará para mostrar el banner de nuestra aplicación y la parte de center, incluirá el contenido que se poblará cuando se construya cada página que utilice el template.

10. Revisemos las propiedades del panelStrechLayout, notaremos que existe una propiedad que define el alto de la sección top (TopHeight). Por default considera 50 pixeles lo cual es conforme con el alto que tiene la imagen que tenemos. Eventualmente usted podría cambiar el valor de el alto en función del alto de su banner.

 

11. En la sección top colocaremos el banner descargado previamente. Una alternativa sería colocar un control imagen en esta sección, sin embargo nosotros queremos colocar la imagen del banner y encima de esta imagen un texto que describa la pantalla que estamos mostrandk. Por ello usaremos como control un layout la cual permite defijir una imagen de fondo y además servir de contenedor de otros controles como textos. Hagamos esto, arrastre un Panel Group Layout en la region top.

 

12. Modifiquemos las propiedades del  Layout con los siguientes valores :

Halign:center : Centrado de manera horizontal

Valign: middle: Centrado de manera vertical

Layout: vertical : Permitirá que todos los componentes que se agreguen se colocarán de manera vertical

 

 

13. Ahora apliquemos como valor de fondo la imagen descargada previamente, usando la propiedad image de la seccion Style and Theme como se indica en la figura.

14. Nuestro template debería quedar de la siguiente manera :

 

15. Debemos ahora asignarle un Titulo a nuestro template y adicionalmente un texto que será variable y que estará relacionado a la pagina que se muestre. Por eso, arrastre 2 OutputText sobre el layout creado.

 

Note que hos textos se están montando sobre la imagen que era lo que queríamos

 

16. Ahora , modifique los valores de las propiedades de los textos. Al primero se le pondrá como value : “SISTEMA DE VENTAS” y se cambiará su color y texto tal como lo mostrado a continuación.

17. Sobre el segundo outputText realizar la misma configuración del paso anterior, pero adicionalmente definir en la propiedad value la expression: #{attrs.titulo} que identificará al parámetro  definido en el punto 7.

 

18. Para terminar nuestro template, tenemos que definir que región de nuestro template será completado por las paginas que se construyan. En nuestro caso esa región se ubicará en la seccion center de nuestro template. Sin embargo nosotros lo “nombraremos” como “contenido” que fue definido en el punto 6.

Para eso, arrastremos el control Facet Ref sobre la región center y haciendo uso de la ventana emergente elegir el valor contenido. Pulse OK.

 

 

19. Nuestro template deberia tener la siguiente estructura.

 

 

20 Finalmente para probar el template, será necesario crear una página de prueba que la use. Haga clic derecho sobre el paquete de pages y elija la opción new.

 

21. Seleccione JSF –Page y pulse OK

 

 

22. Nombremos a nuestra página como pruebaTemplate y aseguremosno de que este seleccionado el templateVentas tal como se muestra a continuación. Pulse OK

 

 

 

23. Sobre la pagina creada, utilice la paleta de estructura para ubicar la referencia al template. Note que en la paleta de propiedades apareció la propiedad titulo que hace referencia a la variable asociada al template. Modifique su valor por “PRUEBA DE VENTAS”

 

 

 

24. Finalmente probemos la pagina haciendo clic derecho sobre ella y pulsando la opción de Run

 

 

25. La página ejecutada debe ser similar a la siguiente.

 

Código Final