Documento XML con XSL utilizado en Navegadores

(Anterior) XML: El navegador en el futuro

Vea esta aplicación en Acción.

Secuencia de Acontecimientos:

Al realizarse una requisición se envía la información en un documento XML puro hacia el navegador, el siguiente fragmento demuestra un documento de este tipo:


<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="nombre_trans.xsl"?>

<lista>

<usuario> 
    <nombre>Juan Espinoza</nombre>
    <pais>México</pais> 
    <departamento>Sistemas</departamento>
</usuario> 

<usuario> 
    <nombre>Alberto Mancera</nombre>
    <pais>España</pais> 
    <departamento>Ventas</departamento>
</usuario> 

</lista>

La primer linea de este documento le indica al navegador que se trata de un documento XML.
El renglón que inicia con xsl-stylesheet le indica al "Browser" la hoja de estilo ("XSL Stylesheet") que será utilizada para transformar el documento XML en cuestión, en este caso la hoja de estilo es llamada nombre_trans.xsl.
Posteriormente es declarada la información en XML a ser transformada por XSL.

Además del documento XML que es enviado al navegador, la declaración anterior hace que la hoja de estilo ("XSL Stylesheet") (nombre_trans.xsl) sea descargada automáticamente, dicho documento posee la siguiente forma:

 
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

	<xsl:output method="html"/>

	<xsl:template match="/">
	    <html>
	       <head> 
	         <title>Usuarios </title> 
	       </head> 
            <body> 
            <h1 align="center"> Lista de Usuarios </h1>
            <hr/>

	<xsl:apply-templates/>

            </body>
	    </html>

       </xsl:template> 


   <xsl:template match="lista">
              <xsl:apply-templates/> 
             <hr/> 
             <h5 align="right">©2000-2004 Osmosis Latina </h5> 
   </xsl:template>

   <xsl:template match="usuario"> 
           <table align="center" border="5" cellpadding="5" cellspacing="5">
             <xsl:apply-templates/> 
           </table>  
           <br/>
   </xsl:template> 


   <xsl:template match="nombre">
             <tr>
                 <th> Nombre </th>
                 <td align="center"> <xsl:value-of select="."/> </td> 
             </tr> 
   </xsl:template>


   <xsl:template match="pais">
             <tr>
                 <th> Pais </th>
                 <td align="center"> <xsl:value-of select="."/> </td> 
             </tr> 
   </xsl:template>

   <xsl:template match="departamento">
             <tr>
                 <th> Departamento </th>
                 <td align="center"> <xsl:value-of select="."/> </td> 
             </tr> 
   </xsl:template>

 </xsl:stylesheet>

Las primeras dos lineas le indican al "Browser" que se trata de un documento XSL.
El primer elemento <xsl:output method="html"/> le indica al Navegador que el resultado de la transformación será un documento HTML.
<xsl:template match="/"> indica que al ser encontrado el elemento raíz del documento sea generada la secuencia indicada hasta donde sea encontrado el elemento <xsl:apply-templates/> .
Al ejecutarse <xsl:apply-templates/> se realiza una búsqueda por los elementos anidados dentro del elemento raíz.
En este caso el elemento que continua (lista) también posee un <xsl:apply-templates/> lo cual implica otra búsqueda por elementos anidados, que correspondería al Tag usuario.
Al invocarse el template del elemento usuario se genera la secuencia HTML presente y se re-invoca <xsl:apply-templates/> que recae ahora sobre el elemento nombre.

Dentro del template del Tag nombre además de generarse la secuencia HTML, se invoca <xsl:value-of select="."/> lo cual indica que debe ser extraído el texto del documento XML encontrado en el elemento, en este caso nombre; debido a que no se encuentra una declaración de <xsl:apply-templates/> se regresa el control hacia el elemento de invocación (usuario).
Una vez regresado el control al template llamado usuario, se continua la búsqueda por elementos anidados, en este caso resulta el elemento <pais>, sobre el cual se aplica su respectivo template.
El proceso anterior continua por el resto de los elementos hasta que sea regresado el control al template raíz y éste ya no encuentre elementos anidados.

El documento final ya transformado sería el siguiente:

<html>
    <head> 
       <title>Usuarios </title> 
    </head> 
<body> 
    <h1 align="center"> Lista de Usuarios </h1>
    <hr/>

           <table align="center" border="5" cellpadding="5" cellspacing="5">
             <tr>
                 <th> Nombre </th>
                 <td align="center"> Juan Espinoza </td> 
             </tr> 
             <tr>
                 <th> Pais </th>
                 <td align="center"> México </td> 
             </tr> 
             <tr>
                 <th> Departamento </th>
                 <td align="center"> Sistemas </td> 
             </tr> 
           </table>  
           <br/>


           <table align="center" border="5" cellpadding="5" cellspacing="5">
             <tr>
                 <th> Nombre </th>
                 <td align="center"> Alberto Mancera </td> 
             </tr> 
             <tr>
                 <th> Pais </th>
                 <td align="center"> España </td> 
             </tr> 
             <tr>
                 <th> Departamento </th>
                 <td align="center"> Ventas </td> 
             </tr> 
           </table>  
           <br/>

    <hr/> 
    <h5 align="right">©2000-2004 Osmosis Latina </h5> 
</body>

</html>

[Cerrar Ventana]