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 :).


Comments

  1. compañero, me parece perfecto tu aportación, la duda que tengo ahora es, podemos definir un color de fondo para los días hábiles de la semana, he buscado algún selector que haga eso pero no encuentro.

    O hay que implementar alguna interfaz en particular para hacer eso, o hay algún selector que indique el día de la semana y a partir de ahí definir un color de fondo a esa celda
    mi cuenta es bvillatoro@adquem.com

    ReplyDelete
  2. Hola Daniel,

    Estoy trabajando con WCSpaces y he realizado lo siguiente:
    1. Un WAR Library que incluye mi custom skin (CSS skin, Resource Bundle y trinidad-skins.xml)
    2. He desplegado el WAR como shared library en Weblogic Server
    3. He incluido la referencia a la shared library dentro del weblogic.xml del DesignWebCenterSpaces
    4. He reiniciado el Managed Server de WCSpaces

    El nuevo skin no lo veo dentro de los recursos de WCSpaces. ¿El registro es automatico? ¿Hay que registrarlo manualmente dentro del generic-site-resources.xml del MDS? ¿Como?

    Muchas gracias por el Blog

    Un saludo

    ReplyDelete
    Replies
    1. Hola Carles.

      Siento no haber podido contestar antes :).

      Hasta donde yo sé, los Skins deplegados en el CLASSPATH de WebCenter Portal no son cargados en los generic-site-resources.xml de Portal automáticamente.

      Si te has fijado en como esta construidoWebCenter Portal 11.1.1.8, tanto la Skin de skyros usada no es la Skin de skyros por defecto de ADF. Lo que hace WebCenter Portal es crear Skins y recursos por encima de las por defecto de ADF (las extiende).

      Ejemplo:


      webcenter-skyros.desktop
      webcenter-skyros
      org.apache.myfaces.trinidad.desktop
      adf/spaces/skins/webcenter-skyros/webcenter-skyros.css
      skyros-v1.desktop


      Mi recomendación es la siguiente:
      1) Crea tu Skin y desplegalo como Shared-library. Esto hará que pueda ser consumida por cualquier Portlet o desarrollo ADF externo a WebCenter Portal.
      2) En WebCenter Portal crea una Skin que extienda la family de tu nueva Skin. Con ello consigues tener una Skin seleccionable y editable en Runtime basado en tu Skin. Haciendo esto, también cambiarán los literales usados por ADF :).

      Con respecto a la opción de registrarla en el MDS directamente en generic-site-resources no lo veo claro y no creo que cargue los literales traducidos.

      Si logro tener tiempo pondré una entrada con esto que acabo de comentar.

      Un saludo.

      Delete
    2. http://danielmerchanoracle.blogspot.co.uk/2015/02/webcenter-portal-custom-skin-en-shared.html

      Aqui tienes la respuesta extendida :)

      Delete
    3. Hola Daniel,

      Muchíssimas gracias por tu respuesta.

      Al final adopté otra solución para la traducción de los literales ADF standard, ya que utilizo WC Portal 11.1.1.7 (Spaces). Consite en la utilización de la extensión de WCSpaces y extender la classe ListResourceBundle de los Resource de ADF standard

      Un saludo

      Delete

Post a Comment

Popular posts from this blog

OJET: Inter-Module communication in TypeScript Template

OJET: Build and Deploy in an Application Server

OJET: Select All options using only Checkboxset