Hojas de estilo para XML

¿Qué es?
 Es el acrónimo de EXtensible Stylesheet Language
 XML no tiene tags predefinidos, y por tanto el
significado de cada tag no se sabe interpretar.
 XSL describe cómo se debe visualizar un documento
XML
 CSS es a HTML como XSL a XML
 Más que una hoja de estilos
 XSL consta de tres partes:
 XSLT → un lenguaje para transformar documentos
XML
 XPath → un lenguaje para navegar en documentos
XML
 XSL-FO → un lenguaje para formatear documentos
XML
XSL
 XSLT
 XSLT (Xtensible Stylesheet Language for Transformations)
está basado en xml
 Está normalizado por el W3C, que ha publicado tres
versiones de este lenguaje:
 noviembre de 1999: XSLT 1.0
 enero de 2007: XSLT 2.0
 junio de 2017: XSLT 3.0
 Es un lenguaje de programación declarativo que permite
generar documentos en diferentes formatos de salida (xml,
html, pdf….)
 Se llama declarativo porque consiste en la declaración de
una serie de reglas o plantillas transforman el documento
xml a la salida deseada.
 XSLT
 Las reglas se almacenan en un documento xml que
tiene extensión .xsl
 Estas reglas junto con el documento xml se pasan a un
procesador XSLT que genera el documento
transformado.
 Las hojas de estilo deben estar bien formadas.
 El xmlSpy (programa para editar xml) no nos las
valida, pues no tienen asociado un DTD o esquema.
XSL-Templates (XSLT)
 XSLT
 No solo es para aplicar estilos.
 Permite filtrar contenidos, ordenar datos …
 Las hojas XSL son externas y son documentos XML
<?xml version=“1.0” encoding=“UTF-8”?>
 <xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
…
<xsl:stylesheet/>
 Para usarlas hay que vincularlas en el XML de los datos
<?xml-stylesheet type=“text/xsl” href=“estilos.xsl”?>
Aplicación de las transformaciones
 No debemos confundir las transformaciones XSLT con
la presentación de documentos XML con CSS
 Con XSLT, generaremos un documento HTML a partir
de un documento XML. Se tratará de dos documentos
“distintos”
 Con CSS, el navegador recibe un documento XML que
formatea utilizando las reglas CSS para presentarlo en
pantalla de forma que sea más fácilmente legible, pero
es el mismo documento.
 Estructura de una hoja de estilo
XSLT
 Una hoja de estilo XSLT es un documento XML. Debe
estar bien formado.
 Comienzan con una declaración XML: <?xml
version="1.0“ encoding=“utf-8” ?>
 El elemento raíz de la hoja de estilo XSLT es stylesheet.
 Este elemento contendrá a todos los demás, y debe ir
precedido por el alias xsl correspondiente al espacio de
nombres para hojas de estilo XSLT.
 Estructura de una hoja de estilo
XSLT
<?xml version="1.0" encoding=“UTF-8”?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

...................
</xsl:stylesheet>

Con una hoja de estilos como ésta aplicada, hará que se muestre el texto
(pero no los atributos) de todos los elementos del xml
 Estructura de una hoja de estilo
XSLT
 Entre las marcas de inicio y de fin del elemento raíz
xsl:stylesheet, se escribirán las reglas de
transformación que se llaman plantillas.
 Cada regla se definirá mediante un elemento
xsl:template (una plantilla)
 Se utiliza el atributo match para asociar una plantilla
con un elemento XML o con la raiz “/” para aplicarlo a
todo el documento XML.
 La regla indica qué instancias de los elementos del
documento XML se van a transformar.
 Elementos básicos
 Dentro de la instrucción <xsl:stylesheet> se pueden
encontrar los llamados elementos de alto nivel y las
plantillas, como en el ejemplo siguiente:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/"> </xsl:template>
</xsl:stylesheet>
 Elementos básicos
 La instrucción <xsl:template> es una plantilla.
 El atributo match indica sobre qué parte del
documento se va a actuar y contiene una expresión
XPath.
 El contenido de la instrucción define la transformación a
aplicar
 Todo lo que se incluya dentro (entre las etiquetas
<xsl:template match=“”> y </xsl:template> será lo que
sirva para generar la salida formateada
 El atributo match contiene
elementos Xpath
(iguales que el path de los sistemas operativos)
Expression Description
titulo Selecciona todos los nodos de nombre
titulo
/ Selecciona el nodo raíz (todo el xml)
// Selecciona todos los nodos que cuelgan
del actual
. Selecciona el nodo actual
.. Selecciona el nodo padre
@ Selecciona los atributos
 ejemplos

Path Expression Result

bookstore Selects all nodes with the name "bookstore"

/bookstore Selects the root element bookstoreNote: If the path starts

with a slash ( / ) it always represents an absolute path to
an element!
bookstore/book Selects all book elements that are children of bookstore

//book Selects all book elements no matter where they are in the
document
bookstore//book Selects all book elements that are descendant of the
bookstore element, no matter where they are under the
bookstore element
//@lang Selects all attributes that are named lang
El path también puede llevar “predicados” entre [ ]
 El path también puede llevar expresiones con los
siguientes operadores
Operador Descrición Ejemplo
| Comprueba dos alternativas //book | //cd
+ suma 6+4
- resta 6-4
* Multiplicación 6*4
div División 8 div 4
= Igual price=9.80
!= Distinto price!=9.80
< Menor que price<9.80
<= Menor o igual que price<=9.80
> Mayor que price>9.80
>= Mayor o igual que price>=9.80
or O price=9.80 or price=9.70
and Y price>9.00 and price<9.90
mod Módulo(resto de una divisón) 5 mod 2
 Transformaciones especiales
 Si la hoja de transformaciones no contiene plantillas, el documento xml se envía
directamente a la salida, omitiéndose los valores de los atributos.

Probad con el siguiente documento xml

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/xsl" href="dos.xsl"?>
<Documento>
<A_1>Nodo [A 1]
<A_1.1>Nodo [A 1.1]</A_1.1>
<A_1.2>Nodo [A 1.2]</A_1.2>
<A_1.1>Nodo [A 1.1]</A_1.1>
</A_1>
<B_1>Nodo [B 1]
<B_1.1>Nodo [B 1.1]</B_1.1>
<B_1.2>Nodo [B 1.2]</B_1.2>
</B_1>
</Documento>
 Transformaciones especiales

 Aplicadle la siguiente hoja de estilos:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0”
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
</xsl:stylesheet>

 En xml Copy Editor , para ver el resultado de la

transformación hay que abrir el documento xml e ir a
la opción XML -> XSL Tranformacion (F8)
Veréis que nos sale el texto del documento xml
 Transformaciones especiales
 Si la hoja de transformaciones sólo tiene una plantilla,
asociada al nodo raíz del documento xml, pero sin
ningún contenido no se envía nada a la salida.
Probad con la siguiente hoja de estilos:

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:template match="/">
</xsl:template>
</xsl:stylesheet>
 Transformaciones especiales
 Si la hoja de estilos no tiene una plantilla asociada al nodo
raíz, pero sí a otros elementos, se envía el contenido textual
a la salida hasta que se encuentra con el elemento y se le
aplica la transformación
Aplicad la siguiente transformación:

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="B_1">
</xsl:template>
</xsl:stylesheet>
 Transformaciones especiales

 En general se va recorriendo y visualizando el

documento xml hasta encontrar el elemento que
figura en el atributo match.
 Si la plantilla para este elemento está vacía ya no
se visualiza ni el elemento ni sus descendientes
 Elementos de una hoja de
transformaciones
 La instrucción principal es: <xsl:template>
 Representa una plantilla con una serie de acciones que
se van a realizar sobre los elementos indicados con el
atributo match.
 Cuando se aplica una plantilla a un nodo, se aplica
a ese nodo, pero no a sus descendientes→LOS
PERDEMOS (salvo que hagamos lo siguiente...
 Si se quiere que esa u otra plantilla se aplique a los
descendientes tendremos que usar la instrucción:
<xsl:apply-templates>
 Atributos de xsl:template

 name. Indica un nombre para la plantilla. Si se omite, el

atributo match es obligatorio.
 match. Indica a quién se la aplica la plantilla.
 priority. Valor real entre -9 y 9, de menos a más
prioritario. Se utiliza si hay conflictos entre plantillas
 mode. Permite distinguir dos plantillas cuyo atributo
match sea el mismo
 Elementos de una hoja de
transformaciones
 La aplicación de una plantilla corta la recursión por
defecto del procesador XSLT. Para que el proceso
continúe por el sub-árbol del nodo actual (por los
elementos hijos) es necesario indicarlo dentro de la
plantilla.
 Esto se realiza con la instrucción: <xsl:apply-
templates/>
 En general, este elemento es vacío e indica el punto de
inserción de contenidos que serán generados
posteriormente.
 Atributos de xsl:apply-templates

 select. Es una expresión XPath que especifica los

nodos a seleccionar para ser procesados. Si se
omite, todos los nodos descendientes del nodo
actual se seleccionan.
 match. Permite distinguir dos plantillas cuyo atributo
match sea el mismo
 Elementos de una hoja de
transformaciones
 Literales: cualquier otro elemento que no pertenezca
a dicho espacio de nombres, incluyendo el texto
plano.
 Estos son enviados a la salida tal cual figuran en el
cuerpo de la plantilla.
 Ejemplo
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<html>
<body>
<h1>Esto es un documento HTML</h1>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

El resultado es un documento html idéntico para cualquier documento xml de entrada.

Probadlo
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
Ejemplo
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
El archivo completo lo puedes
<price>10.90</price>
<year>1985</year>
descargar desde w3Schools
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
</catalog>
 Instrucciones de control
Son las siguientes:
1. xsl:value-of
2. xsl:for each
3. xsl:if
4. xsl:sort
5. xsl: choose, xsl:when, xsl:otherwise

La 2, 3 y 5 permiten reproducir el funcionamiento de las

instrucciones de control de flujo de los lenguajes de
programación ( el for, el ir y el switch)
 xsl:value-of
Obtiene el contenido de texto del elemento que se
seleccione mediante el atributo select
El atributo select=“elemento” puede incluir una ruta como
las que se ponen con path

<xsl:template match="/">
<xsl:value-of select="catalog/cd/title"/>
<xsl:value-of select="catalog/cd/artist"/>
</xsl:template>

(si lo aplicamos como en el ejemplo anterior: obtendré el texto del

primer elemento title y luego el texto del primer elemento
artista.¿Qué hacer para obtener todos los títulos y todos los
artistas?...(bucle: for-each)
 xsl:for-each

Permite iterar sobre una lista de elementos y aplicar

transformaciones sobre ellos.
Tiene un atributo obligatorio que es select=“elemento”
Por supuesto, elemento puede incluir una ruta dentro
del árbol xml como una expresión xpath
La instrucción de cierre es: </xsl:for-each>
 xsl:for-each
<xsl:template match="/">
<xsl:for-each select="catalog/cd">

<xsl:value-of select="title"/>
<xsl:value-of select="artist"/>

</xsl:for-each>

</xsl:template>

Ahora sí obtenemos todos los textos de los elementos title y de los elementos artist
 Ejercicio
 Realizad una hoja de estilos que nos proporcione el
siguiente resultado. Por supuesto utilizando for-each.
 xsl:if
Se utiliza para producir un comportamiento condicional.
Sólo podemos preguntar por una condición y actuar si la condición
es cierta.
No existe una rama del sino (else)
Tiene un atributo obligatorio test=“expresion” (es una expresión
como las que se pueden poner en Xpath)
La instrucción de cierre es: </xsl:if>

<xsl:for-each select="catalog/cd">
<xsl:if test="price &gt; 10">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
<td><xsl:value-of select="price"/></td>
</tr>
</xsl:if>
</xsl:for-each>
 Ejercicios
 Realizad el ejercicio anterior, pero poniendo cada fila
de la tabla de un color según sean pares o impares.
 Si sólo tengo un libro que contenga la etiqueta imagen,
evitad que salga “algo” vacío en el resto de libros.
 Extraed los títulos de los libros de Mario Vargas Llosa
 xsl:sort
 Envía a la salida datos del documento xml ordenados
por algún criterio.
 Los atributos opcionales son:
 select: indica los nodos a ordenar (expresión xpath).
 data-type: especifica el tipo de datos a ordenar(numbre,
text)
 order: los valores son ascending o descending
 case-order: especifica si las letras minúsculas (lower-
first) o mayúsculas (upper-first) aparecen primero al
ordenar.
 xsl:sort

<xsl:for-each select="catalog/cd">
<xsl:sort select="artist"/>
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
 Ejercicio
 Sacad un listado de los autores ordenados de distintas
formas: alfabéticamente en orden ascendente, en
orden descendente
 Intentadlo con los libros por fecha de publicación
 Ídem que antes, pero a misma fecha de publicación por
orden alfabético.
 xsl:choose, xsl:when,
xsl:otherwise
 Permiten implementar un comportamiento
condicional con múltiples opciones y una opción por
defecto (similar al switch)
 El elemento <xsl:choose> se usa junto con <xsl:when>
y <xsl:otherwise> para expresar una elección múltiple.
 Si la condición <xsl:when> es falsa, se procesa el
código de <xsl:otherwise>.
 Sigue el formato:
<xsl:choose>
<xsl:when test=“expresion”> … </xsl:when>
<xsl:when test=“expresion”> … </xsl:when>
<xsl:when test=“expresion”> … </xsl:when>
<xsl:otherwise>…</xsl:otherwise>
</xsl:choose>
 Ejemplo
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<xsl:choose>
<xsl:when test="price &gt; 10">
<td bgcolor="#ff00ff">
<xsl:value-of select="artist"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="artist"/></td>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
 Ejemplo transformación XSLT
Documento XML
<?xml version=“1.0” encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="prueba.xsl" ?>
<ciudades>
<ciudad>
<nombre>Madrid</nombre>
<habitantes>3500000</habitantes> Hace referencia al
</ciudad> documento XSL
<ciudad>
<nombre>Málaga</nombre>
<habitantes>800000</habitantes>
</ciudad>
<ciudad>
<nombre>Toledo</nombre>
<habitantes>50000</habitantes>
</ciudad>
</ciudades>
 Ejemplo transformación XSLT
Documento XSL
<?xml version="1.0" encoding=“utf-8”?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match=“//nombre">
<html>
Queremos los
<body> nombres de las
<h2> <xsl:value-of select="." /> </h2> ciudades
</body>
</html>
</xsl:template>
</xsl:stylesheet>
 Ejemplo transformación XSLT
Resultado
<h2>Madrid</h2>3500000
<h2>Málaga</h2>800000
<h2>Toledo</h2>50000

El resultado obtenido no es el documento HTML esperado

Vemos que en el documento de salida no sólo se ha incluido
el texto de los elementos procesados, sino el de todos los
elementos del documento original…
Para evitar esto, tenemos que hacer unos cambios en la hoja
de estilo XSLT.
 Ejemplo transformación XSLT
Documento xsl mejorado
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head> <title>Ejemplo XSLT</title> </head> <body>
<h1> CIUDADES DE ESPAÑA </h1> <xsl:apply-
templates select="//nombre" />
</body>
</html> </xsl:template> <xsl:template
match="nombre"> <h3> <xsl:value-of select="." /> </h3>
</xsl:template> </xsl:stylesheet>
 Resumen 1
Elementos básicos
 Cuando se aplica una plantilla a un nodo la plantilla se
aplica únicamente al nodo, pero se sustituye el nodo y
todos sus descendientes por el resultado de la
aplicación de la plantilla, lo que nos haría perder a los
descendientes.
 Si se quiere que antes de sustituir el nodo y todos sus
descendientes se apliquen también a los descendientes
las plantillas que les correspondan, hay que utilizar la
instrucción <xsl:apply-templates />, como en el
ejemplo siguiente:
 Resumen 2

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match='/'>
<xsl:apply-templates />
</xsl:template>
<xsl:template match="elemento">
</xsl:template>
</xsl:stylesheet>
 Resumen 3

 El elemento <xsl:apply-templates /> puede restringirse con

el atributo select para especificar un subconjunto de nodos.
<xsl:apply-templates select="PATRÓN" />
 xsl:value-of extrae el valor de una etiqueta e inserta el valor
del atributo o elemento encontrado en el árbol de salida
<xsl:value-of select=“titulo”> </xsl:value>
 xsl:if sirve para evaluar condiciones sobre valores de
atributos o elementos. Si la comparación es cierta se evalúa
el contenido del elemento"<xsl:if>", en caso contrario no se
evalúa.
 Resumen 4

 xsl:for-each aplica una acción repetidamente para cada

nodo de un conjunto.
<xsl:for-each select=“libreria/libro”> </xsl:for-each>
<xsl:for-each
select=“librería/libro[autor=‘AutorBuscado’]”>…
</xsl:for-each> ojo con las
comillas
 xsl:sort ordena un conjunto de nodos de acuerdo
dentro de a
algún elemento. comillas

<xsl:sort select=“titulo”/>
 Resumen 5
Patrones de búsqueda
 = igualdad
 != desigualdad
 &lt; menor que ó <
 &gt; mayor que ó >
 Tambien se pueden usar funciones como:
 count()
 position() / biblioteca/libro[position()<3]
 last() /biblioteca/libro [last()]
 O notación array : /biblioteca/libro[1] (1ºlibro)
 Resumen 6
Plantillas
 En un mismo documento puedo aplicar varias plantillas por
zonas del documento
 El documento se procesa por nodos del árbol, podemos
especificar estilos según se navega por esos nodos
 Para ello tenemos varias etiquetas relacionadas con la
aplicación de las plantillas:
<xsl:template match…>
<xsl:apply-templates/> (que aplica el resto de plantillas definidas en
cuanto se cumpla su patrón match)
 <xsl:apply-templates select=“XXX”/>
Aplicar la plantilla XXX en ese momento

<xsl:value-of-select=”.” />
 Se copia el valor del nodo actual en la plantilla actual