Estás en:

informaciónDESARROLLADO POR:
información Roberto Canales Mora
icono_twiter icono_linkedin icono_linkedin icono_xing

Creador y propietario de AdictosAlTrabajo.com, Director General de Autentia S.L., Ingeniero Técnico de Telecomunicaciones y Executive MBA por el Instituto de Empresa 2007. Twitter: @rcanalesmora

Autor del Libro: Informática profesional, las reglas no escritas para triunfar en la empresa

Puedes consultar mi CV y alguna de mis primeras aplicaciones (de los 90) aquí

Fecha de publicación del tutorial: 2003-06-11
Tutorial visitado 79.685 veces79.685
Descargar el tutorial en PDF


Regístrate para votar
Share |

Crear páginas con XML y XSL en el cliente

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 es 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 .....

 

Sobre el Autor ..

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con tu ayuda, podemos ofrecerte un mejor servicio.


(Sólo para usuarios registrados)

» Registrate y accede a esta y otras ventajas «

Comentarios

  1. asayen
    2009-09-07 - 09:26:14 PM

    cristian. cdo. haces un select en sql-server aplica al final FOR XML AUTO, o algo así busca en la ayuda. Esto te devolverá los registros en formato XMl para que los puedas tratar como tal. suerte.

  2. cristian
    2009-08-20 - 02:28:48 AM

    Hola soy Cristian de Chile tengo varias dudas con respecto a xml y xsl estoy trabajando con sql2005 la idea es que los datos de las tablas los pase a xml y a su vez estos xml aplicarle hojas de estilo Alguien que me ayude por favor mi msn es cleivamora@hotmail.com