Dos primos luchan contra la tecnología

Aprendizaje y formación en informática profesional mediante videotutoriales

Introducción a XSLT

XSLT o EXtensible Stylesheet Language for Transformations es un lenguage de estilos que permite transformar un documento XML en otro documento XML o en otro tipo de documentos como HTML o XHTML.

Cada día se utiliza más XML para almacenar e intercambiar información por lo que es importante manejarse bien con este formato.

XSLT pertenece a la trilogía de XSL: XSLT, XPath y XSL-FO.

Las principales características que nos ofrece son:

  • Seleccionar solo los elementos o atributos que nos interesan.
  • Ordenar elementos.
  • Realizar comparaciones.
  • Establecer condiciones.

Así, partiendo de un único documento XML podemos obtener infinidad de documentos resultantes diferentes símplemente cambiando la hoja de estilos. Viene a ser como aplicar una hoja de estilos CSS a una página HTML para manipular la visualización pero en este caso lo que se manipula es la información.

Comencemos con un documento XML de ejemplo para poder hacer nuestras pruebas. Tomemos por ejemplo una base de datos para una tienda de pinturas donde registramos el color y el número de litros en almacén que llamaremos ‘pinturas.xml’:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl"
href="pinturas.xsl"?>
<almacen>
  <pintura>
    <color>rojo</color>
    <litros>20</litros>
  </pintura>
  <pintura>
    <color>azul</color>
    <litros>30</litros>
  </pintura>
  <pintura>
    <color>amarillo</color>
    <litros>18</litros>
  </pintura>
  <pintura>
    <color>verde</color>
    <litros>04</litros>
  </pintura>
</almacen>

En la segunda línea se ha incluido la referencia a la hoja de estilos. Ahora pasemos a los ejemplos. Podemos crear una hoja de estilos que nos muestre el listado de pinturas y los litros que quedan en un documento HTML:

<?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>
  <body>
    <h2>Pinturas en almacén:</h2>
    <table border="1">
      <tr bgcolor="#000000">
        <th style="color:white;">Color</th>
        <th style="color:white;">Litros</th>
      </tr>
      <xsl:for-each select="almacen/pintura">
      <tr>
        <td><xsl:value-of select="color"/></td>
        <td><xsl:value-of select="litros"/></td>
      </tr>
      </xsl:for-each>
    </table>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>

En la línea 3 vemos la instrucción <xsl:template match=”/”> que indica que la hoja de estilos se aplica a todo el documento. En este código hay que destacar el uso de la función <xsl:for-each> que nos permite seleccionar todos los elementos que coincidan con el valor que establecemos en select. De esta manera obtenemos todas las pinturas del almacén.

Puede que queramos un listado de pinturas ordenado por la cantidad de litros disponibles:

<?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>
  <body>
    <h2>Pinturas en almacén:</h2>
    <table border="1">
      <tr bgcolor="#000000">
        <th style="color:white;">Color</th>
        <th style="color:white;">Litros</th>
      </tr>
      <xsl:for-each select="almacen/pintura">
	  <xsl:sort select="litros"/>
      <tr>
        <td><xsl:value-of select="color"/></td>
        <td><xsl:value-of select="litros"/></td>
      </tr>
      </xsl:for-each>
    </table>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>

La instrucción <xsl:sort select=”litros”/> nos permite ordenar los elementos ‘pintura’ por su elemento ‘litros’ de menos a más. La ordenación es alfabética. Además de esto, puede que queramos que nos muestre los colores a los que les quedan menos de 10 litros. Podemos establecer condiciones de la siguiente manera:

<?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>
  <body>
    <h2>Pinturas en almacén:</h2>
    <table border="1">
      <tr bgcolor="#000000">
        <th style="color:white;">Color</th>
        <th style="color:white;">Litros</th>
      </tr>
      <xsl:for-each select="almacen/pintura">
      <tr>
	<xsl:if test="litros &lt; 10">
        <td><xsl:value-of select="color"/></td>
        <td><xsl:value-of select="litros"/></td>
	</xsl:if>
      </tr>
      </xsl:for-each>
    </table>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>

La instrucción <xsl:if test=”litros < 10″> permite filtrar aquellas pinturas que tienen menos de 10 litros. < equivale a < y > equivale a >. La igualdad se expresa con el signo =. Hay que cerrar siempre con un </xsl:if> La instrucción if no nos permite establecer un else u otras condiciones. Para ello debemos usar <xsl:choose>. Si queremos que nos muestre todo el catálogo pero destacando las pinturas con pocas existencias debemos usar la una instrucción condicional múltiple como <xsl:choose>

<?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>
  <body>
    <h2>Pinturas en almacén:</h2>
    <table border="1">
      <tr bgcolor="#000000">
        <th style="color:white;">Color</th>
        <th style="color:white;">Litros</th>
      </tr>
      <xsl:for-each select="almacen/pintura">
      <tr>
	<xsl:choose>
	<xsl:when test="litros &lt; 10">
	<td style="background-color:red;">
          <xsl:value-of select="color"/>
        </td>
	<td style="background-color:red;">
          <xsl:value-of select="litros"/></td>
	</xsl:when>
	<xsl:otherwise>
	<td><xsl:value-of select="color"/></td>
	<td><xsl:value-of select="litros"/></td>
	</xsl:otherwise>
	</xsl:choose>
      </tr>
      </xsl:for-each>
    </table>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>

Resumen de funciones:

<xsl:template match="/"> : Parte del documento a la que se aplica la plantilla.
<xsl:value-of select=""> : Obtener el valor de un elemento.
<xsl:for-each select=""> : Leer todos los elementos que coincidan con select.
<xsl:sort select=""> : Ordenar alfabéticamente todos los elementos que coincidan con select.
<xsl:if test=""> : Tomar elemento que cumpla la condición test.
<xsl:choose> : Condicional que actúa según varias condiciones test.
Si te ha gustado el artículo, no seas malo y ¡¡compartelo!! These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Facebook
  • MySpace
  • TwitThis
  • Google Bookmarks
  • Meneame
  • Technorati
  • BarraPunto

Otros artículos relacionados

13 Responses to “Introducción a XSLT”


  1. pablo

    el equivale a un IF-ELSE, se podria implementar un IF-ELSEIF-ELSE-IF-ELSE????

    Me parece haber leido que se podia generar un PDF mediante XSLT, es cierto??

    gracias, saludos pablo:D


  2. pablo

    hola de nuevo,
    he probado a ejecutar el documento XML con cada XSL y parece que explorer no me reconoce el


  3. pablo

    hola de nuevo,
    he probado a ejecutar el documento XML con cada XSL y parece que explorer no me reconoce el carater “


  4. pablo

    vaya tengo problemas con este “comentario”


  5. Ricardo

    Si has hecho un cortar-pegar con los ejemplos que he puesto es posible que no te funcione por las comillas. Wordpress me las camia automáticamente a “comillas inclinadas” en lugar de las comillas de Mayúsculas+2.
    Ábrelo en tu editor de texto y haz un reemplazar de las comillas inclinadas por las normales y vuelve a probar.
    Intentaré solucionar el problema para que se vean bien.


  6. Ricardo F

    Efectivamente, puedes crear documentos PDF con XSL mediante XSL:FO y FOP.
    En breve explicare cómo conseguirlo.


  7. pablo

    G5racias a los dos por vuetro interes(como siempre:D)

    a lo k me referia en el mensaje “que me daba problemas” es a que tengo problemas con el caracter > en la sentencia “if test”, ¿¿¿puede ser debido a que quite la codificacion?? Asi como tmbien me “protesta” por cualkier acento, es el mismo problema???

    Gracias por toda vuestra ayuda:D


  8. Ricardo F

    Ah, ya veo el error.
    El problema es que en el ejemplo pone &gt; pero el editor de wordpress me lo ha cambiado por su equivalente “>”.
    Lo que tienes que hacer es utilizar la entidad html &gt; o &lt; para hacer comparaciones.


  9. pablo

    gracias ricardo………probare a ver

    otra duda que tengo frecuentemente es el problema con las Ñs y los acentos en ficheros XML, creo k es algo debido a la codificacion pero no se muy bien cual es el problema, si le pongo la codificacion utf-8 sigue sin reconocerme acentos ni Ñs……………..como podria arreglarlo???

    muchas gracias rikardo:D…………saludos, ciao¡¡


  10. pablo

    en efecto ricardo, mi problema se debia a la etiqueta < en lugar de “


  11. pablo

    ya me lo cambio:S…….pero tu me entendiste verdad ricardo:D

    un saludo amigo…………xaui


  12. Ricardo F

    Te ha pasado lo mismo que me pasa a mi siempre :D .
    Lo de las ñ y acentos… el tema está en la codificación de caracteres. A ser posible, haz que la codificación sea igual en todas partes por ejemplo con UTF-8. En el xml pones el charset a utf-8 al igual que el la configuración de tu servidor web que por defecto debería servir las páginas en utf-8. En todos los documentos html especificar utf-8 en el meta. En la base de datos que almacene y devuelva los resultados en utf-8. Ah, y si usas un editor de texto, edita los archivos en utf-8 (Notepad++ permite elegir codificación por defecto).
    Si en algún sitio se te pasa establecer la codificación es posible ver caracteres raros.

    El tema está mejor explicado en este otro post:
    http://www.s3v-i.net/2007/05/08/codificacion-con-el-charset-utf-8-e-internacionalizacion-de-caracteres/

    Un saludo!


  13. fatima

    Oola!!! esta genial el post!!!!!, supero mis expectativas de una manera muy simple …ademas de entendible el ejemplo, me has salvado de hacer mal mi tarea, recomendare tu sitio, GRACIAS!!!!

Leave a Reply

Spam Protection by WP-SpamFree