Tag Archives: xslt

Tecnología

Convertir XML a XHTML con javascript

Leave a comment

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

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 se pueden lograr manipulaciones rápidas de información. XSLT cuenta con más etiquetas, ejemplos de su uso pueden encontrarse en el sitio de w3schools