Crear páginas con XML y XSL en el cliente

  • XML
Cómo pasar un documento XML a otro HTML sin necesidad de hacerlo del lado del servidor.
Los navegadores cada vez están más avanzados. Una característica que ya tienen desde hace años es la posibilidad de mostrarte gráficamente un fichero XML.

Vemos un fichero XML


Si queremos convertir ese documento a HTML, podemos, sin necesidad de crear ninguna rutina en el servidor, hacerlo.

Para ello podemos usar XSL (XML STyleSheet Language)

XSL es un tipo de documento XML (aplicación XML) que tiene un conjunto fijo de etiquetas usado para definir plantillas para maniñupar documentos XML y decidir como se desean mostrar.

Un documento XSL es un XML por lo que tendrá la etiqueta:

<?xml version="1.0" encoding="ISO-8859-1"?>

Para indicar que es una hoja XSL

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

Ahora intercalamos dentro de código HTML las etiquetas especiales para iterar

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

   <xsl:template match="/">
   <html>
      <body>
         <table border="1">
            <tr>
               <td><b>Nombre</b></td>
               <td><b>Mercado</b></td>
               <td><b>Precio</b></td>
               <td><b>Fecha</b></td>
            </tr>
         
            <xsl:for-each select="/cotizacion">
            <tr>
               <td><xsl:value-of select="nombre"/></td>
               <td><xsl:value-of select="mercado"/></td>
               <td><xsl:value-of select="precio"/></td>
               <td><xsl:value-of select="fecha/dia"/>-
               <xsl:value-of select="fecha/mes"/>-
               <xsl:value-of select="fecha/anio"/></td>
            </tr>
            </xsl:for-each>
         </table>
      </body>
   </html>
   </xsl:template>
</xsl:stylesheet>

Para decirle a un documento XML que XSL queremos utilizar solo tenemos que usar

<?xml-stylesheet type="text/xsl" href="oferta.xsl"?>

El resultado será:


Impresionante verdad

Bueno este es un ejercicio simple, vamos a complicarlo, introduciendo más cotizaciones y pidiendo que nos ordene la salida.

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="oferta.xsl"?>
   <fichero>
      <cotizacion>
         <nombre>Autentia</nombre>
         <mercado>Madrid</mercado>
         <precio>12</precio>
         <fecha>
            <dia>24</dia>
            <mes>04</mes>
            <anio>2003</anio>
         </fecha>
      </cotizacion>
      <cotizacion>
         <nombre>Acertia</nombre>
         <mercado>Madrid</mercado>
         <precio>21</precio>
         <fecha>
            <dia>23</dia>
            <mes>04</mes>
            <anio>2003</anio>
         </fecha>
      </cotizacion>
   </fichero>


Cambiamos el XSL

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

   <xsl:template match="/">
      <html>
         <body>
            <table border="1">
               <tr>
                  <td><b>Nombre</b></td>
                  <td><b>Mercado</b></td>
                  <td><b>Precio</b></td>
                  <td><b>Fecha</b></td>
               </tr>
               
               <xsl:for-each select="*/cotizacion" order-by="nombre">
               <tr>
                  <td><xsl:value-of select="nombre"/></td>
                  <td><xsl:value-of select="mercado"/></td>
                  <td><xsl:value-of select="precio"/></td>
                  <td><xsl:value-of select="fecha/dia"/>-
                  <xsl:value-of select="fecha/mes"/>-
                  <xsl:value-of select="fecha/anio"/></td>
               </tr>
               </xsl:for-each>
            </table>
         </body>
      </html>
   </xsl:template>
</xsl:stylesheet>

Y el resultado seria

Nombre Mercado Precio Fecha
Acertia Madrid 21 23- 04- 2003
Autentia Madrid 12 24- 04- 2003

Si queremos que sea ascendente o descendente

<xsl:for-each select="*/cotizacion" order-by="-nombre">

Ahora vamos a introducir condicionales

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="oferta.xsl"?>
   <fichero>
      <cotizacion>
         <nombre>Autentia</nombre>
         <mercado>Madrid</mercado>
         <precio>12</precio>
         <fecha>
            <dia>24</dia>
            <mes>04</mes>
            <anio>2003</anio>
         </fecha>
      </cotizacion>
      <cotizacion>
         <nombre>Acertia</nombre>
         <mercado>Madrid</mercado>
         <precio>21</precio>
         <fecha>
            <dia>23</dia>
            <mes>04</mes>
            <anio>2003</anio>
         </fecha>
      </cotizacion>
      <cotizacion>
         <nombre>AdictosAlTrabajo</nombre>
         <mercado>Barcelona</mercado>
         <precio>2</precio>
         <fecha>
            <dia>25</dia>
            <mes>04</mes>
            <anio>2003</anio>
         </fecha>
      </cotizacion>
   </fichero>

Modificamos en XSL

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

   <xsl:template match="/">
      <html>
         <body>
            <table border="1">
               <tr>
                  <td><b>Nombre</b></td>
                  <td><b>Mercado</b></td>
                  <td><b>Precio</b></td>
                  <td><b>Fecha</b></td>
               </tr>
               
               <xsl:for-each select="*/cotizacion" order-by="-nombre">
               <tr>
                  <td><xsl:value-of select="nombre"/></td>
                  
                  <td>
                  <xsl:if test="mercado[.='Barcelona']">
                  <b><xsl:value-of select="mercado"/></b>
                  </xsl:if>
                  
                  <xsl:if test="mercado[.='Madrid']">
                  <i><xsl:value-of select="mercado"/></i>
                  </xsl:if>
                  
                  </td>
                  <td>
                  <xsl:value-of select="precio"/>
                  </td>
                  <td><xsl:value-of select="fecha/dia"/>-
                  <xsl:value-of select="fecha/mes"/>-
                  <xsl:value-of select="fecha/anio"/></td>
               </tr>
               </xsl:for-each>
            </table>
         </body>
      </html>
   </xsl:template>
</xsl:stylesheet>


Así vemos el resultado

Nombre Mercado Precio Fecha
Autentia Madrid 12 24- 04- 2003
AdictosAlTrabajo Barcelona 2 25- 04- 2003
Acertia Madrid 21 23- 04- 2003

Hay veces que el código se complica por lo que hay que dividir una plantilla en varias secciones. Es algo parecido a las funciones dentro de plantillas XSL.

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

   <xsl:template match="/">
      <html>
         <body>
            <table border="1">
               <tr>
               <td><b>Nombre</b></td>
               <td><b>Mercado</b></td>
               <td><b>Precio</b></td>
               <td><b>Fecha</b></td>
            </tr>
            
            <xsl:for-each select="*/cotizacion" order-by="-nombre">
            <tr>
               <td><xsl:apply-templates select="nombre"/></td>
               
               <td><xsl:value-of select="mercado"/></td>
               <td>
               <xsl:value-of select="precio"/>
               </td>
               <td><xsl:value-of select="fecha/dia"/>-
               <xsl:value-of select="fecha/mes"/>-
               <xsl:value-of select="fecha/anio"/></td>
            </tr>
            </xsl:for-each>
            </table>
         </body>
      </html>
   </xsl:template>
   
   <xsl:template match="nombre">
   <b><xsl:value-of select="."/></b>
   </xsl:template>

</xsl:stylesheet>

Tened en cuenta que hemos generado un documento HTML a partir de un XML, pero poriamos haber generador cualquier otra salida: csv, rtf, wml, etc.

XSL da mucho más de si ..... ya lo veremos más adelante .... y uno de los aspectos más importantes, como encontrar los errores y depurar las transformaciones .....

Autor

Roberto Canales Mora

Director General de Autentia

Compartir

Comentarios

jose

30/9/2005
Como se puede hacer para poder procesar un xml que está en otro servidor con un xsl que está en mi servidor, dentro de un espacio de mi página web.

Me explico mejor, en una web con cabecera, barra de secciones, ... quisiera que en el cuerpo de la web (sin utilizar frames) poner la tabla del último ejemplo.

Gracias

alidaniel

03/10/2005
Saludos;

Muy buneo el articulo, pero solo me sirve en internet explorer. ¿Por que me da error de ejecución en Mozilla?

sergiov

06/10/2005
Hola.

Aplicando el ejemplo al principio solo me funciona en IE, y me daba error de parseo en Firefox, pero luego investigando un poco La manera correcta de declarar una hoja del estilo de XSL según la recomendación de W3C XSLT es:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Esto lo aplique al ejemplo dado y me funciona ahora correctamente en Firefox e IE, pero no así en Opera y Safari. A seguir investigando se a dicho
felicitaciones por el articulo muy bueno.

Saludos

esteban

25/4/2006
muy bueno, interesante y práctico el artículo. como la mayoría de los artículos de desarrolloweb. sigan así, felicitaciones

eder

04/12/2007
muy buen articulo yeahhhh

jose

08/9/2010
Ayuda
primero muy bueno el comentario amigo... me gustaria qe me ayudaras porfavor... soy de chile... tienes algun mail donde podamos contactarnos.. esta es mi duda!

Hola amigos estoy introducioendome en el tema de XML y XSL necesito su ayuda tengo el codigo xml completo de una pagina y necesito crearle un XSL para asi montarlo en sharepoint... porfavor necesito su ayuda amigos... me indicaron los colores todos los requeriemientos... solo necesito saber como hacerlo... porfavor ayuda gracias.

se que al principio el xsl se inicia asi

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

<?xml-stylesheet type="text/xsl" href="listaprocesos.xsl"?>

aca se le hace referencia al xml

pero nose mas me gustaria saber mas