Blog de Luis

26 Abril 2009

HTML a partir de XML con transformacion de XSL

Archivado en: HTML — elluisito @ 2:56 PM

HTML a partir de XML con transformacion de XSL

Introducion

Una vez leido y configurado lo relacionado con XML, fuinalmente se vera un ejemplo practico de todo lo explciado hasta aqui.

Generacion de archivos

1. Cree un documento XML llamado tienda.xml  asi:

<?xml version=”1.0″ encoding=’ISO-8859-1′?>
<?xml-stylesheet href=”tienda.xsl” type=”text/xsl”?>
<tienda>
<nombre>La tiendecilla </nombre>
<telefono>953 87 12 23 </telefono>
</tienda>

2. Cree un documento XSL llamado tienda.xsl asi:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
<xsl:template match=’/'>
<html>
<head>
<title>Generado con tienda-html.xsl</title>
</head>
<body>
<h1><xsl:value-of select=’tienda’ /></h1>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Explicacion de codigos

Para empezar, el código del documento XML contiene una etiqueta, tienda, que incluye otras dos etiquetas, nombre y telefono, que contienen el texto que queremos que aparezca en la página web. En el resto, la primera línea simplemente describe que el resto del documento es XML, y asocia la hoja de estilo XSLT (tienda.xsl) al documento. Esta segunda línea se usa en entornos de publicación tales como el cocoon; algunos procesadores de XSLT la usan para tomar el nombre de la hoja de estilo que se va a usar; también lo suelen usar navegadores como el Mozilla/Netscape/Firefox o el Internet Explorer. Cada una de estas etiquetas se denominan elementos; y en principio, un documento puede tener tantas etiquetas como queramos.

El XML original, como se ve, es simplemente XML bien formado, no usa un DTD ni lo necesita: basta con que haya una etiqueta raíz (tienda, en nuestro caso), las etiquetas estén emparejadas correctamente y los atributos entre comillas. Diferentes documentos XML podrían ser procesados con la misma hoja de estilo, y darían diferente resultado. Ahora mismo, tal como está, un documento XML tiene asociada una sola hoja de estilo XSLT, y para ese viaje no hacen falta alforjas, salvo por el hecho de que muchos documentos XML pueden tener la misma hoja XSL y de esa forma mantener una apariencia común. También se verá más adelante la forma de que el procesador XSLT seleccione diferentes hojas XSLT dependiendo de las circunstancias (principalmente, el cliente).

La primera hoja de estilo con la que nos enfrentamos es relativamente simple. El “esqueleto” es un documento HTML normal, al cual tenemos que añadir “contenido dinámico”, es decir, contenido generado a partir del XML original. Para hacernos una idea, en este caso simple, una hoja XSLT es como una plantilla sobre la que se cambian los contenidos por sus valores al aplicarla. En realidad, tendríamos que pensar en una hoja XSLT con en un jardinero que va podando árboles, partiendo de la raíz. Al llegar a una rama, hace algo con ella: la poda, inserta otra cosa, o simplemente la deja tal cual; el árbol, en este caso, es realmente el árbol DOM del documento XML que está tratando.

Para empezar, se incluyen una serie de instrucciones, de la línea 1 a la 3:  no son instrucciones en sí, sino que modifican el aspecto de la salida. La primera declara el documento XML y el tipo de codificación (ISO-8859-1 si se incluyen acentos y demás caracteres idiosincráticos) y la segunda es la etiqueta raíz de la hoja de estilo (cerrada en la última línea; recordemos que una hoja de estilo XSL es también un documento XML y por tanto tiene que seguir todas sus convenciones), que declara la versión de XSLT que se está usando y el espacio de nombres (namespace) que vamos a usar, es decir, el prefijo que usarán todas las instrucciones propias de XSLT; en este caso, usamos xsl, pero cambiando esta instrucción podríamos usar otro cualquiera.

Ese esqueleto está organizado en “templates”, que son partes de la hoja que se “disparan” cuando encuentran una etiqueta que corresponda a lo que hay en su atributo match. El primer y único template comienza en la línea 3, y, en este caso, el template que corresponde a la etiqueta raíz genera un esqueleto de página HTML. La “orden” en la línea 7 cede el control a los otros templates, es decir, trata de aplicar todos los demás templates que haya en el documento, incluyendo el resultado de aplicarlos precisamente en ese punto (es decir, entre las etiquetas h1. En este caso no hay más templates, salvo los llamados los templates por defecto, que lo único que hacen es incluir el contenido de las etiquetas en el documento de salida. Es decir, en la práctica lo que hemos hecho es decirle dónde tiene que incluir en el esqueleto los valores del documento original, sin procesarlos más.

La orden <xsl:value-of select=’tienda’ /> incluye el contenido de la etiqueta tienda (y todas las que descienden de ella).

Generacion de archivos mas complejos

1. tienda1.xml

<?xml version=”1.0″ encoding=’ISO-8859-1′?>
<?xml-stylesheet href=”tienda1.xsl” type=”text/xsl”?>
<tienda>
<nombre>La tiendecilla</nombre>
<telefono>953 87 12 23</telefono>
<producto>
<codigo>92  </codigo>
<cantidad>10  </cantidad>
<articulo>Radio-Casette  </articulo>
</producto>
<producto>
<codigo>103  </codigo>
<cantidad>50  </cantidad>
<articulo>Reloj Cocina  </articulo>
</producto>
<producto>
<codigo>1312  </codigo>
<cantidad>3  </cantidad>
<articulo>Sofá  </articulo>
</producto>
</tienda>

2. tienda1.xsl

<?xml version=”1.0″ encoding=”UTF-8″?>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
<xsl:template match=’/'>
<html>
<xsl:apply-templates />
</html>
</xsl:template>
<xsl:template match=’tienda’>
<head><title><xsl:value-of select=’nombre’ /> (Generado por tienda1-html.xsl)</title></head>
<body>
<h1><xsl:value-of select=’nombre’ /> </h1>
<h2>Teléfono: <xsl:value-of select=’telefono’ /> </h2>
<h2>Nuestros mejores productos </h2>
<table>
<tr><th>Código</th><th>Existencias</th><th>Artículo</th></tr>
<xsl:apply-templates select=’producto’ />
</table>
</body>
</xsl:template>
<xsl:template match=’producto’>
<tr><xsl:apply-templates /></tr>
</xsl:template>
<xsl:template match=’codigo|cantidad|articulo’>
<td><xsl:apply-templates /></td>
</xsl:template>
</xsl:stylesheet>


Blog de WordPress.com.