Oracle WebCenter Portal : Conceptos, Funcionalidades y Arquitectura de componentes

Por Plinio Arbizu
Publicado en agosto 2012

Introducción

Oracle WebCenter Portal, es una de las tecnologías ofrecidas por ORACLE para el desarrollo de portales Enterprise 2.0. Los beneficios de su uso están ligados a la productividad y a la colaboración entre los miembros de la organización (Empleados y socios de negocio). Puede encontrar un excelente resumen de los beneficios de negocio en el siguiente enlace.

https://blogs.oracle.com/webcenter/entry/top_5_reasons_to_invest_in_ent

En este artículo, sin embargo, queremos enfocarnos en el aspecto técnico de esta tecnología y abordar tópicos que permitan, a los desarrolladores y arquitectos, entender los componentes y funcionalidades que ofrece Webcenter Portal .

Funcionalidades de la Tecnología

Oracle WebCenter Portal brinda un marco de trabajo para la construcción de Portales. Dicho marco se encuentra desarrollado con base a un framework que tiene Oracle llamado ADF. Por ello, es muy recomendable conocerlo a fin de mejorar las extensiones que se hagan sobre el portal.

Un portal elaborado con esta tecnología se basa en una aplicación WEB que añade muchas funcionalidades "preconstruidas", entre las que podemos destacar las siguientes:

• Un diseño gráfico personalizable. Significa que dispondremos de "Skins" para personalizar el contenido estético del portal.
• Navegación pre configurada del sitio. Esto implica que será posible configurar el menú de opciones y las páginas que el portal dispone gracias a un entorno configurable en tiempo de diseño o ejecución.
• Capacidad de Personalización en tiempo de Ejecución. Esta funcionalidad permite que la creación y modificación de las páginas del portal puedan ser realizadas en tiempo de ejecución, sin necesidad de ingresar a un entorno de programación ó realizar actividades de despliegue.
• Administrador del Portal. Esta funcionalidad permite la administración de los recursos del portal desde un entorno en línea. Al igual que el caso anterior esta administración se hace en tiempo de ejecución con las ventajas indicadas en el punto anterior.
• Seguridad pre configurada del sitio. La definición de qué perfiles tendrán accesos a las opciones del portal también podrá ser gestionado fácilmente gracias al administrador del portal indicado en el paso previo.
• Un conjunto de servicios Web 2.0 listos para ser utilizados y capturar la inteligencia colectiva de los usuarios del portal.

Como resumen de las características indicadas previamente podemos afirmar que la tecnología permite una mayor participación de los miembros de la compañía no sólo en actividades de contribución de contenido, sino en labores de desarrollo gracias a los entornos intuitivos y en línea que ofrece la plataforma.

Bien, para comprender como se traduce estos beneficios a nivel de código, y sobre todo, qué componentes conforman un portal de Webcenter, vamos a crear un proyecto con esta tecnología a fin de entender los componentes claves que la herramienta genera.

Demo del desarrollo de un Portal y Análisis de Arquitectura de Componentes

Prerrequisitos

• Oracle Jdeveloper 11.1.1.5, con la extensión de Oracle WebCenter.

Pasos de Instalación en:

http://docs.oracle.com/cd/E21764_01/install.1111/e12001/install.htm#CHDJDIAC

Nota: En las imágenes se resaltará, con un marco rojo, las opciones que deberá seleccionar en el desarrollo.

Pasos del Desarrollo:

1. Una vez instalado, crearemos una aplicación del tipo WebCenter Portal. En el Jdeveloper, haga clic en el enlace "New Application"

haga clic en el enlace New Application

2. Indique los datos de la aplicación y elija "WebCenter Portal Application". Pulse Next y mantenga todos los valores sugeridos hasta culminar el asistente. Tenga en cuenta que para este proyecto estamos usando como paquete base otnla, el cual será referenciado a partir de ahora como <PAQUETE_BASE>

WebCenter Portal Applications

Nota: Es posible Lanzar este asistente también usando las opciones File | New | Applications | WebCenter Portal Applications.

3. Evaluando lo que ha creado el asistente notamos que se han creado 2 proyectos: Portal y PortalWebAssets. El primero es un proyecto basado en un proyecto web, y sobre él incluiremos las páginas y componentes comunes del portal. El segundo servirá para almacenar contenido estático que utilice el portal como HTML e imágenes.

Applications Sources

4. Analicemos ahora el proyecto Portal, para comprender la arquitectura de componentes que la herramienta ha generado. Note que se han creado 2 secciones:

• Application Sources : Esta sección incluirá descriptores y clases que dan soporte a las funcionalidades que tiene el portal. Generalmente estos elementos son alterados por los asistentes de la herramienta. Sin embargo, será útil que analicemos los paquetes y descriptores contenidos en esta sección:

• oracle.webcenter.portalapp: Este paquete incluye entre otras cosas, descriptores de los bindings asociados a las páginas. Un descriptor de bindings es básicamente un archivo XML que tiene referencias a los datos que son implementados en una capa de negocio. Las páginas hacen uso de estos descriptores para poder exponer esta información y evitar acoplarse con la capa de negocio. Un ejemplo de descriptor de bindings es loginPageDef.xml
• <PAQUETE_BASE>.portal : Incluye el descriptor Databindings.cpx que cumple la función de enlazar las páginas (jspx) con sus respectivos descriptores de bindings indicados previamente. Adicionalmente, define los datacontrols que utilizará la aplicación.
• META-INF: En esta carpeta se encuentra el archivo pagetemplate-metadata.xml, que registra todos los templates que tendrá el portal. Nuestro portal podrá disponer de muchos templates que podrán aplicarse a las páginas que desarrollemos.

PAQUETE_BASE

• Web Content: Esta sección contiene los componentes web tradicionales tales como páginas, imágenes y estilos. Adicionalmente, esta sección contiene descriptores que permiten personalizar características como seguridad, navegación y biblioteca de componentes que tendrá nuestro portal. Analicemos los paquetes y componentes definidos en esta sección.

• images: Este paquete incluirá las imágenes que usará el portal.
• oracle: La configuración de la seguridad, navegación, etc., son definidos en este paquete. Abordemos cada uno de los subpaquetes contenidos en la ruta oracle.webcenter.portalapp

• catalogs: Este subpaquete incluye el descriptor default_catalog.xml que sirve para configurar el catálogo de componentes que el usuario puede usar en tiempo de ejecución para componer su página. Por ejemplo, si creamos y empaquetamos un componente en un .jar., será necesario registrarlo en este descriptor para que los usuarios que componen el portal pueda incluirlo en sus páginas.

catalogs

• navigations: Este subpaquete dispone de un descriptor denominado: default_navigation_model.xml. Su función es definir el modelo de navegación que tendrán las páginas, y es usado para poblar las opciones de menú que tendrá el portal. En consecuencia, si se necesita definir un menú con las opciones de "Principal"," Nuestra Empresa", y dentro de la última opción los sub menús "Palabras de Bienvenida" y "Nuestros Productos" , será necesario aplicar esa configuración en el descriptor definido en este subpaquete.

navigations

• pagehierarchy : Mencionamos que una de las ventajas que ofrece WebCenter Portal es la gestión de seguridad. En este subpaquete se tiene el descriptor pages.xml , el cual define las páginas y sus correspondientes perfiles autorizados. En el ejemplo la página home puede ser accedida por todos los perfiles definidos en la sección Security - View.

pagehierarchy

• pages: Almacenará las páginas que se construyan en el portal
• pagetemplates: Define los templates que usará la aplicación. Es necesario recordar que un template define las características gráficas comunes que tendrán las paginas (banner, pie de página,etc). Inicialmente la herramienta genera el template: pageTemplate_globe.jspx que es usado por default.
• skins: Incluye las hojas de estilo que serán utilizadas por los componentes de las páginas para definir su estética. Por default se crea el archivo portal-skin.css

5. Modifiquemos ahora algunos de los componentes descritos previamente para entender las funcionalidades explicadas en la parte teórica. Empezaremos por modificar algunos de los elementos gráficos que ofrece el portal para mostrar la forma en que se personaliza el entorno estético.

6. Vamos a usar una imagen distinta como banner superior. Entonces copiemos la imagen logoPortal.png, que se encuentra en el zip de recursos ubicado al final de este artículo, hacia la ruta PortalOTNLA/Portal/public_html/images/.

7. Ahora, modifiquemos el template para usar la imagen copiada en el punto anterior. Abra el archivo: pageTemplate_globe.jspx y modifique la referencia globe.png por logoPortal.png. Tenga en cuenta que el templase se está editando en modo "Source".
Inicialmente:

pageTemplate_globe.jspx

Con el cambio:

pageTemplate_globe.jspx

8. Sobre el mismo template, volvamos al modo "Design" y modifiquemos la etiqueta " Tag Line for Your Company" por "OTN Lat"

template

9. Por default, los textos de las etiquetas y links están definidos en color blanco. Teniendo en cuenta que nuestro fondo también será del mismo color tendremos que modificar el color de estos textos a verde para que puedan distinguirse.

10. Cambiemos los colores de las etiquetas "Login" y "Password". En este caso modificaremos las propiedades LabelStyle de estas etiquetas tal como muestra la siguiente imagen.

LabelStyle

11. Repitamos el cambio de color sobre el control Link que permite la autenticación del usuario. Elíjalo y cambie su color tal como se muestra en la siguiente figura:

Link que permite la autenticación del usuario

12. Modifiquemos también las etiquetas y enlaces contenidos en la sección superior izquierda del portal. Realice los cambios tal como se muestran en la siguiente imagen.

Modifiquemos también las etiquetas y enlaces

13. Por default, todas las pantallas ofrecen un fondo blanco con un degrade en azul. Modifiquemos esto para tener un fondo uniforme de color blanco. Dado que este comportamiento aplica sobre todas las pantallas, haremos uso de la hoja de estilo del portal la cual regula el comportamiento gráfico de todos los componentes. Modifique la hoja de estilo portal-skins.css agregando el siguiente selector que define el color de fondo para el contenedor de las páginas:

af|document
{
	background-color: White;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:12px;
}

Modifique la hoja de estilo portal-skins.css

14. Ejecutemos el portal. Haga clic derecho sobre el proyecto Portal y elija la opción Run.

Ejecutar el portal

15. Notará que diseño por default ha cambiado. Con los colores y banners que hemos elegido.

Notará que diseño por default ha cambiado

16. Una de las ventajas de esta tecnología es la capacidad de permitir la participación de usuarios "no técnicos" en el desarrollo del portal. Esto se logra gracias a las herramientas de "composición" que Webcenter ofrece en tiempo de ejecución y al catálogo de componentes indicado en la introducción. Veamos un ejemplo de esta actividad modificando la página home.

17. Autentíquese la portal usando el usuario: weblogic, password: weblogic1. Notará que aparecen ahora disponible unos enlaces en la parte superior. Haga clic sobre el enlace Administration para entrar al entorno de administración del portal.

Autentíquese la portal usando el usuario y password

18. Este entorno permite la administración de gran parte de las configuraciones que hacemos desde Jdeveloper en tiempo de diseño. En este caso, note que los cambios los hacemos en tiempo de ejecución, sin ningún conocimiento especializado de programación y con la ventaja que los cambios se aplican de inmediato sin la necesidad de realizar un proceso previo de despliegue.

19. Inicialmente se listan las páginas disponibles por el portal. Tenga en cuenta que desde este entorno podríamos agregar más páginas haciendo uso del botón "Crear Página". Sin embargo para este ejemplo editaremos la página Home que se ha creado por Default. Utilice el botón de acciones para editar la página tal como se indica en la siguiente figura.

Utilice el botón de acciones para editar la página

20. En este entorno, podemos modificar la distribución de componentes y añadir elementos tales cómo contenido informativo, funcionalidades de negocio , gestores de documentos ó recursos Web 2.0. Sin embargo para efectos de este ejemplo incluyamos un texto fijo sobre la página. Pulse el botón "Agregar Contenido" para ver el catalogo de componentes.

Pulse el botón Agregar Contenido

21. Del catalogo de componentes elija la categoría "Web Development" , posteriormente aparecerán los controles disponibles en esta categoría. De la lista mostrada, agreguemos el control Text pulsando el botón "Agregar". Luego pulse "Cerrar" para regresar a la página diseñada.

Web Development

22. Para modificar el texto, haga clic sobre el link "Editar Texto", y modifique el texto según lo deseado. Puede usar las herramientas de formato para darle un diseño especial. Finalice esta etapa pulsando el enlace "Edición Terminada"

modificar el texto

23. Pulse Cerrar, para salir del modo de Edición de la página y vemos el resultado final de la página construida en tiempo de ejecución.

Pulse Cerrar

Conclusiones

WebCenter Portal es una tecnología completa que Oracle ofrece para la construcción de una nueva generación de portales corporativos, donde las características de compartir información, colaboración, interoperabilidad y diseño centrado en el usuario, son la norma.

El artículo mostró los principales componentes que la tecnología ofrece y brindó un ejemplo de, cómo miembros del área de TI y usuarios de negocio, pueden colaborar para desarrollar un portal con esta tecnología.

Descargar Recursos: recursos.zip

Descargar Proyecto Terminado: PortalOTNLA.zip




Plinio Arbizu es miembro del programa Oracle ACE Director, Coautor del libro Web 2.0 Solutions with Oracle WebCenter y uno de los administradores del grupo de usuarios Oracle de México (ORAMEX.org). Además de sus actividades laborales, mantiene su blog personal plinioa.blogspot.com y ayuda a su pequeño hijo, Sebastián, a descubrir el mundo.