UDA-Herramientas para contenido estático

UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License.

UDA - Utilidades de desarrollo de aplicaciones

Herramientas para contenido estático

Fecha: 17/10/2011 Referencia:

EJIE S.A.

Mediterráneo, 14

Tel. 945 01 73 00*

Fax. 945 01 73 01

01010 Vitoria-Gasteiz

Posta-kutxatila / Apartado: 809

01080 Vitoria-Gasteiz

www.ejie.es

Herramientas para contenido estático ii/8

Control de documentación

Título de documento: Herramientas para contenido estático

Histórico de versiones

Código: Versión: Fecha: Resumen de cambios:

1.0.0 17/10/2011 Primera versión.

2.0.0 12/07/2011 Cambios en el parseo.

Cambios producidos desde la última versión

Cambios en el parseo.

Control de difusión

Responsable: Ander Martínez

Aprobado por:

Firma: Fecha:

Distribución:

Referencias de archivo

Autor:

Nombre archivo:

Localización:

Herramientas para contenido estático iii/8

Contenido

Capítulo/sección Página

1 Introducción 1

2 Portalizador 2

2.1 Introducción 2

2.2 Implementación 2

2.3 Funcionamiento 2

2.4 Estilos especiales (HACKS) 3

2.5 Gestión de warnings 4

2.6 Gestión de errores 5

2.7 Pruebas (LOCAL) 5

Herramientas para contenido estático 1/8

1 Introducción

El presente documento pretende explicar y detallar las diferentes herramientas para la manipulación de estáticos que se irán incluyendo en las diferentes versiones de UDA. De este modo, los usuarios podrán comprender los entresijos que se esconden tras las tareas automátizadas de UDA para la manipulación del contenido estático con diferentes fines: desplegar los estáticos en aplicaciones integradas en portal, minimización y compresión, etc.


2 Portalizador

2.1 Introducción

Las aplicaciones integradas en portal tienen la necesidad de modificar sus ficheros de estilos para adaptarse a las necesidades del portal en el que se van a desplegar. En dicho portal, la aplicación se incrustará en un contenedor (una capa [div]) al que se le aplica una clase específica div.r01gContainer . Este nombre definirá los nombres de los estilos de la aplicación.

A la hora de desplegar en el portal, se debían modificar todos los ficheros .css para que ajustar los estilos. Un ejemplo podría ser el siguiente:

h1 { font-size:2.2em; } [NORMAL]

div.r01gContainer h1 { font-size: 2.2em; } [PORTAL]

Para facilitar esta labor, desde la versión 1.1.1 de UDA se incluye una tarea (ant) que realiza esta tarea automáticamente .

NOTA: Esta herramienta debe considerarse como una ayuda al desarrollo y no como un producto cerrado/final. Puede que se detecten condiciones o ejemplos que no se hayan tenido en cuenta y que se irán corrigiendo e incluyendo en futuras versiones.

2.2 Implementación

W3C define un API para la manipulación de ficheros de hojas de estilo: http://www.w3.org/Style/CSS/SAC/.

Esta API únicamente define el cómo pero no es una implementación. Existen diferentes alternativas que implementan dicha API y UDA ha optado por la implementación CSS Parser.

UDA hace uso del CSS Parser a través de un jar propio (com.ejie.uda.statics.tools.jar) que realiza la modificación de los ficheros de estilos ajustándolos al formato necesario para integrar la aplicación en un portal.

Cabe destacar que SAC se basa en las reglas de CSS1 y CSS2 por lo que estilos que no cumplan dichas reglas provocarán errores al ser procesados como veremos más adelante.

2.3 Funcionamiento

Al generar una aplicación con UDA, en la carpeta de lib del plugin Ant del Eclipse se copian ciertos ficheros:

o maven-ant-tasks-2.1.1.jar: Permite la invocación de comandos de Maven desde Ant. Necesario para la ejecución de la tarea “mavenRunDependencies” (esto ya se hacía en versiones anteriores).

o com.ejie.uda.statics.tools.jar: Utilidades de UDA para la manipulación de estáticos (actualmente parseador de estilos)

o com.ejie.uda.statics.tools.style_hacks: Hacks de estilos especiales que debe excluir el parseador.


NOTA: La ruta de la carpeta lib del plugin Ant del Eclipse será similar a la siguiente (dependiendo de las versiones):

<ECLIPSE_HOME>/plugins/org.apache.ant_1.7.1.v20100518-1145/lib

En la creación de una aplicación con UDA (ya sea Internet o Intranet), en el fichero build.xml del EAR se generará una tarea nueva de nombre “generatePortalStatics” que hará la transformación de los ficheros estáticos. La ejecución de la tarea puede resumirse en los siguientes pasos:

o Borrar (si existe) el directorio xxxPortalStatics o Crear el directorio xxxPortalStatics o Copiar en xxxPortalStatics las carpetas rup y xxx o Generar en xxxPortalStatics un directorio WEB-INF para pruebas en LOCAL o Invocar al portalizador con los siguientes parámetros (que se generan automáticamente en la tarea

Ant): � codApp: código de la aplicación (xxx) � destDir: directorio de destino (xxxPortalStatics) � parserHacks: ruta al fichero com.ejie.uda.statics.tools.style_hacks

Una vez lanzada la tarea se creará una carpeta xxxPortalStatics con el siguiente contenido:

o rup � componentes rup con los estilos parseados o xxx � componentes de la aplicación con los estilos parseados o WEB-INF � directorio para despliegue y pruebas en local

A la hora de desplegar el contenido en DESARROLLO simplemente deberemos tomar las carpetas rup y xxx como si se hiciera de xxxStatics.

NOTA: El único cambio entre las carpetas xxx y rup de xxxStatics y de xxxPortalStatics son los ficheros de estilos. El resto de ficheros simplemente se copian.

El fichero de la aplicación (xxx.css) sufre ciertos ajustes (que realiza el portalizador) para que se adapte correctamente al portal:

o Se elimina el objeto body (su estilo se mantiene pero sin la etiqueta) o Se elimina el color de fondo (background) del estilo aplicado al body o Se elimina el tamaño [anchura] (width) del estilo .contenedor

Una vez procesados los ficheros, se eliminan los comentarios que pudieran tener y cada línea contendrá la declaración de un estilo (se eliminan los saltos de línea).

2.4 Estilos especiales (HACKS)

Existen ciertos estilos en los que el identificador del portal no debe colocarse al inicio del mismo si no en medio. Veamos un ejemplo:

* html .ui-autocomplete { width:1px; } [NORMAL]

* html div.r01gContainer *.ui-autocomplete { width: 1px } [PORTAL]

Para estos casos se utiliza el fichero com.ejie.uda.statics.tools.style_hacks. Este fichero incluye un conjunto básico de estilos que no deben omitirse. En caso de detectar algún caso especial se podría modificar dicho fichero para incluirlo. Actualmente el fichero contiene los siguientes estilos:

* html *html * +html *+html * + html *:first-child+html *:first-child+html html>body


html>/**/body

html:first-child

NOTA: Cada vez que se ejecuta el plugin UDA de creación de una aplicación, se copian los ficheros del portalizador (jar y fichero de estilos) por lo que si se modifica alguno de ellos se perderán los cambios. Se recomienda cambiar la ubicación del fichero de estilos en caso de modificarlo y cambiar la tarea Ant para que el parámetro parserHacks apunte a la nueva ubicación.

2.5 Gestión de warnings

El parser se basa en las reglas de CSS2 por lo que ciertos estilos puede provocar warnings al no detectarse como válidos. Estos warnings se tienen en cuenta y en la medida de lo posible se procesan para no perder ningún estilo o propiedad aunque hay cierto tipo de warnings de los que no recuperarse como veremos a continuación.

Existen casos detectados en los que ciertos ficheros pueden generar warnings no procesables automáticamente como es el caso del fichero de jquery UI. Cuando sucede un error de este tipo, se mostrará un mensaje en la consola con las líneas que fallan:

[portalizeCss] Parsing jquery-ui-1.8.20.custom.css...[3 WARNINGs] [portalizeCss] Duplicate selector [line 286]: .ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); } [portalizeCss] Selector not found [line 387]: div.r01gContainer button.ui-button::-moz-focus-inner

[portalizeCss] Invalid property [line 512]: filter: mask(); /*must have*/

NOTA: Cuando se produce un warning, sí se genera el fichero resultante con los estilos portalizados.

En todos estos casos, la traza nos indicará cual es el problema con cada uno de los estilos:

o Duplicate selector: Indica que en la línea que se muestra hay algún tipo de error de validación (CSS2) y que al intentar solventar el problema se ha detectado que el selector (.ui-widget-overlay) está duplicado en el fichero y no se conoce cual de los dos debe ser modificado. Con una búsqueda del selector en el fichero resultante se comprobará fácilmente a qué línea se refiere y su modificación manual no será un problema.

Solución: Modificar manualmente el fichero resultante buscando el selector que origina el problema.

o Selector not found: Indica que el selector empleado (button.ui-button::-moz-focus-inner) no se encuentra ya que al parsearse se ha detectado que no es válido y por tanto no se ha copiado. Se deberá copiar manualmente este estilo del fichero original ubicado en xxxStatics al fichero resultante alojado bajo el directorio xxxPortalStatics (de deberá buscar el selector sin el modificador para el portal).

Solución: Copiar manualmente el estilo que genera el error del fichero original ubicado en xxxStatics al fichero resultante alojado bajo el directorio xxxPortalStatics (se deberá buscar el selector sin el modificador para el portal).

o Invalid property: Indica que la propiedad en cuestión no es válida y deberá copiarse manualmente, comprobando el estilo al que pertenece.

Solución: Debe copiarse manualmente comprobando el estilo al que pertenece.


2.6 Gestión de errores

Los ficheros de estilos a procesar pueden contener errores con lo que el parseador no sera capaz de generar el fichero portalizado. En estos casos no se generará fichero resultante y se deberá corregir el erreor y volver a lanzar el parseador. Un ejemplo podría ser un estilo que no exista:

[portalizeCss] Parsing theme.rup.accordion-2.0.0.css... [1 ERRORs]

[portalizeCss] Style not valid [line: 20]: }

2.7 Pruebas (LOCAL)

Para la comprobación de los estilos portalizados antes de desplegarlos en DESARROLLO se deberán seguir estos sencillos pasos:

� Desplegar manualmente la carpeta xxxPortalStatics en la consola del WebLogic (para este despliegue es por lo que se crea la carpeta WEB-INF).

� Modificar el fichero de properties (xxx.properties) para cambiar la ruta a estáticos:

� Modificar la plantilla de la aplicación (template.jsp) para incluir una capa con la class div.r01gContainer:

[NORMAL] statics.path=http://desarrollo.jakina.ejiedes.net:7001/xxxStatics [PORTAL] statics.path=http://desarrollo.jakina.ejiedes.net:7001/xxxPortalStatics

<body> <div class="r01gContainer">

<div class="contenedor"> ...

</div> </div> </body>

UDA-Herramientas para contenido estático

Technology

Transcript of UDA-Herramientas para contenido estático