logo

Andrés es manager de ESMMUG y experto en Dreamweaver, Captivate y Contribute.

Tutoriales Spry:
Aprendiendo Spry: Mi primera aplicación

—Por Andres Cayon

Spry facilita a los no expertos la creación de aplicaciones web que hagan uso de AJAX. En este artículo veremos cómo crear una vista maestro/detalle a partir de un archivo XML es realmente sencillo.

Para crear nuestra aplicación, el primer paso es descargarse los arhcivos que componen Spry de la url http://labs.adobe.com/technologies/spry/

De todos los archivos que encontramos, solo necesitaremos dos: SpryData.js y xpath.js. Guardaremos ambos en una carpeta (que llamaremos ’scripts) en el directorio de nuestro documento principal.

Crearemos un fichero xml que guarde datos de nuestros productos: productos.xml, que gurdaremos en una carpeta llamada ‘xml’. El código actual del documento es:

<?xml version="1.0" encoding="iso-8859-1"?>
<productos>
 
  <producto>
  <nombre>Radiador Solar</nombre>
  <descripcion>
    <![CDATA[Aprovecha el calor del sol para calentar tu hogar]]>
  </descripcion>
  <precio>99.99</precio>
  </producto>
 
  <producto>
  <nombre>Nevera Invernal</nombre>
  <descripcion>
    <![CDATA[Aprovecha el fr&iacute;o invernal para mantener tu comida]]>
  </descripcion>
  <precio>199.99</precio>
  </producto>
 
  <producto>
  <nombre>Reloj para Dietas</nombre>
  <descripcion>
    <![CDATA[Que tu estomago no te enga&ntilde;e: Este reloj te avisar&aacute;
     cuando realmente tengas hambre]]>
  </descripcion>
  <precio>29.95</precio>
  </producto>
 
</productos>

En Dreamweaver, crearemos un nuevo documento y lo guardaremos como ’spry_sample.html’.

Al termina estos 2 pasos, nuestra estructura es la siguiente

Carpeta Raiz:

  • spry_sample.html
  • scripts
    • SpryData.js
    • xpath.js
  • xml
    • productos.xml

Para terminar este primer paso, crearemos en nuestro archivo dos enlaces a los archivos de la carpeta scripts. Nuestro encabezado queda:

<head>
<title>Mi primer archivo con spry</title>
<script type="text/javascipt" src="scripts/xpath.js"></script>
<script type="text/javascipt" src="scripts/SpryData.js"></script>
</head>

(NOTA: Es importante que el primer archivo al que enlacemos sea xpath.js, ya que el segundo, SpryData.js, depende del mismo)

2 Comentarios »

  1. Estoy aprendiendo spry, me tomo una amanecida encontrar información adecuada para guiarme, gracias.

    Comentario Por jose manuel — 15/05/2007 @ 7:43 pm

  2. el ejemplo es bueno y muy bioen explicado aunque no habra forma de entender el mismo archivo .js del spry

    Comentario Por carlos — 07/06/2007 @ 3:49 am

TrackBack URI

Deja tu comentario