miércoles, 31 de agosto de 2011

Custom Skin ADF: Modificación de los estilos y traducción de literales

Hola a todos :).

Hoy os traigo un ejemplo de cómo realizar nuestra Custom Skin a nuestros componentes ADF.

El Custom Skin engloba 2 puntos fundamentalmente:

  • La sobre-escritura de estilos de los componentes ADF.
  • La modificación/traducción de los literales por defecto que vienen en los componentes ADF.
En el siguiente ejemplo vamos a crear una aplicación básica en la que cambiaremos un estilo y un texto de un componente ADF.

En primer lugar debemos crear en la carpeta WEB-INF de nuestra aplicación Fusion Middleware (ADF) un archivo XML con el siguiente nombre: trinidad-skins.xml .

Fichero trinidad-skins.xml

En este archivo se pueden definir tantos Skins como se necesite:

Contenido de trinidad-skins.xml

Los campos a rellenar por cada Skin son:
  • Id: Identificador único del Skin.
  • Family: Nombre de la familia. Este nombre es importante dado que es el que se utiliza para seleccionar el Skin en la aplicación.
  • Extends: En caso de estar extendiendo un Skin existente. Por ejemplo, para ADF es muy frecuente que se extienda fusion-v1.desktop.
  • Render-kit-id: Es la clase encargada de qué render se va a usar. Puede ser para "desktop" o "pda".
  • Style-sheet-name: Ruta donde esta ubicada nuestra CSS.
  • Bundle-name: Ruta de paquetes y nombre del proyecto de Bundle para la escritura de literales. En el caso del ejemplo se realizará desde una clase Java.
  • Translation-source: Personalmente nunca he usado esta opción en detrimento de Bundle-name.
Ahora debemos modificar el archivo trinidad-config.xml para que use nuestra Custom Skin. Para ello únicamente hay que sustituir el valor que viene dentro de <skin-family> por el nombre de la Family de nuestra Custom Skin.

trinidad-config.xml modificado

En el caso de una aplicación de WebCenter Portal. Nos encontraremos el siguiente valor:

<skin-family>#{preferenceBean.defaultTrinidadSkin}</skin-family>

Aquí tenemos varias alternativas, entre las cuales destaco:
  • Cambiar la preferencia de portal del archivo de configuración adf-config.xml para que use nuestra Custom Skin.
    adf-config.xml de WebCenter Portal

  • Establecer directamente el valor de nuestra Skin. Caso en el que no vayamos a cambiar la Skin del portal en modo ejecución.
  • Registrar en la aplicación de WebCenter la nueva Skin para que pueda establecerse desde la página de Administración de WebCenter.
En el ejemplo vamos a modificar ligeramente un <af:calendar>, cambiando alguno de sus estilos y los literales del componente traduciendolos al catalán (idioma para el que no se encuentran traducidos). 

Por ello, además de haber creado/modificado los archivos descritos anteriormente. Es necesario
  • Modificar el archivo faces-config.xml para que acepte el Catalán (ca_ES).

    faces-config.xml

  • Crear una página de pruebas y establecer en el atributo locale de <f:view> el valor "ca_ES" para indicar que nos encontramos en Catalán. Y añadir un componente <af:calendar>.

    Página de prueba
  • Verificar que tenemos creado el archivo trinidad-skins y modificado el archivo trinidad-config correctamente.
  • En el archivo CSS referenciado por nuestra Custom Skin vamos a añadir algunos selectores del componente calendar para modificar su estilo.

    Estilos Custom
  • Completar los Bundle Java que hemos creado y referenciado desde trinidad-skins.
    Código de Bundle en Catalán

  • Ejecutar la página JSPX y comprobar que los literales han sido traducidos al catalán así como los colores han cambiado.

    <af:calendar> con Custom Skin
Por último comentar que en la documentación oficial también se explica como desplegar nuestras Custom Skin en librerías JAR externas a nuestra aplicación. Algo que recomiendo cara a la limpieza del desarrollo.

Nota: Podeis encontrar una lista con los selectores, así como las claves de los literales traducibles por cada componente ADF en la ayuda de JDeveloper.

Lista de selectores de la ayuda de JDev

Ejemplo desarrollado en JDeveloper 11.1.1.4.

Documentación oficial: Custom Skin ADF.

Un saludo a todos :).


lunes, 22 de agosto de 2011

Habilitar las Custom Actions en un Task Flow de forma local

Hoy os traigo un pequeño fragmento de cómo habilitar de formal local las CustomActions de un Task Flow.

Existen 3 maneras de incluir CustomActions a Task Flows:
  • De forma local a la ADF Library: Es el caso que aquí os traigo y que personalmente más me gusta. Al empaquetar nuestro Task Flow en un JAR también le indicaremos qué acciones están disponibles en el menú. Esto se realiza en un archivo denominado adf-settings.xml.
  • Globalmente a una aplicación de WebCenter Portal: En este caso indicaremos acciones globales que aparecerán en todos los Task Flow del nuestra aplicación de portal. Éstas se indican en el archivo adf-config.xml.
  • Declarativamente en una página: Cuando añadimos un Task Flow en etapa de diseño en lugar de en ejecución desde Oracle Composer. Éste genera un binding a una instancia del Task Flow que es referenciada mediante la etiqueta ADF <af:region>. En este caso, desde la paleta que nos proporciona JDeveloper con los componentes de Oracle Composer podemos englobar nuestro Task Flow con un <af:showDetailHeader> y dentro arrastrar tantas <cust:customActions> como nuevos elementos de menú se quiera.
Para configurar de forma local las CustomActions a nuestro Task Flow debemos seguir los siguientes pasos:
  • Generar, en el caso de que no exista, una carpeta META-INF en nuestra carpeta raíz de código fuente src.
  • Crear un archivo con el nombre adf-settings.xml en la carpeta creada anteriormente.
  • En ella introducir las CustomActions que deseamos definir para nuestra librería. En cada una de ellas se deben definir los siguientes campos:
    • action: Acción de navegación que se va a llevar a cabo desde el Task Flow actual en el que nos encontramos.
    • location: Localización del fragmento de cabecera del Task Flow en el que se encontrará nuestra opción. Los valores pueden ser: both, menu, chrome.
    • rendered: Para el caso en el que queramos que nuestra acción sea visible dependiendo de una EL Expression de JSF.
    • icon: Para seleccionar un icono o imagen propia del menu.
    • shortDesc: Descripción corta que aparecerá al situar el ratón sobre la acción.
    • text: Nombre visual que se desea otorgar a la acción.
    • taskFlowId: Identificador del Task Flow que contendrá la acción.

Espero podido ayudar un poco con las CustomActions.

Documentación oficial acerca de CustomActions: http://download.oracle.com/docs/cd/E17904_01/webcenter.1111/e10148/jpsdg_page_editor_addconfig.htm

Ejemplo desarrollado en JDeveloper 11.1.1.4 y con la extensión de WebCenter PS3.

Un saludo a todos.

martes, 2 de agosto de 2011

Integrar ADF Task Flows propios en una aplicación de WebCenter

Hola a todos.

Hoy os traigo una pequeña entrada de cómo añadir nuestros Task Flow a una aplicación de Framework Portal de WebCenter
En primer lugar es necesaria la generación de una ADF Library del proyecto que contiene aquellas TaskFlow que deseamos incluir en nuestro portal. Para ello es necesario la creación de un "Plan de despliegue" desde las Project Properties del proyecto "Controller" (click derecho) de nuestra "Fusion Web Application"


Seleccionar la opción Deployment y seguidamente crear un nuevo plan de despliegue seleccionando como tipo de archivo ADF Library JAR File.



Generar la librería ADF seleccionando el proyecto "Controller" haciendo click derecho y seleccionando en la opción deploy nuestro plan de despliegue.



En caso de haber ido correctamente el despliegue de nuestro archivo JAR, recibiremos un mensaje con la ruta en la que se ubica (la cual necesitaremos más adelante).


Tras generar nuestra librería, se debe cambiar a la aplicación de WebCenter Portal y realizar una IDE Connection al File System donde se ubica nuestra ADF Library para poder ser utilizada. Por ello ir a la vista de la IDE Connections, realizar click derecho sobre File System y seleccionar New File System Connection.


Rellenar los siguientes campos del formulario:
  • Connection Name: Nombre lógico que se desea dar a ese repositorio.
  • Directory Path: Ruta de la carpeta donde se ubican los ADF JAR Library. Es la ruta de la carpeta y NO el JAR en sí.
Se puede realizar un Test de la conexión para ver si ha sido configurada correctamente.


Ahora es el momento en el que se puede incluir nuestros Task Flow a nuestra aplicación de WebCenter Portal. Hay muchas formas de incluirlas, aquí comentaré algunas.

Registrar el Task Flow como recurso del Portal.

Para registrar nuestro Task Flow en el catálogo del Portal y éste aparezca en el Catálogo de Oracle Composer como un Flujo de Tareas se deben seguir los siguientes pasos:
  • Adherir la ADF Library al proyecto. Desde la vista de IDE Connections, en la conexión recientemente creada hacer click derecho y seleccionar Add to Project (teniendo seleccionado el proyecto de nuestra aplicación de Portal).
  • Seleccionar el Task Flow que deseamos incluir al catálogo de Composer, hacer click derecho y seleccionar Show Catalog Reference para obtener el fragmento XML que debemos añadir en default-catalog.xml.
  • Abrir el default-catalog para añadir el XML que hemos obtenido para así poder registrar el Task Flow. Crear una carpeta propia donde dejar los TaskFlows propios, seleccionar el código fuente del archivo donde se ubica la carpeta recién creada y adherir el código XML.

  • Ejecutar el Portal (habiendo dado permisos en jazn-data.xml al TaskFlow para que algún usuario pueda verlo). Y mediante Oracle Composer añadir nuestro TaskFlow a la página que deseemos.


Registrar una URL de acceso al Task Flow.

A diferencia del anterior, consiste en realizar "Drag & Drop" del TaskFlow desde la pestaña de IDE Connections hacia el default-catalog. Se generará un Link hacia el TaskFlow y podrá adherirse desde Oracle Composer de la misma manera que el anterior.



Añadir el TaskFlow como componente de navegación del Portal.

En este caso podemos crear una página a partir del Task Flow. Mediante "Drag & Drop" de nuestro Task Flow hacia el archivo de navegaciones que estemos usando, en nuestro caso default-navigation-model.


Se generará una página ADF que contendrá única y exclusivamente nuestro TaskFlow siendo una página en la que no podrán incluirse más TaskFlow dado que utiliza la JSPX navigation-renderer (oculta en el proyecto) para renderizar Portlets, TaskFlows y demás recursos como páginas de Portal.


En todos los casos es necesario atribuir los permisos necesarios para que puedan ser visualizados en el Portal. Los permisos se gestionan en el archivo jazn-data.xml.




Ejemplo desarrollado en JDeveloper 11.1.1.4 y extensión de WebCenter PS3.

Un saludo a todos y disfrutar del verano :).