Una funcionalidad común requerida en sitios web es pasar la información recibida de un API, web service, o nuestra propia aplicación de formato XML a XHTML, es decir, transformar los datos a la interfaz gráfica para mostrarlos al usuario.
Para tal efecto es posible utilizar XSLT que es un Transformador XSL para convertir documentos XML a otros formatos. XSLT es un estándar de la W3C donde se puede ver la especificación completa.
Lo necesario
- El XML con los datos. Para el ejemplo se utilizará el public timeline de Twitter que se obtiene de http://api.twitter.com/1/statuses/public_timeline.xml
- El Template o XSL Style Sheet
- Código de javascript para aplicar el template al XML
Procedimiento
El trabajo está en su mayor parte en preparar el template que indicará como se va a formar el XHTML deseado.
Vamos a crear un archivo nuevo en un editor de texto, se llamará template.xsl y contendrá lo siguiente:
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <div id="timeline"> <xsl:for-each select="statuses/status"> <div class="status"> <h3><xsl:value-of select="user/name"/></h3> <p><xsl:value-of select="text"/></p> </div> </xsl:for-each> </div> </xsl:template> </xsl:stylesheet>
El encabezado es el estándar recomendado por W3C.
El atributo match de la etiqueta xsl:template indica que se recorrerá el XML a partir de la raíz.
Al aplicar el template se generará un div de id ‘timeline’ que contendrá un subdiv por cada tweet del XML que en este caso son 20 por tratarse de la llamada simple al API.
El javascript necesario para aplicar el template es el siguiente
<script type="text/javascript"> var xsl; var xml; $(document).ready(function(){ $.get("template.xsl", function(xslFile){ //asigna la variable local a la global para utilizarla en el callback del segundo get xsl = xslFile; $.get("http://api.twitter.com/1/statuses/public_timeline.xml", function(xmlTwitter){ if (window.ActiveXObject) { ex=xmlTwitter.transformNode(xsl); $("body").append(ex); } // code para Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument) { xsltProcessor=new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xmlTwitter,document); $("body").append(resultDocument); } }, "xml"); }, "xml"); }); </script>
Se obtiene el XSL y el XML, luego se valida para determinar el navegador en que se está ejecutando el script.
Al XML se le aplica la transformación y el resultado se agrega a la página.
Gracias a etiquetas como
entonces voy a empezar con los libros que no he leído pero que me llaman la atención leer con una breve reseña del porque me gustaría leerlo.