Tutorial de Adobe Spry

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]


unijimpehttp://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:

  1. <script type="text/javascript" src="xpath.js"></script>
  2. <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.

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

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.

  1. <div spry:region="dsRSS">
  2. <a href="{dsRSS::link}">{dsRSS::title}</a><br />
  3. {dsRSS::description}
  4. </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.

  1. <div spry:region="dsRSS">
  2. <a href="{link}">{title}</a><br />
  3. {description}
  4. </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.

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

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.

  1. <div spry:region="dsRSS dsRXX">
  2.   <tr>
  3.     <td>Spry RSS Reader </td>
  4.     <td>&nbsp;</td>
  5.   </tr>
  6.   <tr>
  7.     <td colspan="2">
  8.     <a href="{dsRSS::link}">{dsRSS::title}</a>
  9.     </td>
  10.   </tr>
  11.   <tr>
  12.     <td colspan="2">{dsRSS::description}</td>
  13.   </tr>
  14.   <tr spry:repeat="dsRXX">
  15.     <td colspan="2">
  16.     <a href="{dsRXX::link}">{dsRXX::title}</a><br />
  17.     {dsRXX::description}
  18.     </td>
  19.   </tr>
  20. </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.

Comentarios Total 8 comentarios


unijimpe
Publicado: 30/07/2007 10:03 am

[…] Obtenemos los datos con Adobe Spry Los resultados que devuelve el API son XMLs, entonces utilizaremos Adobe Spry que tiene la cualidad que puede leer XMLs y mostrarlos directamente en una página web. Para los que aún no conoces de Spry pueden leer Tutorial de Adobe Spry para aprender a utilizarlo. Entonces descargamos los archivos de Spry y los colocamos en una carpeta lllamada inc en donde ubicaremos nuestros archivos js. Incluimos nuestras librerías a utilizar, primero los archivos de Spry (xpath.js y SpryData.js) luego swfobject.js para incluir el reproductor de flash y finalmente una archivo llamado functions.js en el cual colocaremos nuestras funciones javascript. […]

Andres
Publicado: 20/08/2007 9:56 pm

Hola
Que buena información…
Me estoy iniciando con spry, y estoy tratando de empezar haciendo cosas básicas con el dreamweaver cs3, pero nada me funciona. Y ahora que trato de visualizar este ejemplo en mi explorador (http://samples.unijimpe.net/rss1.html), me muestra una web en blanco. Qué pasa?

daniel
Publicado: 11/09/2007 4:20 am

Puede que requieras de un servidor web para visualizarla correctamente, aunke en vista previa en el navegador te deberia mostrar bien.. a lo mejor le estas fallando en el codigo..

JuanC
Publicado: 24/11/2007 4:49 pm

He descargado el tutorial Spry y no contiene los archivos “functions.js” ni “swfobject.js” y sin esto no puedo hacer el tutorial sobre Ajax Youtube Search espero me respondan y claren mis dudas les dejo mi correo juancagb.17@hotmail.com

Francisco
Publicado: 05/11/2008 2:03 pm

a mi tampoco me funciona, y el link con el ejemplo de aca menos … al igual que la otra persona que posteo mas arriba se me ve la página en blanco

U_U

gbarrad
Publicado: 21/02/2009 10:08 pm

Seguín con bastante atención las instrucciones; pero tampoco me funciona

anyulled
Publicado: 02/03/2009 5:50 am

esto de los dataset con spry son magnificos, pero ando atascado con algo.

tengo una página del tipo mater/detail de productos por año, pero en el sector master me muestra todos los registros en lugar de agruparme los valores similares. ¿Existe alguna manera de hacer esto?

Gracias

Prof.Yeow
Publicado: 26/08/2010 2:40 pm

ni con las instrucciones ni con el “deme” pude ver como funciona.. una lastima.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)