Un Entorno para su Cromo

Por Steve Muench Oracle ACE
Publicado en junio de 2008

 

Aplicar fácilmente una presentación consistente con plantillas de página.

Al crear una presentación profesional, usted define una disposición y estilo consistentes para todas sus diapositivas al editar la "diapositiva maestro". Usted puede concentrarse en el contenido y fácilmente cambiar la apariencia más adelante. Al utilizar una nueva característica análoga en la próxima versión de Oracle JDeveloper/Oracle Application Development Framework (Oracle ADF) 11g, usted diseña una "página maestro" para aplicar una presentación y estilo consistentes para todas las páginas de su aplicación Web. En esta columna, se define una plantilla de página que incluye elementos UI comunes—o "cromo", como los llaman los diseñadores Web—y luego se crea una página JavaServer Faces (JSF) basada en esta plantilla. Después de probar la página basada en la plantilla, cambiaremos la plantilla y la veremos reflejada en la página automáticamente.

Para continuar, descargue el espacio de trabajo inicial y asegúrese de que está utilizando la versión Oracle JDeveloper 11.1.1.0 Technology Preview 4, disponible para descarga gratuita en Oracle Technology Network: http://www.oracle.com/technetwork/developer-tools/jdev/downloads/index.html. Empiece extrayendo los contenidos del archivo o48frame.zip y abra el espacio de trabajo FrameworksJulAug2008.jws en Oracle JDeveloper. Tenga en cuenta que el proyecto Modelo en el espacio de trabajo define un objeto de entidad Dept, un objeto de visualización DeptView y un módulo de la aplicación HRModule. Asimismo, ajuste las propiedades de la conexión scott de la zona de Recursos de Aplicaciones en el Navegador de Aplicaciones hasta que pueda probar, con éxito, una conexión al esquema SCOTT. Si necesita crear tablas, utilice CreateDeptEmpTables.sql.

Crear la Plantilla de la Página

La plantilla de la página incluirá los componentes UI para lograr la presentación base e incluirá una o más zonas de contenido compatible en lugares adecuados. Estas zonas de contenido son representadas por facetas JSF, que definiremos aquí. Cuando creamos una página basada en la plantilla, utilizaremos el editor visual para completar las facetas de plantillas adecuadas con el contenido específico de la página.

En el Navegador de Aplicaciones, haga un click derecho sobre el proyecto ViewController y elija New (Nuevo). Cuando aparezca el cuadro de diálogo Nueva Galería, seleccione la categoría JSF dentro del nodo Nivel Web en el árbol de la izquierda; luego en la lista de Artículos a la derecha, seleccione JSF Page Template, y haga click en OK. Cuando aparezca el cuadro de diálogo Create JSF Page Template, cambie el valor por defecto de Page Template Name a MainTemplate. Tenga en cuenta que el campo File Name se actualiza automáticamente para asignar un nombre correspondiente al archivo JSPX que representará la plantilla. También fíjese en el casillero Create Associated ADFm Page Definition. Al diseñar sus propias plantillas, usted debería marcar este casillero si planea incluir contenido de datos, como la información del perfil de usuario que ha consultado desde un objeto de visualización UserProfileInfo, en la plantilla de la página. No obstante, para nuestro simple ejemplo, usted puede dejar esto sin marcar.

Ahora definamos dos facetas, una para el área de contenido principal de la página y otra para un botón de "acciones". Primero, simplemente definiremos los nombres de la faceta. (En el próximo paso—diseño de la presentación de la plantilla de página—agregaremos variables que representan estas facetas en la ubicación precisa en la página donde queremos que aparezca el contenido). Para definir una faceta, haga click en Facet Definitions en el cuadro de diálogo Create JSF Page Template y luego haga click en Add para crear una nueva faceta. Aparece una fila vacía en la tabla, con un nombre de faceta por defecto, facet1. Edite el nombre y cámbielo a MainContentArea, y proporcione una descripción de la región, como el área central de contenido. Haga click en Add una vez más para definir una segunda faceta, desígnela ActionButtonBar, e ingrese Buttons to perform actions go here como descripción. Finalmente, haga click en OK para definir la nueva plantilla de página. Después de un momento, se abrirá la página MainTemplate.jspx en el editor visual.

Diseñar la Plantilla de Página

Comenzaremos por agregar los elementos de presentación estándar que queremos que aparezcan en cada página de nuestra aplicación. Antes de comenzar, asegúrese de que Component Palette y Property Inspector estén visibles. Si los contenidos de alguno o de ambos están ocultos, seleccione las opciones adecuadas en el menú View para mostrarlas. Asegúrese también de que la lista en la parte superior de Component Palette muestre la categoría de componentes de ADF Faces. Si los contenidos de la sección Layout de Component Palette están ocultos, arrastre la sección para revelar los componentes de presentación.

Desde Component Palette -> ADF Faces -> Layout, arrastre un componente Panel Stretch Layout y déjelo en el medio de la página vacía. En Property Inspector, seleccione la página Style, haga click en Background y seleccione Aqua de la lista de Colores. Mueva su cursor por las diferentes áreas del componente Panel Stretch Layout, inicio, fin, arriba, abajo y centro, y fíjese cómo este componente divide el espacio en zonas, conocidas como facetas. Luego, desde Component Palette -> ADF Faces -> Layout, arrastre un componente Spacer y déjelo en la faceta inicio. Arrastre y suelte otro componente Spacer en la faceta fin, y luego otro componente Spacer más en la faceta abajo. Esto hará que aparezca un borde alrededor del margen izquierdo, derecho e inferior de la página.

Luego, desde Component Palette -> ADF Faces -> Layout, arrastre un componente Panel Group Layout en la faceta superior para contener un componente de texto para el nombre de la aplicación y el botón, y arrastre otro componente Panel Stretch Layout en la faceta central para abarcar el área de contenido principal. En la página Common de Property Inspector, configure StartWidth, TopHeight, EndWidth y BottomHeight de este componente interno Panel Stretch Layout en 0 (cero), y en la página Style, haga click en Background y seleccione White (blanco) de la lista de Colores. Desde la sección Common Components de Component Palette, arrastre un componente OutputText y déjelo dentro del componente Panel Group Layout en el ángulo superior izquierdo de la faceta superior. (Puede dejarlo en el editor visual o en ese componente en Structure Window). En la página Common de Property Inspector, ingrese My Application en el campo Value (valor) y en Text de la página Style, seleccione “grande” del menú Size (tamaño). Arrastre y suelte otro componente Spacer (Component Palette -> ADF Faces -> Layout) después de este componente OutputText, y luego arrastre y suelte otro componente Panel Group Layout para contener los botones de acción.

Finalmente, incorporaremos las referencias en las dos facetas de variables que definimos cuando creamos la plantilla. En la sección Common Components de Component Palette, arrastre un componente Facet Ref y suéltelo en el centro de la página. Cuando aparezca el cuadro de diálogo Insert Facet Ref, elija la faceta MainContentArea de la lista Facet Name y haga click en OK. Repita el proceso para arrastrar y soltar un Segundo componente Facet Ref dentro del componente Panel Group Layout que soltó a la derecha del componente My Application OutputText. Fíjese cómo las facetas definidas por usuario en la plantilla aparecen como recuadros definidos con una línea punteada a su alrededor. Como veremos en breve, cuando usted diseña una página basada en una plantilla, ésta será solo un área donde se puede crear contenido personalizado. Cuando aparece el cuadro de diálogo Insert Facet Ref, seleccione la faceta ActionButtonBar de la lista Facet Name y haga un click en OK. Hemos terminado con la plantilla de página, guarde todo su trabajo.

Uso de la Plantilla de Página

Luego, crearemos una página JSF basada en nuestra nueva plantilla de página. Haga un click derecho en el proyecto ViewController y elija New (Nuevo). Seleccione la categoría JSF, JSF Page en esa categoría, y luego haga click en OK. Ingrese Departments. como Nombre de Archivo de la página JSF, y de la lista Use Page Template, elija MainTemplate para usar la plantilla de página que creamos más arriba. Luego haga click en OK para crear la página.
En el editor visual, fíjese que la disposición de la plantilla de la página heredada aparece deshabilitada para recordarle que no puede cambiarse. En una página basada en una plantilla, usted puede agregar contenido solo en las facetas perfiladas, como MainContentArea y ActionButtonBar en nuestro ejemplo. Expanda la zona Data Controls de Application Navigator, y expanda el nodo HRModuleDataControl. Arrastre el grupo de datos Departments (departamentos), y suéltelo en la faceta MainContentArea. Cuando aparece el menu Create, seleccione Forms -> ADF Read-only Form. Cuando aparezca el cuadro de diálogo Edit Form Fields, haga click en OK para aceptar los valores por defecto. Luego, expanda el grupo de datos Departments en la zona Data Controls de Application Navigator y expanda la carpeta Operations que contiene. Arrastre la operación Next, y suéltela en la faceta ActionButtonBar. Cuando aparezca el menu Create, seleccione el botón ADF. Ahora arrastre la operación Previa (desde Data Controls -> Departments -> Operations), y suéltela como Segundo Botón ADF a la izquierda del botón Next que recién creó.

Pruebe su creación haciendo un click derecho sobre la página Departments.jspx en Application Navigator y elija Run (ejecutar). Cuando aparezca la página en su explorador por defecto, verá el “cromo” de la plantilla de página heredada y el contenido específico de página adjunto. Haga click en los botones de acción para verificar que éstos funcionen.

Cambiar la Plantilla

Supongamos que su personal de diseño UI vuelve meses después de que la aplicación ya está en producción y exige que el borde de la plantilla estándar sea cambiado de aqua a lime para mantenerse actualizado respecto de los tiempos. Con una plantilla de página a disposición, hacer estos cambios visuales es fácil. Para verlo en acción, abra MainTemplate.jspx en el editor visual, y en Structure Window, seleccione el panelStretchLayout más alto que es el primer elemento child (hijo) en el elemento pageTemplateDef. Seleccione la página Style en Property Inspector, seleccione Background, y seleccione Lime de la lista de Colores. Grabe la plantilla, y luego vuelva a ejecutar la página Departments.jspx para ver el efecto de su cambio.

Hemos explorado solo un ejemplo muy sencillo, pero por suerte usted puede apreciar cuán ponderosa será esta característica altamente solicitada en sus futuros proyectos de desarrollo Oracle ADF.



Steve Muench es gerente asesor de productos para Oracle JDeveloper y un Oracle ACE. Desde 1990 ha desarrollado y respaldado las herramientas Oracle y las tecnologías XML, las cuales aún hoy continúa promoviendo.