Tutorial desarrollado por
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. Perfíl Technorati
Experto en formación en: Dirección de proyectos informáticos, análisis y diseño UML, arquitectura Web, patrones de diseño y JEE a todos los niveles.
Puedes consultar mi CV y alguna de mis primeras aplicaciones (de los 90) aquí
Catálogo de servicios de Autentia
Descargar en versión comic (17 MB)
AdictosAlTrabajo.com es el Web de difusión de conocimiento de Autentia.
Descargar este documento en formato PDF: xslt.pdf
Fecha de creación del tutorial: 2003-06-11
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 .....
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.
| Autor | Mensaje de usuario registrado |
|---|
| Autor | Mensaje de usuario anónimo |
|---|---|
| asayen |
Fecha de envío: 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. |
| cristian |
Fecha de envío: 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 |
- Puedes inscribirte en nuestro servicio de notificaciones haciendo clic aquí.
- Puedes firmar en nuestro libro de visitas haciendo clic aquí.
- Puedes asociarte al grupo AdictosAlTrabajo en XING haciendo clic aquí.
- Añadir a favoritos Technorati.
Esta obra está licenciada bajo licencia Creative Commons de
Reconocimiento-No comercial-Sin obras derivadas 2.5
Recuerda
Autentia te regala la mayoría del conocimiento aquí compartido (Ver todos los tutoriales). Somos expertos en: J2EE, Struts, JSF, C++, OOP, UML, UP, Patrones de diseño ... y muchas otras cosas.
¿Nos vas a tener en cuenta cuando necesites consultoría o formación en tu empresa?, ¿Vas a ser tan generoso con nosotros como lo tratamos de ser con vosotros?
Somos pocos, somos buenos, estamos motivados y nos gusta lo que hacemos ...
Autentia = Soporte a Desarrollo & Formación.
Tutoriales recomendados
| Nombre | Resumen | Visitas | Valoración | Votos | ||
|---|---|---|---|---|---|---|
| Cómo generar versiones imprimibles de páginas web | En este gran océano de textos, imágenes y enlaces que es Internet hay algunas cosas que merecen la pena ser impresas. Estoy seguro de que alguna vez has necesitado imprimir alguna página web y no has podido hacerlo directamente porque la impresión iba a q | 2010-02-08 | 148 | - | - |  |
| Transformación de mensajes en SOA con OpenESB | En este tutorial vamos a mostrar con un ejemplo práctico una de las capacidades esenciales de todo sistema de integración, y por tanto característica del Enterprise Service Bus de SOA: la tranformación de mensajes. | 2010-01-29 | 320 | - | - | |
| Cómo consumir un servicio web RESTful con el soporte de Ajax y JSON de jQuery. | En este tutorial vamos a seguir analizando cómo explotar las funcionalidades de jQuery. | 2010-01-18 | 528 | - | - | |
| jQuery: cómo crear nuestros propios plugins. | En este tutorial vamos a ver cómo crear un plugin para jQuery sencillo, para sentar las bases, y otro un poco más elaborado. | 2010-01-18 | 606 | - | - | |
| Introducción a jQuery UI. | En los tutoriales anteriores hemos hecho una introducción a jQuery y hemos visto cómo crear plugins para jQuery. Ahora se trata de seguir ampliando conocimientos, haciendo uso de una librería que se basa en la misma. | 2010-01-18 | 814 | - | - | |
| Introducción a jQuery. | jQuery es una librería javascript ligera, rápida y concisa que simplifica el tratamiento de documentos HTML, el manejo de eventos, la creación de animaciones y las interacciones vía Ajax, para agilizar el desarrollo de aplicaciones web. | 2010-01-18 | 830 | Bueno | 1 | |
| Patrones de diseño de XML Schema | En este tutorial vamos a analizar y mostrar con ejemplos los cuatro principales patrones de diseño de XML Schema: Russian Doll, Salami Slice, Venetian Blind y Garden of Eden. | 2010-01-07 | 757 | Muy bueno | 1 | |
| Contract-First web services con Visual Studio 2008 | Utilizaremos Visual Studio 2008 con el addin WSCF.blue para generar contract-first web services (servicios web dirigidos por contrato) | 2009-12-11 | 989 | - | - | |
| Alfresco - Añadiendo contenido desde nuestras aplicaciones Java | Tutorial sobre Alfresco, alternativa de código abierto para la gestión de contenido empresarial (ECM), que proporciona gestión documental, colaboración, gestión de registros, gestión de información, gestión del contenido web e imágenes. | 2009-11-23 | 1928 | - | - | |
| Alfresco - Modificando y eliminando contenido desde nuestras aplicaciones Java | Veremos como de una manera muy sencilla también se puede recuperar contenido de Alfresco desde nuestras aplicaciones Java | 2009-11-23 | 1298 | - | - | |
Nota:
Los tutoriales mostrados en este Web tienen como objetivo la difusión del conocimiento.
Los contenidos y comentarios de los tutoriales son responsabilidad de sus respectivos autores.
En algún caso se puede hacer referencia a marcas o nombres cuya propiedad y derechos es de sus respectivos dueños. Si algún afectado desea que incorporemos alguna reseña específica, no tiene más que solicitarlo.
Si alguien encuentra algún problema con la información publicada en este Web, rogamos que informe al administrador rcanales@adictosaltrabajo.com para su resolución.
