
	Portada \| Monotemáticos \| Secciones \| Desarrolladores \| Comunidad \| Servicios \| Servicios profesionales \| RSS

	DesarrolloWeb.com > Manuales > Ayudas técnicas

Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades

Generador METAs | Compras | Busca cursos

Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Crear páginas con XML y XSL en el cliente

Cómo pasar un documento XML a otro HTML sin necesidad de hacerlo del lado del servidor.

29/9/05 - 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 .....

Seguir navegando a partir aquí:

+ 1 manual relacionado
+ 1 categoria relacionada
+ 5 comentarios no revisados

Autoría, licencia y acciones sobre este artículo

Informe de Roberto Canales Mora*
Director General de Autentia
URL: http://www.adictosaltrabajo.com

Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible del artículo
Enviar artículo por e-mail
Publicar un comentario del artículo

Manuales relacionados con este artículo

Dentro de Ayudas técnicas

Siguiente: Columnas, anchos de línea y legibilidad

Anterior: Envío de mesajes de correo electrónico mediante librerías JavaMail

< Indice de Ayudas técnicas

Categorias relacionadas

A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:

+ Entrar en XML

Comentarios sin revisar

Añadir un comentario del artículo
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Se han encontrado 5 comentarios sin revisar

Ver los comentarios no revisados
Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

Ir arriba

Manuales relacionados
+	Ayudas técnicas

Categorías
+	XML

Lectura recomendada

+ OPTIMIZACIóN DE SITIOS WEB

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

		DesarrolloWeb.com \| Copyright \| Anunciese \| Acerca de \| Datos legales \| Contacta \| Por GuiarteMultimedia

Alojamiento web