LM-UT6: Transformaciones XML

Lenguajes de Marcas y SGI
UT 6: XML (II).
Transformación de documentos
y hojas de estilo.

CFGS «Administración de Sistemas
Informáticos en Red»

CIFP Juan de Colonia (Burgos)

David H. Martín Alonso

– Curso 2010/2011 –

XML (II): TRANSFORMACIONES Y HOJAS DE ESTILO.

Contenidos

CSS
XSLT
XPath

Abril de 2011 CIFP Juan de Colonia


Objetivos
■ Introducción • XML permite estructurar la información.
□ CSS
□ XSLT
• Habitualmente pensaremos en algún uso ¿no?
□ XPath – Visualizar.
□ XSL-FO – Imprimir.

– Transferencia entre aplicaciones.

• ¿Cómo? Opciones:
3/40
– Programar aplicaciones particulares para cada uso.
– Formatos/lenguajes complementarios para XML.



XML y CSS
□ Introducción • ¿Cómo se ve un archivo XML?
■ CSS – No es una prioridad la visualización directa de XML.
□ XSLT
– No es competitivo con las posibilidades de HTML/XHTML.
□ XPath
– ¿Cómo haríamos una tabla?
□ XSL-FO
• Los navegadores web proporcionan una visualización
básica:
4/40
– coloreado de sintaxis
– árbol de elementos desplegable

• CSS permite mejorar la visualización directa
– Reutilización de CSS: HTML, XML, SVG...
• Transformaciones limitadas de la estructura.
– Efecto camaleónico gracias a la propiedad display
– display: none, block, inline, list-item, table…

• Enlace a la hoja CSS: instrucción de procesado (PI)
<?xml-stylesheet type="text/css" href="ej0.css"?>



Ejemplos CSS
□ Introducción <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
■ CSS <?xml-stylesheet type="text/css" href="nombres.css"?>
□ XSLT <grupo>
□ XPath <nombre>Pedro</nombre><nombre>Juan</nombre>
□ XSL-FO <nombre>Luis</nombre><nombre>Adolfo</nombre>
<nombre>Francisco</nombre><nombre>José</nombre>
<nombre>Martín</nombre><nombre>Petra</nombre>
5/40
<nombre>María</nombre>
</grupo>

nombre {display:block;}

nombre { display:block;
text-align:center;
padding:20px; margin: 5px;
border:solid thin blue;
}
grupo { display:table;
width:10em;
margin: 10px auto;}



Actividad I: CSS
Probar los ejemplos anteriores en distintos
navegadores:
-Sin la instrucción de procesado
-Con la hoja mínima, aplicando display:block
-Experimentar con otros ejemplos y propiedades, por
ejemplo simulando tablas.

-Explotar el uso de identificadores id para colorear
ciertas celdas. Puede ser necesario crear el DTD.
-Poner en encabezado y un pie a la lista empleando
SOLO CSS, con los pseudo-elementos :before y
:after aplicados a grupo.



XSL
□ Introducción eXtensible Stylesheet Language: XSL
□ CSS
■ XSLT Dos sublenguajes
□ XPath
□ XSL-FO • XSL Transformations: XSLT
– Lenguaje de programación
• XSL - Formatting Objects: XSL-FO
7/40
– Instrucciones de formato

El modelo y otros acompañantes
• Document Object Model: DOM
– Árbol de elementos
• XML Path Language: XPath
– Localización dentro del árbol DOM
• XML Linking Language: XLink
– Gestión de hiperenlaces

Estándares W3C todos


XSLT
□ Introducción XSL Transformations
□ CSS
■ XSLT • Define transformaciones sobre documentos XML
□ XPath – Documento de entrada → documento de salida
□ XSL-FO XML → XML, XML → HTML, XML → texto…
• Espacio de nombres XSLT 1.0:
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
8/40

• Prefijo habitual: xsl
• Elemento raíz: 2 sinónimos
<xsl:stylesheet … >
<xsl:transform … >
• Enlace desde documentos: instrucción de procesado
<?xml-stylesheet type="text/xsl" href="ej0.xsl"?>
• Ejecución:
– En navegadores: Firefox, Internet Explorer...
– Procesadores XSL: xsltproc



Ejemplos XSLT (I): ¡Hola mundo!
□ Introducción <?xml version="1.0" encoding="UTF-8"?>
□ CSS <?xml-stylesheet type="text/xsl" href="nombres.xsl"?>
■ XSLT <grupo><nombre>Pedro</nombre> …
□ XPath
□ XSL-FO <?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
9/40 <xsl:output method="text" encoding="iso-8859-1"/>

<xsl:template match="nombre">
<xsl:text>¡Hola </xsl:text>
<xsl:value-of select="."/>
<xsl:text>!</xsl:text>
</xsl:template>

</xsl:stylesheet>

• Transformaciones organizadas en «plantillas»
– xsl:template
– Búsqueda recursiva apoyada por condiciones



Ejemplos XSLT (II): plantillas básicas
□ Introducción <?xml version="1.0" encoding="UTF-8"?>
□ CSS <?xml-stylesheet type="text/xsl" href="nombres.xsl"?>
■ XSLT <grupo><nombre>Pedro</nombre> …
□ XPath
□ XSL-FO <?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
10/40 <xsl:output method="text" encoding="iso-8859-1"/>
<xsl:template match="/">
<xsl:text>¡Hola a todo el mundo!</xsl:text>
<xsl:apply-templates/>
</xsl:template>
<xsl:text>¡Hola </xsl:text>
<xsl:value-of select="."/>
<xsl:text>!</xsl:text>
</xsl:template>
</xsl:stylesheet>

– Forzamos la búsqueda en los hijos:
xsl:apply-templates


Actividad II: procesadores XSLT
Probar los ejemplos anteriores en distintos
navegadores.
-Solo con la plantilla aplicada a <nombre>
-Añadir la plantilla aplicada al elemento raíz, sin la
instrucción para aplicar plantillas a los hijos. Veréis
que se anula el efecto de recursividad y por tanto el
de la plantilla anterior.

Probar a realizar la transformación con la herramienta
xsltproc en línea de órdenes.



xsltproc
□ Introducción Utilidad de texto para aplicar transformaciones.
□ CSS
■ XSLT • Soporta XSLT 1.0
□ XPath
□ XSL-FO

12/40

$> xsltproc
Usage: xsltproc [options] stylesheet file [file ...]
Options:
--version or -V: show the version of libxml and libxslt
--verbose or -v: show logs of what's happening
--output file or -o file: save to a given file
--noout: do not dump the result
--encoding: the input document character encoding
…
Project libxslt home page: http://xmlsoft.org/XSLT/
To report bugs and get help: http://xmlsoft.org/XSLT/bugs.html



n! ≡ n × (n-1)!
□ Introducción
□ CSS
XSLT es un lenguaje declarativo.
■ XSLT – Definimos un conjunto de reglas a aplicar.
□ XPath – Se aplican a todo el documento: el árbol DOM

□ XSL-FO – No hay que especificar la secuencia para aplicarlas.

Modelo recursivo:
13/40
• Dos partes en cada plantilla
– Atributos, match: patrón de selección de los elementos
– Contenido: resultado a producir

• A cada elemento se aplica una plantilla
– Encadenando plantillas se procesa todo el documento
• Inicialmente se procesa solo el elemento raíz
– Se aplica la regla apropiada
– Si no hay regla apropiada se aplica la regla por defecto:

apply-templates
– Cualquier regla puede también forzar apply-templates

para transformar los hijos


Actividad III: transformaciones varias
Combinando adecuadamente texto podemos
transformar el contenido a formatos variados.

- Generar sentencias INSERT de SQL que permitan
incorporar los nombres a una hipotética tabla
Alumnos.

- Transformar la lista de nombres en una página web
con la tabla correspondiente. Conseguir la estructura
básica y luego tratar de pulir para que valide.

Esto puede ayudar...:
<xsl:output method="xml" encoding="utf-8"
doctype-public="-//W3C//DTD XHTML 1.1//EN"
doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
indent="yes"/>



xsl:apply-templates
● Al aplicar una plantilla se detiene la recursividad
en toda la rama, queda «ensombrecida».
● apply-templates permite volver a «ver» toda la
rama en el sitio de la plantilla que nos interese.

● Podemos restringir apply-templates
solo a algunos hijos incorporándole el
atributo select con la ruta XPath
adecuada.
● ¿Nos sirve todavía xmllint?


n! ≡ n × (n-1) × (n-2) … × 2 × 1
□ Introducción Modelo iterativo:
□ CSS
■ XSLT • XSLT también incluye elementos iterativos.
□ XPath – Programación bajo el paradigma procedimental.
□ XSL-FO – Podemos diseñar recorridos por el árbol desde una única

plantilla central.
– Basado en bucles que recorren un conjunto de nodos:
16/40
for-each en vez de apply-templates
• Ventajas/inconvenientes
– Se pueden construir transformaciones análogas con ambos
estilos de programación.
– El anidamiento de bucles incrementa la complejidad

Complejidad ≈ tamaño - robustez + coste
– Los programadores tradicionales prefieren el modelo
iterativo. Los programadores XML prefieren el declarativo.
– Se pueden combinar unos y otros en una misma aplicación.

Paradigma: Teoría cuyo núcleo central se acepta sin cuestionar y que suministra la base
Paradigma: Teoría cuyo núcleo central se acepta sin cuestionar y que suministra la base
y modelo para resolver problemas y avanzar en el conocimiento.
y modelo para resolver problemas y avanzar en el conocimiento.


Ejemplos: for-each vs. apply-templates
□ Introducción <xsl:template match="/">
□ CSS
■ XSLT
<xsl:apply-templates select="grupo/nombre"/>
□ XPath
</xsl:template>
□ XSL-FO Recursivo
--> <xsl:value-of select="."/>
</xsl:template>
17/40

<xsl:template match="/">
<xsl:for-each select="grupo/nombre">
Iterativo --> <xsl:value-of select="."/>
</xsl:for-each>
</xsl:template>

Los efectos de espaciado se evitarían con xsl:text

– 2 estilos de programación: recursivo / iterativo
– Recorremos las ramas: xsl:for-each


Condiciones y alternativas
□ Introducción • Elementos para producir salidas condicionadas o
□ CSS alternativas
■ XSLT
□ XPath
– Elementos con sesgo «procedimental»
□ XSL-FO

• Condiciones simples: if
18/40
– Atributo test: expresión XPath, la condición
<xsl:if test="text()='Juan'">, amigo</xsl:if>

• Condiciones múltiples: choose / when / otherwise
– Varias opciones y, además un valor por defecto
<xsl:choose>
<xsl:when test="text()='Juan'">, amigo!</xsl:when>
<xsl:when test="text()='María'">, amiga!</xsl:when>
<xsl:otherwise>!</xsl:otherwise>
</xsl:choose>



Variables
□ Introducción • Valores etiquetados para facilitar su reutilización.
□ CSS – Texto plano o también marcado XML o HTML.
■ XSLT
□ XPath • Finalidades
□ XSL-FO – Reutilización en diversas partes del código.
– Fácil localización para facilitar eventuales cambios.

– Mejor legibilidad del código.
19/40
• NO podemos modificar su valor posteriormente.
• Locales a una plantilla o globales compartidas.
<xsl:variable name="v0">¡Hola</xsl:variable>
<xsl:variable name="v1" select="mundo!"/>
…
<xsl:value-of select="concat($v0,' ',$v1)">

• Definición: 2 alternativas
– Atributo select: recomendable para XPATH o texto corto.
– Contenido del elemento: texto largo o con marcado.

• Acceso: operador $


Paso de parámetros
□ Introducción • Valores con nombre que transferimos a otra plantilla
□ CSS – apply-templates o llamadas directas call-template
■ XSLT
– call-template exige plantillas con nombre
□ XPath
□ XSL-FO • Declaración doble
– En la llamada: with-param
– En la plantilla: param
20/40
• Definición
– En la llamada, con with-param
– En atributo select o en contenido, igual que las variables

• Acceso también con el operador $

<xsl:call-template name="plantillaN">
<xsl:with-param name="p0" select="¡Hola!"/>
</xsl:call-template> …

<xsl:template name="plantillaN">
<xsl:param name="p0"/> …


Más XSLT: generando XML
□ Introducción • <xsl:output type="xml"…
□ CSS
– Introduce prologo, instrucciones de procesado, espacios de
■ XSLT
nombres…
□ XPath
– Podemos incrustar los elementos a generar entre los
□ XSL-FO
elementos XSLT o generarlos desde el propio XSLT.
– Se conserva el emparejamiento de etiquetas para que la

21/40
propia hoja XSLT sea XML bien formado.
– Se debe restringir el uso de <xsl:text>: saltos y formato.

• Elementos XSLT para generar componentes XML:
<xsl:processing-instruction name= …
<xsl:element name= … / <xsl:attribute name= …
<xsl:comment> …
• Trasladando contenido:
<xsl:copy … / <xsl:copy-of …
• Mensajes informativos
– Generalmente van a la salida de «error estándar»
<xsl:message> …


XPath (I)
□ Introducción • Estamos empleando ya expresiones XPath sencillas
□ CSS en distintas instrucciones XSLT.
□ XSLT
■ XPath <xsl:template match= … >
□ XSL-FO – Raíz DOM: “/”

– Nodo actual y nodo padre: “.” y “..”

– Nodos hijo, todos: “*”

22/40 – Nodos hijo con determinado nombre: “nombre” o “./nombre”

– Descendientes con determinado nombre: “.//nombre”

• Nodos del árbol, casi todo:
– Elementos, atributos, texto
– Espacios de nombres, instrucciones de procesado

– Comentarios, documentos externos

• Habitualmente el resultado es plural, habrá múltiples
concordancias.
• También da acceso a operadores y funciones:
<xsl:value-of select= … >
– En atributos no valen “<…>” y se puede sustituir por {…}



XPath (II)
□ Introducción • Las expresiones XPath producen respuestas varias
□ CSS – Listas de nodos
□ XSLT
– Valores lógicos: true/false
■ XPath
– Números
□ XSL-FO
– Cadenas de texto

• Operadores
23/40
Aritméticos: + - * div mod
Comparación: = != > >= < <=
Lógicos: and or
• Comodín
*
• Predicados, filtros
nombre[1] nombre[last()] nombre[position() > 1]
• Atributos:
@atributo1
• Variables
$variable1


XPath (III)
□ Introducción • Las expresiones de ruta XPath tienen la sintaxis:
□ CSS nombreeje::localizaciónnodo[predicado]
□ XSLT
■ XPath • Ejes: relación con el nodo actual
□ XSL-FO – Por árbol: child, parent, self, descendant, ancestor
– Por orden: preceding, following

– Por orden de hermanos: preceding-sibling, following-sibling
24/40
– attribute, namespace

– Algunos son prescindibles, simplificables: // . .. @ *

• Localización - componentes de ruta: /
+ Selectores por tipo de nodo: text() node() comment()
+ Selector por identificador: id()
• Predicados: filtros, condiciones
– Posiciones: [1] [last()] [position()>1]
– Presencia o valor de un atributo: [@a0] [@a0='…']

– Cualquier condición lógica: [a>b]

• Podemos combinar varias rutas separadas con |
• Ej: descendant::nombre[@baja='sí']


Actividad IV: XPath y xmllint
La utilidad xmllint nos permite probar expresiones
XPath en modo interactivo

xmllint --shell archivo.xml



Funciones XPath / XSLT 1.0
□ Introducción – boolean – local-name – text

□ CSS – ceiling – name – translate
□ XSLT – comment – namespace-uri – true
■ XPath – concat – node – unparsed-entity-uri
□ XSL-FO
– contains – normalize-space

– count – not

– current – number
26/40
– document – position

– element-available – processing-instruction

– false – round

– floor – starts-with

– format-number – string

– function-available – string-length

– generate-id – substring

– id – substring-after

– key – substring-before

– lang – sum

– last – system-property


Ejemplos: lectura de atributos
□ Introducción <xsl:strip-space elements="*"/>
□ CSS <xsl:template match="text()"/>
□ XSLT
■ XPath <xsl:template match="*">
□ XSL-FO Elemento <xsl:value-of select="position()"/>:
<xsl:value-of select="name()"/>
<xsl:if test="text()">
27/40
Texto: <xsl:value-of select="text()"/>
</xsl:if>
<xsl:if test="@*">
Atributos: <xsl:apply-templates select="@*"/>
</xsl:if>
<xsl:if test="*">
Hijos: <xsl:apply-templates select="*"/>
</xsl:if>
</xsl:template>

<xsl:template match="@*">
Atributo <xsl:value-of select="position()"/>:
<xsl:value-of select="name()"/>
Texto: <xsl:value-of select="."/>
</xsl:template>


Actividad V: rastreo de atributos
Rastrear un documento XHTML y obtener un listado
de hipervínculos con el URI correspondiente.

En un archivo de configuración de máquina virtual de
VirtualBox extraer las direcciones MAC o cualquier
otro valor de configuración


Ejemplos: generando XML
□ Introducción
□ CSS <xsl:template match="/"> 
□ XSLT <xsl:message>--> Procesando comentarios
■ XPath y contenido...</xsl:message>
□ XSL-FO <censo>
<xsl:apply-templates
select="grupo/nombre|//comment()"/>
</censo>
29/40
</xsl:template>

<xsl:template match="nombre"> 
<habitante id="{@id}" nombre="{.}">
<sexo><xsl:value-of select="@sexo"/></sexo>
</habitante>
</xsl:template>

<xsl:template match="comment()"> 
<xsl:copy-of select="."/>
<xsl:comment>
<xsl:value-of select="."/> (duplicado)
</xsl:comment>
</xsl:template>


Actividad VI: transformación avanzada
Recuperando el modelo utilizado en unidades
anteriores para horarios de grupo, completar el
horario semanal y diseñar exportaciones.
-Obtener listados de profesores y listados de
módulos en formato de texto, CSV y XHTML.
-Obtener un horario general del grupo en HTML 4.01
estricto.



XSL / XSL-FO
□ Introducción XSL Formatting Objects
□ CSS
□ XSLT • Escisión del XSL original, para dar formato.
□ XPath – Recomendación W3C, basado en XML
■ XSL-FO – Funcionalidad comparable a CSS

– Designado como XSL a secas

31/40
• Espacio de nombres XSL 1.1:
xmlns:fo="http://www.w3.org/1999/XSL/Format"
• Prefijo habitual: fo
• Elemento raíz: <fo:root … >
– Archivos con extensión fo o fob
– Archivos de salida generables con transformaciones XSLT.

• Estructura:
– modelo de páginas, con zonas y márgenes
– contenido organizado en bloques

• Herramientas
– FOP de la Fundación Apache: convierte a PDF y otros


XSL / XSL-FO: Estructura
□ Introducción root Raíz
□ CSS
□ XSLT • layout-master-set • Disposición
□ XPath – simple-page-master – Páginas
■ XSL-FO region… regiones…
• page-sequence • Contenido
32/40
– flow – Flujos
block… bloques…

BEFORE

START BODY END

AFTER


Ejemplos: XSL-FO
□ Introducción <?xml version="1.0" encoding="utf-8"?>
□ CSS <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
□ XSLT
□ XPath <fo:layout-master-set>
■ XSL-FO <fo:simple-page-master master-name="A4"
page-width="297mm" page-height="210mm"
margin-top="1cm" margin-bottom="1cm"
33/40
margin-left="1cm" margin-right="1cm">
<fo:region-body margin="3cm"/>
<fo:region-before extent="2cm"/>
<fo:region-after extent="2cm"/>
<fo:region-start extent="2cm"/>
<fo:region-end extent="2cm"/>
Página
</fo:simple-page-master>
</fo:layout-master-set>

<fo:page-sequence master-reference="A4">
<fo:flow flow-name="xsl-region-body">
<fo:block>¡Hola mundo!</fo:block>
Contenido </fo:flow>
</fo:page-sequence>
</fo:root>


Actividad VII: FOP
FOP es una utilidad de software libre producida por la
Fundación Apache para realizar transformaciones
XSL (XSL-FO). Es una aplicación Java, por tanto
multiplataforma, pero requiere tener instalada una
máquina virtual Java (por ejemplo el JRE de Oracle).

Descomprimirla en el equipo y tratar de obtener el
documento del ejemplo.

Adaptar también algún ejemplo previo de XSLT para
que nos produzca una salida XSL-FO y
transformarla.



XLink
□ Introducción XML Linking Language
□ CSS
□ XSLT • Vocabulario para asociar enlaces a cualquier
□ XPath elemento XML.
■ XSL-FO – Incorpora el atributo href y otros
– Enlaces simples como en HTML y complejos o extendidos

35/40
• Espacio de nombres XLink 1.1:
xmlns:xlink="http://www.w3.org/1999/xlink"
• Atributos con el prefijo habitual: xlink
– A definir en el DTD o esquema creado por el autor.
– Definidos global, no localmente: siempre se exige el prefijo.

– Luego en XHTML: <a href= … no se ajusta a XLink.

<grupo xmlns:xlink="http://www.w3.org/1999/xlink">
<nombre xlink:type="simple"
xlink:href="http://www.mio.es/alumnos/"
xlink:show="new">
Juan
</nombre>


...y más
□ Introducción Quedan bastantes lenguajes que aportan
□ CSS
□ XSLT funcionalidades a XML:
□ XPath • XLL, XLink, XBase, XPointer
■ XSL-FO
• XInclude
• XQuery
36/40



Documentación
□ Introducción Todo código fuente debe documentarse
□ CSS
□ XSLT + comprensión → - errores, - tiempo, - coste
□ XPath – En cualquier lenguaje de programación/datos: XML
□ XSL-FO – Siguiendo modelos de la organización, lenguaje o propios

Documentación del código en varios aspectos
37/40
• Autodocumentación: uso de nombres descriptivos
• Autodocumentación: estructura sencillas, legibles
• Comentarios internos del código:
– aspectos no evidentes
– ¡NUNCA PARA MAQUILLAR CÓDIGO ILEGIBLE!

• Comentarios de módulos:
– función, entradas y salidas
– comportamiento ante situaciones límite o atípicas

• Documentos externos: diseño, API...
– A veces es autogenerado a partir de los anteriores.



Referencias
Clark, J. (1999, W3C Recommendation) XSL Transformations
http://www.w3.org/TR/xslt
W3Schools (WWW) XSLT Tutorial
http://www.w3schools.com/xsl/
Rossi, F. (2003, APIACOA.org). Transformations XSLT
http://apiacoa.org/publications/teaching/xml/exercices/xslt.pdf
Boulanger, T. y Lecomte, S. (2009, ENI). XML práctico: bases esenciales,
conceptos y casos prácticos. ISBN: 978-2-7460-4958-1.
Dankert, E. (2005, edankert...) XML Grammars
http://www.edankert.com/transforms/
Webucator (2009) XSLT Tutorial.
http://www.learn-xslt-tutorial.com/
Nogales, J. T. (2010, Univ. Carlos III de Madrid) Introducción a XSLT
http://www.bib.uc3m.es/~nogales/cursos/xslt.html
Merelo, J. J. (GeNeura, Univ. Granada) Generación de páginas Web usando
XSLT y XML.
http://geneura.ugr.es/~jmerelo/XSLT/

Bibliografía actualizada en delicious:
http://www.delicious.com/dhmartin/LM-ASIR


Licencia

Este material está disponible bajo una Licencia Creative Commons,
http://creativecommons.org/licenses/by-nc-sa/3.0/es/



¿Dudas o cuestiones?


LM-UT6: Transformaciones XML

Recomendados

Recomendados

Más contenido relacionado

Similar a LM-UT6: Transformaciones XML

Similar a LM-UT6: Transformaciones XML (20)

Más de David Martin

Más de David Martin (15)

Último

Último (20)

LM-UT6: Transformaciones XML