Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

XML IV

Estilo con XSL

Qué es XSL

El lenguaje XSL se encarga de dar estilo a los documentos XML. Este lenguaje transforma el documento de entrada o XML en otro documento de salida con otro formato. Aquí veremos concretamente como transformar un documento XML en otro HTML con el mismo contenido, mediante XSL.

Aunque XSL es otro tipo de lenguaje, aquí veremos sólamente lo imprescindible para transformar un documento XML en otro HTML, dejando para otro manual las posibilidades de XSL.

Cabecera del documento

En el documento XML, después de la primera declaración, crearemos un link al archivo XSL, de la siguiente manera:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/xsl" href="nombre_archivo.xsl"?>

Hemos añadido una línea que enlaza el archivo con el archivo XSL. El valor del atributo href lo cambiaremos por la ruta hacia el archivo XSL. El archivo XSL, lo guardaremos con la extensión ".xsl", aquí le llamaremos ejemplo.xsl y las primeras líneas serán siempre las mismas:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">


<!--  contenido del documento  -->


</xsl:template>
</xsl:stylesheet> 

Las tres primeras líneas son el principio del documento. El único cambio que tenemos que hacer aquí es cambiar el valor del atributo match (en la tercera línea) por el nombre que le demos a la etiqueta principal en XML (la etiqueta que engloba a todas las demás).

Por otra parte el documento XSL terminará siempre con las dos lineas finales que hemos puesto, las cuales cierran las etiquetas de inicio. Entre medio pondremos el contenido del documento XSL.

Página simple con XSL

Una vez que ya sabemos cómo hacer la cabecera y el final del documento, vamos a seguir la explicación mediante un ejemplo.

Empezamos por construir un archivo XML. Nuestro archivo consistirá en una agenda de personajes ficticios de tebeo. Empezamos por poner el primer personaje:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/xsl" href="ejemplo.xsl"?>
<agenda_tebeo>

<personaje numero="1">
  <nombre>Mortadelo</nombre>
	<telefono>666555444</telefono>
	<email>mortadelo@tia.com</email>
</personaje>

</agenda_tebeo>

Este es el archivo XML que iremos ampliandolo más adelante. ahora veamos cómo ver este archivo en el navegador.

La hoja de estilos XML consistirá en una especie de plantilla del documento HTML que queremos ver en el navegador, a la que le iremos diciendo en cada momento dónde poner los elementos del documento XML. Veamos el archivo XSL y luego lo comentamos:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="agenda_tebeo">

<html>
<head>
  <title>Agenda Tebeo</title>
</head>
<body>
<h1>Agenda de tebeo</h1>

<div class="personaje">
  <h3>contacto número: <xsl:value-of select="personaje/@numero"/></h3>
  <ul>
    <li><xsl:value-of select="personaje/nombre"/></li>
    <li><xsl:value-of select="personaje/telefono"/></li>
    <li><xsl:value-of select="personaje/email"/></li>
  </ul>
</div>

</body>
</html>

</xsl:template>
</xsl:stylesheet> 

Antes de seguir con la explicación veamos como queda la página XML. lo vemos en el siguiente enlace:

personajes_1

El contenido de la página XSL consiste en una página web en HTML (o mejor dicho en XHTML) en la que los valores que queremos tomar del documento XML los insertamos mediante la etiqueta:

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

Los valores del atributo select indican el texto que debe insertarse en esa etiqueta, y se corresponden con las etiquetas y atributos del archivo XML. Se toma como origen el elemento raiz (aquí la etiqueta agenda_tebeo) y a partir de ahí se sigue la ruta para llegar al elemento que quiere mostrarse (poniendo el nombre de las etiquetas separadas por el signo / ). Para mostrar el valor de un atributo se pone el signo arroba @ delante del nombre del atributo.

Añadir más personajes a la agenda

Sin embargo una agenda no consta de un sólo personaje, por lo que añadiremos más personajes a la agenda. para empezar modificamos el documento XML y lo dejamos así:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/xsl" href="ejemplo.xsl"?>

<agenda_tebeo>
<personaje numero="1">
  <nombre>Mortadelo</nombre>
  <telefono>666555444</telefono>
  <email>mortadelo@tia.com</email>
</personaje>

<personaje numero="2">
  <nombre>Filemon Pi</nombre>
  <telefono>665544332</telefono>
  <email>filemon@tia.com</email>
</personaje>

<personaje numero="3">
  <nombre>Superintendente Vicente</nombre>
  <telefono>678901234</telefono>
  <email>supervicen@tia.com</email>
</personaje>

</agenda_tebeo>

Ahora debemos modificar el archivo XSL para que en la página web se incluyan los otros personajes incorporados.

Podríamos incorporar más código al archivo XSL de forma que incorpore uno a uno todos los personajes. Eso supondría que cada vez que incorporamos un nuevo personaje tenemos que modificar el código del XSL.

Sin embargo el XSL dispone de un mecanismo tipo bucle que hace que una serie de etiquetas iguales se puedan ver con poner sólo una vez el código. Esta es la etiqueta:

<xsl:for-each select="etiqueta_XML"> ... </xsl:for-each>

El código comprendido entre las etiquetas de apertura y cierre se repetirá tantas veces como se repita la etiqueta indicada en select.

Dentro del bucle la etiqueta indicada en select se convierte en etiqueta raíz por lo que sólo podremos hacer referencia a etiquetas que sean hijas de ésta.

Veamos cómo usarlo en el ejemplo anterior, modificando el documento XSL:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="agenda_tebeo">

<html>
<head>
<title>Agenda tebeo</title>
</head>
<body>
<h1>Agenda de tebeo</h1>

<xsl:for-each select="personaje">
<div class="personaje">
  <h3>Personaje número: <xsl:value-of select="@numero"/></h3>
  <ul>
    <li><xsl:value-of select="nombre"/></li>
    <li><xsl:value-of select="telefono"/></li>
    <li><xsl:value-of select="email"/></li>
  </ul>
</div>
</xsl:for-each>

</body>
</html>
</xsl:template>
</xsl:stylesheet> 

La página obtenida con los archivos anteriores quedará como la del siguiente enlace.

personajes_2

El código nuevo o modificado lo hemos puesto resaltado en negrita.

Observa como dentro del bucle xsl:for-each los xsl:value-of se refieren a las etiquetas incluidas dentro de la etiqueta personaje, que es la que indicamos en el atributo select.

Otra ventaja de utilizar el bucle xsl:for-each es que podemos seguir añadiendo personajes en el documento XML sin tener que modificar el archivo SXL. Estos se añadirán a la página siempre que la etiqueta personaje tenga la misma estructura que las anteriores.

Sin embargo una página web puede tener algo más que texto, también contiene enlaces, imágenes y otros tipos de contenidos, En la pròxima página veremos cómo insertar enlaces e imágenes a la página XML.






En la próxima página veremos cómo insertar enlaces e imágenes en una página XML utilizando XSL.

Imagen y enlaces



Manual XML

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo