Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UDA-Herramientas para contenido estático

467 views

Published on

UDA-Utilidades de desarrollo de aplicaciones
• Herramientas para contenido estático

http://uda-ejie.github.io/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

UDA-Herramientas para contenido estático

  1. 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 aplicacionesHerramientas para contenido estáticoFecha: 17/10/2011 Referencia:EJIE S.A.Mediterráneo, 14Tel. 945 01 73 00*Fax. 945 01 73 0101010 Vitoria-GasteizPosta-kutxatila / Apartado: 80901080 Vitoria-Gasteizwww.ejie.es
  2. 2. Herramientas para contenido estático ii/8Control de documentaciónTítulo de documento: Herramientas para contenido estáticoHistórico de versionesCó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ónCambios en el parseo.Control de difusiónResponsable: Ander MartínezAprobado por:Firma: Fecha:Distribución:Referencias de archivoAutor:Nombre archivo:Localización:
  3. 3. Herramientas para contenido estático iii/8ContenidoCapítulo/sección Página1 Introducción 12 Portalizador 22.1 Introducción 22.2 Implementación 22.3 Funcionamiento 22.4 Estilos especiales (HACKS) 32.5 Gestión de warnings 42.6 Gestión de errores 52.7 Pruebas (LOCAL) 5
  4. 4. Herramientas para contenido estático 1/81 IntroducciónEl presente documento pretende explicar y detallar las diferentes herramientas para la manipulación deestáticos que se irán incluyendo en las diferentes versiones de UDA. De este modo, los usuarios podráncomprender los entresijos que se esconden tras las tareas automátizadas de UDA para la manipulación delcontenido estático con diferentes fines: desplegar los estáticos en aplicaciones integradas en portal,minimización y compresión, etc.
  5. 5. Herramientas para contenido estático 2/82 Portalizador2.1 IntroducciónLas aplicaciones integradas en portal tienen la necesidad de modificar sus ficheros de estilos para adaptarse alas necesidades del portal en el que se van a desplegar. En dicho portal, la aplicación se incrustará en uncontenedor (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. Unejemplo 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 tareaautomáticamente.NOTA: Esta herramienta debe considerarse como una ayuda al desarrollo y no como un productocerrado/final. Puede que se detecten condiciones o ejemplos que no se hayan tenido en cuenta y que se iráncorrigiendo e incluyendo en futuras versiones.2.2 ImplementaciónW3C 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 queimplementan 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 lamodificación de los ficheros de estilos ajustándolos al formato necesario para integrar la aplicación en unportal.Cabe destacar que SAC se basa en las reglas de CSS1 y CSS2 por lo que estilos que no cumplan dichasreglas provocarán errores al ser procesados como veremos más adelante.2.3 FuncionamientoAl 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 laejecució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 (actualmenteparseador de estilos)o com.ejie.uda.statics.tools.style_hacks: Hacks de estilos especiales que debe excluir el parseador.
  6. 6. Herramientas para contenido estático 3/8NOTA: La ruta de la carpeta lib del plugin Ant del Eclipse será similar a la siguiente (dependiendo de lasversiones):<ECLIPSE_HOME>/plugins/org.apache.ant_1.7.1.v20100518-1145/libEn la creación de una aplicación con UDA (ya sea Internet o Intranet), en el fichero build.xml del EAR segenerará una tarea nueva de nombre “generatePortalStatics” que hará la transformación de los ficherosestáticos. La ejecución de la tarea puede resumirse en los siguientes pasos:o Borrar (si existe) el directorio xxxPortalStaticso Crear el directorio xxxPortalStaticso Copiar en xxxPortalStatics las carpetas rup y xxxo Generar en xxxPortalStatics un directorio WEB-INF para pruebas en LOCALo Invocar al portalizador con los siguientes parámetros (que se generan automáticamente en la tareaAnt):codApp: código de la aplicación (xxx)destDir: directorio de destino (xxxPortalStatics)parserHacks: ruta al fichero com.ejie.uda.statics.tools.style_hacksUna vez lanzada la tarea se creará una carpeta xxxPortalStatics con el siguiente contenido:o rup componentes rup con los estilos parseadoso xxx componentes de la aplicación con los estilos parseadoso WEB-INF directorio para despliegue y pruebas en localA la hora de desplegar el contenido en DESARROLLO simplemente deberemos tomar las carpetas rup y xxxcomo si se hiciera de xxxStatics.NOTA: El único cambio entre las carpetas xxx y rup de xxxStatics y de xxxPortalStatics son los ficheros deestilos. 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 adaptecorrectamente 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 bodyo Se elimina el tamaño [anchura] (width) del estilo .contenedorUna vez procesados los ficheros, se eliminan los comentarios que pudieran tener y cada línea contendrá ladeclaració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 enmedio. 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 conjuntobásico de estilos que no deben omitirse. En caso de detectar algún caso especial se podría modificar dichofichero para incluirlo. Actualmente el fichero contiene los siguientes estilos:* html*html* +html*+html* + html*:first-child+html*:first-child+htmlhtml>body
  7. 7. Herramientas para contenido estático 4/8html>/**/bodyhtml:first-childNOTA: Cada vez que se ejecuta el plugin UDA de creación de una aplicación, se copian los ficheros delportalizador (jar y fichero de estilos) por lo que si se modifica alguno de ellos se perderán los cambios. Serecomienda cambiar la ubicación del fichero de estilos en caso de modificarlo y cambiar la tarea Ant para queel parámetro parserHacks apunte a la nueva ubicación.2.5 Gestión de warningsEl parser se basa en las reglas de CSS2 por lo que ciertos estilos puede provocar warnings al no detectarsecomo válidos. Estos warnings se tienen en cuenta y en la medida de lo posible se procesan para no perderningún estilo o propiedad aunque hay cierto tipo de warnings de los que no recuperarse como veremos acontinuación.Existen casos detectados en los que ciertos ficheros pueden generar warnings no procesablesautomá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úsquedadel selector en el fichero resultante se comprobará fácilmente a qué línea se refiere y su modificaciónmanual 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 seencuentra ya que al parsearse se ha detectado que no es válido y por tanto no se ha copiado. Sedeberá copiar manualmente este estilo del fichero original ubicado en xxxStatics al fichero resultantealojado bajo el directorio xxxPortalStatics (de deberá buscar el selector sin el modificador para elportal).Solución: Copiar manualmente el estilo que genera el error del fichero original ubicado en xxxStatics alfichero resultante alojado bajo el directorio xxxPortalStatics (se deberá buscar el selector sin elmodificador 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. 8. Herramientas para contenido estático 5/82.6 Gestión de erroresLos ficheros de estilos a procesar pueden contener errores con lo que el parseador no sera capaz de generarel fichero portalizado. En estos casos no se generará fichero resultante y se deberá corregir el erreor y volvera 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 seguirestos sencillos pasos:Desplegar manualmente la carpeta xxxPortalStatics en la consola del WebLogic (para estedespliegue 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 classdiv.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>

×