UDA-Utilidades de desarrollo de aplicaciones • Herramientas para contenido estático http://uda-ejie.github.io/

1. 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

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

3. 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

4. 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.

5. Herramientas para contenido estático 2/8
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.

6. Herramientas para contenido estático 3/8
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

7. Herramientas para contenido estático 4/8
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.

8. Herramientas para contenido estático 5/8
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>