Introducción
Solicitando lo necesario a un Servidor Web
Construyendo un XSL
Ordenación a través de XSL
Enviando lo Necesario a un Servidor Web.
Conclusión

 

 

Introducción

 

Es muy necesario dar a nuestro cliente Web ciertas particularidades para que pueda trabajar con Datos de forma mas transparente y que ocasione menos dificultades al usuario final de nuestra aplicación. Esas dificultades se reflejan entre idas y vueltas al Servidor Web esto a su vez ocasiona que se envié y reciba información del estado de cada control dentro del Formulario Web (Web Form).

 

La idea principal de este articulo parte de “Solo enviar y recibir lo necesario desde un Servidor Web” y algo que un servidor Web entiende sin ningún problema es XML y ni hablar de .Net que expone diferentes formas de trabajar con XML. Pero ante esta idea que suena grandiosa nos tropezamos con la realidad de que tenemos un cliente que nos ayuda poco para tener Aplicaciones Web que corran de esta forma.

 

Tanto XML junto con XSL trabajado desde un cliente se pueden hacer muchas cosas interesantes sin necesidad de tener mucho código en el cliente. Para los ejemplos de este artículo empleamos Visual Studio 2003, SQL Server 2000, IIS y SMTP y claro MSXML

 

Solicitando lo necesario a un Servidor Web.

Para esto necesitamos a nuestro fiel amigo javascript (aunque a veces no lo es) y con ello accediendo a un ActiveX llamando MSXML2.DOMDocument, con ese objeto podemos traer desde el Servidor Web algún contenido en XML.

 

Figura 1

 

XMLData es el nombre de nuestra variable hace uso del método “load” que se encargar de traer con contenido XML desde la pagina getData.aspx y claro pasando ciertos parámetros que luego se podrían utilizar para ciertos propósitos en el Servidor Web. En este ejemplo hay cierto código referenciado para transformaciones y XSL entenderemos que significa esto mas adelante.

En el Servidor Web debemos de recuperar esa petición y hacer las cosas que deseemos:

 

Figura 2

 

Para los puristas, sí, esta es la forma más arcaica de conectarse a una Base de Datos, pero para la comprensión del ejemplo este código sirve.

 

Construyendo un XSL

 

XSL (extensible stylesheet language ) es la alternativa mas convincente de cambiar formato de presentación, claro también se puede usar de otros modos como por ejemplo reorganizar un XML o construir archivos especializados como Excel, PDF, etc. a través de Formating Objects (FO). Lo interesante del XSL es que podemos utilizarlo también en el cliente para hacer las cosas que queramos en cuanto a presentación y/o estructura de los datos, las siguiente líneas muestran un archivo XSL sencillo.

 

<? xml version =”1.0” encoding =”utf-8”?>

< xsl:stylesheet version =”1.0” xmlns : xsl =”http://www.w3.org/1999/xsl/transform” >

   < xsl:template match =”/”>

                < div id=”tabdata” style =”overflow:auto” align=”center”>

                   < table border=”1” width =”400px”>

                                < tr>

                                   < td width=”50”>< a href=”javascript:sortby(‘id’)”> ID</a ></td >

                                   < td width=”300”>< a  href=”javascript:sortby(‘nombre’)”> Nombre</a ></td >

                                   < td width=”50”>< a  href=”javascript:sortby(‘precio’)”> Precio</a ></td >

                                </ tr>

                                < xsl:call-template name=”table”/>

                   </ table>

                </ div>

   </ xsl:template>

   < xsl:template name =”table”>

                < xsl:for-each select=”newdataset/categories”>

                   < tr>

                                < td>< xsl:value-of select=”productid” /></ td>

                                < td>< xsl:value-of select=”productname” /></ td>

                                < td>< xsl:value-of select=”unitprice” /></ td>

                   </ tr>

                </ xsl:for-each>

   </ xsl:template>

</ xsl:stylesheet >

 

 

 

XSL define ciertas sentencias que nos felicitan las cosas al momento de programar. El código citado unido con un XML podría formar cierto contenido luego de aplicarse una transformación, para el ejemplo el resultado de esta unión será un fragmento HTML que luego se visualizará en nuestra página. En la Figura 1 se muestra como realizar esa transformación basado en un XSL, con ello ya tenemos un resultado en nuestro cliente Web, ya logramos visualizar la data simulando una pequeña grilla.

 

            XMLData.load("getData.aspx?CategoryID="+valor);

            sConvert = XMLData.transformNode(XSLData);

            window.gridXSL.innerHTML = sConvert;

 

 

 

Ordenación a través de XSL

 

Como ya estamos comentando el XSL nos da muchas ventajas para manipular la data y su estructura si se deseara, en este caso veremos como hacer ordenamientos en un XSL y como poder hacer que esos cambios se reflejen en la presentación de los datos en nuestro cliente Web.

 

<? xml version ="1.0" encoding ="utf-8"?>

< xsl:stylesheet version ="1.0" xmlns : xsl ="http://www.w3.org/1999/xsl/transform" xmlns : fo ="http://www.w3.org/1999/xsl/format">

       < xsl:template match="/">

              < newdataset>

                     < xsl:call-template name="table"/>

              </ newdataset>

       </ xsl:template>

       < xsl:template name="table">

              < xsl:for-each select="newdataset/categories">

                     < xsl:sort data-type="number" order ="ascending" select="productid"/>

                     < categories>

                           < productid>

                                  <xsl:value-of select ="productid"/>

                           </ productid>

                           < productname>

                                  <xsl:value-of select ="productname"/>

                           </ productname>

                           < unitprice>

                                  <xsl:value-of select ="unitprice"/>

                           </ unitprice>

                     </ categories>

              </ xsl:for-each>

       </ xsl:template>

</ xsl:stylesheet >

 

Aplicando xsl:sort se puede hacer ordenamiento, en este caso se genera nuevamente el XML partiendo del nuevo orden seleccionado.

Vale resaltar que cuando trabajamos una aplicación que no sea como cliente web podemos obviar la sentencia xsl:for-each dependiendo de cual sea el caso donde lo apliquemos, esto es debido a que en esta ocasión estamos empleando la versión 1.0 de XSL, es decir, esta versión es soportada por JavaScript;  a diferencian que cuando trabajamos en un entorno de .Net Framework se usa la versión 2.0 de XSL preferiblemente.

 

Ahora para utilizar el ordenamiento aplicado debemos ordenar o crear un nuevo documento XML con el orden indicado. El código siguiente hace el llamado al XSL a través de Javascript:

 

Figura 3

 

 

Enviando lo Necesario a un Servidor Web.

 

Luego que ya tenemos las cosas necesarias en el Cliente podemos hacer el envió de Datos al Servidor Web (dije solo “Envío de Datos” no envío de toda la página) porque solamente los datos a través del ActiveX MSXML2.XMLHTTP serán enviados Servidor. La forma de hacer esto es sencilla:

 

Figura 4

 

El contenido es  enviado a través de “poster.send(window.gridXSL.innetHTML)” si bien es cierto es HTML pero que respeta una buena estructura XML que es lo que acepta este método.

 

En el lado del Servidor es necesario recuperar estos datos enviados y para ello ultimamos un objeto StreamReader para obtener la información enviada.

 

 

      StreamReader read = new streamreader(request.inputstream);

      string sBody = read.ReadToEnd();

Mediante el código anterior logramos obtener los Datos que vienen desde el Cliente, ahora veamos una de las utilidades de utilizar esta técnica mediante XSL, enviaremos un correo electrónico a la persona que deseemos como si fuese un reporte que fue solicitado en determinado orden o bajo determinada presentación.

 

Listado de Código:

private void Page_Load(object sender, system.eventargs e)

{

      StreamReader read = new StreamReader(Request.InputStream);

      string sBody = read.ReadToEnd();

      MailMessage msg = new MailMessage();

      msg.From = "[email protected]";

      msg.To = "[email protected]";

      msg.Subject = "HTML Generado";

      msg.BodyFormat = MailFormat.Html;

      msg.Body = sBody;

      SmtpMail.SmtpServer = "smtp.speedy.com.pe";

      SmtpMail.Send(msg);

}

 

 

Conclusión

 

Tanto XML como XSL pueden ayudarnos a construir aplicaciones más ricas en el lado del cliente, pero claro todo exceso no es bueno, dependiendo de cual fuese el caso en que desarrollamos esta técnica es una alternativa para el desarrollo de nuestras Aplicaciones Web, dependiendo de la arquitectura por la que optemos. Pero ante todo esto existe mas cosas para manipular XSL como por ejemplo como controlar el paso de los parámetros o por ejemplo como construir una grilla más compleja solo en el lado del cliente.

Espacios de nombres usados en el código de este artículo:

System.Data
System.XML
System.IO
 

Fichero con el código de ejemplo: carlosanampa_XSLGrid.zip - 17 KB