XML es un lenguaje para esructurar datos que puede emplearse en la web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 62
Visitas el mes pasado: 186
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
El lenguaje XSL se encarga de dar estilo a los documentos XML. Este lenguaje transforma el documento de entrada o XML en otro documento de salida con otro formato. Aquí veremos concretamente como transformar un documento XML en otro HTML con el mismo contenido, mediante XSL.
Aunque XSL es otro tipo de lenguaje, aquí veremos sólamente lo imprescindible para transformar un documento XML en otro HTML, dejando para otro manual las posibilidades de XSL.
En el documento XML, después de la primera declaración, crearemos un link al archivo XSL, de la siguiente manera:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet type="text/xsl" href="nombre_archivo.xsl"?>
Hemos añadido una línea que enlaza el archivo con el archivo XSL. El valor del atributo href lo cambiaremos por la ruta hacia el archivo XSL. El archivo XSL, lo guardaremos con la extensión ".xsl", aquí le llamaremos ejemplo.xsl y las primeras líneas serán siempre las mismas:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<!-- contenido del documento -->
</xsl:template>
</xsl:stylesheet>
Las tres primeras líneas son el principio del documento. El único cambio que tenemos que hacer aquí es cambiar el valor del atributo match (en la tercera línea) por el nombre que le demos a la etiqueta principal en XML (la etiqueta que engloba a todas las demás).
Por otra parte el documento XSL terminará siempre con las dos lineas finales que hemos puesto, las cuales cierran las etiquetas de inicio. Entre medio pondremos el contenido del documento XSL.
Una vez que ya sabemos cómo hacer la cabecera y el final del documento, vamos a seguir la explicación mediante un ejemplo.
Empezamos por construir un archivo XML. Nuestro archivo consistirá en una agenda de personajes ficticios de tebeo. Empezamos por poner el primer personaje:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet type="text/xsl" href="ejemplo.xsl"?> <agenda_tebeo> <personaje numero="1"> <nombre>Mortadelo</nombre> <telefono>666555444</telefono> <email>mortadelo@tia.com</email> </personaje> </agenda_tebeo>
Este es el archivo XML que iremos ampliandolo más adelante. Ahora veamos cómo ver este archivo en el navegador.
La hoja de estilos XSL consistirá en una especie de plantilla del documento HTML que queremos ver en el navegador, a la que le iremos diciendo en cada momento dónde poner los elementos del documento XML. Veamos el archivo XSL y luego lo comentamos:
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="agenda_tebeo"> <html> <head> <title>Agenda Tebeo</title> </head> <body> <h1>Agenda de tebeo</h1> <div class="personaje"> <h3>contacto número: <xsl:value-of select="personaje/@numero"/></h3> <ul> <li><xsl:value-of select="personaje/nombre"/></li> <li><xsl:value-of select="personaje/telefono"/></li> <li><xsl:value-of select="personaje/email"/></li> </ul> </div> </body> </html> </xsl:template> </xsl:stylesheet>
Antes de seguir con la explicación veamos como queda la página XML. Lo vemos en el siguiente enlace:
El contenido de la página XSL consiste en una página web en HTML (o mejor dicho en XHTML) en la que los valores que queremos tomar del documento XML los insertamos mediante la etiqueta:
<xsl:value-of select=""/>
Los valores del atributo select indican el texto que debe insertarse en esa etiqueta, y se corresponden con las etiquetas y atributos del archivo XML. Se toma como origen el elemento raiz (aquí la etiqueta agenda_tebeo) y a partir de ahí se sigue la ruta para llegar al elemento que quiere mostrarse (poniendo el nombre de las etiquetas separadas por el signo / ). Para mostrar el valor de un atributo se pone el signo arroba @ delante del nombre del atributo.
Sin embargo una agenda no consta de un sólo personaje, por lo que añadiremos más personajes a la agenda. para empezar modificamos el documento XML y lo dejamos así:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet type="text/xsl" href="ejemplo.xsl"?> <agenda_tebeo> <personaje numero="1"> <nombre>Mortadelo</nombre> <telefono>666555444</telefono> <email>mortadelo@tia.com</email> </personaje> <personaje numero="2"> <nombre>Filemon Pi</nombre> <telefono>665544332</telefono> <email>filemon@tia.com</email> </personaje> <personaje numero="3"> <nombre>Superintendente Vicente</nombre> <telefono>678901234</telefono> <email>supervicen@tia.com</email> </personaje> </agenda_tebeo>
Ahora debemos modificar el archivo XSL para que en la página web se incluyan los otros personajes incorporados.
Podríamos incorporar más código al archivo XSL de forma que incorpore uno a uno todos los personajes. Eso supondría que cada vez que incorporamos un nuevo personaje tenemos que modificar el código del XSL.
Sin embargo el XSL dispone de un mecanismo tipo bucle que hace que una serie de etiquetas iguales se puedan ver con poner sólo una vez el código. Esta es la etiqueta:
<xsl:for-each select="etiqueta_XML"> ... </xsl:for-each>
El código comprendido entre las etiquetas de apertura y cierre se repetirá tantas veces como se repita la etiqueta indicada en select.
Dentro del bucle la etiqueta indicada en select se convierte en etiqueta raíz por lo que sólo podremos hacer referencia a etiquetas que sean hijas de ésta.
Veamos cómo usarlo en el ejemplo anterior, modificando el documento XSL:
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="agenda_tebeo"> <html> <head> <title>Agenda tebeo</title> </head> <body> <h1>Agenda de tebeo</h1> <xsl:for-each select="personaje"> <div class="personaje"> <h3>Personaje número: <xsl:value-of select="@numero"/></h3> <ul> <li><xsl:value-of select="nombre"/></li> <li><xsl:value-of select="telefono"/></li> <li><xsl:value-of select="email"/></li> </ul> </div> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
La página obtenida con los archivos anteriores quedará como la del siguiente enlace.
El código nuevo o modificado lo hemos puesto resaltado en negrita.
Observa como dentro del bucle xsl:for-each los xsl:value-of se refieren a las etiquetas incluidas dentro de la etiqueta personaje, que es la que indicamos en el atributo select.
Otra ventaja de utilizar el bucle xsl:for-each es que podemos seguir añadiendo personajes en el documento XML sin tener que modificar el archivo SXL. Estos se añadirán a la página siempre que la etiqueta personaje tenga la misma estructura que las anteriores.
Sin embargo una página web puede tener algo más que texto, también contiene enlaces, imágenes y otros tipos de contenidos, En la pròxima página veremos cómo insertar enlaces e imágenes a la página XML.
En la próxima página veremos cómo insertar enlaces e imágenes en una página XML utilizando XSL.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com