unijimpe

Hemos comentado anteriormente que Adobe lanzo Adobe Spry (actualmente en la versión 1.2) una librería para implementar AJAX de manera sencilla y con claridad en el código fuente. La idea básica para el funcionamiento del Spry es que la información dinámica deberá estar en un archivo XML y luego esta data la podemos incluir en un HTML utilizando Spry, es decir Spry permite incluir contenido XML en nuestras páginas HTML.

En nuestro ejemplo utilizaremos como XML el RSS de este blog. Veamos la estructura de nuestro XML por que nos va a servir para el desarrollo.

[xml]


http://blog.unijimpe.net
ActionScript, PHP, ASP, ASP.NET, MySQL, SQL Server…
Tue, 08 Aug 2006 01:14:24 +0000 http://wordpress.org/?v=2.0.2
en

…


[/xml]

Primero que nada hay que incluir dos archivos javascript (xpath.js y SpryData.js)que contienen las funciones necesarias para el funcionamiento de Spry, en nuestro ejemplo el código sería:

<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>

Ahora bien, para obtener la información debemos hacer una referencia a la información que vamos a manejas, esto se llama un DataSet, esto es una variable que contiene una referencia al XML que vamos a leer.

Ahora cuando definimos un dataSet utilizamos la función Spry.Data.XMLDataSet el cual requiere dos parametros, el primero de ellos es el url del XML que vamos a leer, y el segundo parametro es el path del nodo al cual vamos a acceder, es decir que nuestro XML puede ser muy complejo y con esto se especifica a partir de que nodo vamos a leer, si observamos nuestro XML al estar en /rss/channel tenemos acceso inmediato a title, link, description, etc.

<script type="text/javascript">
var urlRSS = "http://blog.unijimpe.net/?feed=rss2";
var dsRSS = new Spry.Data.XMLDataSet(urlRSS, "/rss/channel");
</script>

Listo a partir de este momento tenemos acceso a los datos de nuestro xml, para ello hay dos formas de acceder a los datos. En donde se tiene que dsName es el nombre del dataset , dsColumn es el nombre de la propiedad o atributo al que se quiere acceder.

• {dsName::@dsColumn}: para cuando se quiere acceder a la propiedad del nodo.
• {dsName::dsColumn}: para cuando se desea acceder al atributo de un nodo.

El siguiente paso es conocer como escribir los datos, para ello se brinda diferentes tags html para realizar estas operaciones, entre las cuales tenemos:

• spry:region: esto definirá una región HTML dinámica la cual nos permitirá escribir dentro de ella los datos de nuestro dataset.
• spry:repeat: esto define una región repetitiva el cual creará dinámicamente regiones que se repetirán segun la cantidad de nodos que se tenga en el XML.
• spry:repeatchildren: Semejante al anterior con la diferencia que se repetirán los tags hijos al que se aplica.

Entonces hagamos uso de estos tags para escribir los datos como titulo, url y la descripción del blog listado en el XML.

<div spry:region="dsRSS">
<a href="{dsRSS::link}">{dsRSS::title}</a><br />
{dsRSS::description}
</div>

Observamos que hemos definido una región y dentro de ella hemos escrito los datos, como en este caso se tiene una sola región podemos obviar el nombre del dataset al momento de escribir las columnas del XML, con lo cual tenemos el siguiente código equivalente.

<div spry:region="dsRSS">
<a href="{link}">{title}</a><br />
{description}
</div>

Puedes ver el resultado en: http://samples.unijimpe.net/rss1.html
Ahora si deseamos leer los datos de cada post del XML, debemos hacer un nuevo dataset, de la siguiente manera.

<script type="text/javascript">
var urlRSS = "http://blog.unijimpe.net/?feed=rss2";
var dsRSS = new Spry.Data.XMLDataSet(urlRSS,"/rss/channel");
var dsRXX = new Spry.Data.XMLDataSet(urlRSS,"/rss/channel/item");
</script>

Luego escribimos los datos de los posts. Como ahora tenemos dos dataset, estos se pueden asignar a una sola región utilizando un espacio entre cada nombre de dataset. Luego se define un spry:repeat a un TR con lo cual este se repetirá la misma cantidad de veces que se repita el nodo seleccionado en el XML.

<div spry:region="dsRSS dsRXX">
<table>
  <tr>
    <td>Spry RSS Reader </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">
    <a href="{dsRSS::link}">{dsRSS::title}</a>
    </td>
  </tr>
  <tr>
    <td colspan="2">{dsRSS::description}</td>
  </tr>
  <tr spry:repeat="dsRXX">
    <td colspan="2">
    <a href="{dsRXX::link}">{dsRXX::title}</a><br />
	{dsRXX::description}
    </td>
  </tr>
</table>
</div>

Finalmente podemos ver el resultado http://samples.unijimpe.net/rss.html donde hemos agregado CSS para mejorar la apariencia. Ademas de ellos puedes descargar los archivos de este ejemplo: tutorialspry.zip.

Posts Relacionados

• Adobe Spry 1.1 (AJAX)
• Tutorial: Ajax Youtube Search
• Buscador AJAX Youtube
• Backbase: AJAX Framework
• Adobe Dreamweaver Beta