podéis leer un comentario sobre las novedades en:
http://www.dwug.es/go/336

La nueva URL es, por tanto:
http://www.dwug.es

Para todos aquellos miembros del foro, no es necesario volver a registrarse, simplemente ir a la url del foro: http://forum.dwug.es

Esperamos que os guste el cambio!

• Un bloque contenedor
• Bloque de panel 1
• Un bloque de pestaña/titulo
• Un bloque de contenido
• Bloque de panel 2
  • Un bloque de pestaña/titulo
  • Un bloque de contenido
• …Bloque de panel n
  • Un bloque de pestaña/titulo
  • Un bloque de contenido

Estos bloques no necesitan ser obligatoriamente etiquetas div, sino que Spry es capaz de realizarlos con otros elementos html, como una lista.

Una enlazado al archivo creada la estructura de bloques, sólo nos queda instanciar el objeto:
<script>var acordeon1 = new Spry.Widget.Accordion("acordeon");</script>

La asignación a la variable nos permitirá realizar otrs acciones posibles, como abrir un determinado panel, crearlos al vuelo… El valor del parámetro es la id que asignemos al bloque que actua como contenedor.

En el ejemplo 1 podemos ver la estructura básica de un acordeón que utiliza una lista para presentar los datos.

Manipulación con CSS:
Además de los estilos que definamos para mejorar la apariencia del acordeón, Spry utiliza otras 4 clases que podemos aprovechar para modificar la apariencia de los paneles en diferentes estados. Estas 4 clases son:

• AccordionPanelLabelHover: Pasamos el ratón por encima del label
• AccordionPanelOpen: El panel se encuentra abierto
• AccordionPanelClosed: El panel se encuentra cerrado
• AccordionFocused: Nuestro accordion tiene el focus en el documento. Para que se pueda utilizar, es necesario que el bloque contenedor del acordeón tenga definido el atributo ‘tabindex’

Spry utiliza estas clases de forma dinámica (a la hora de abrir, cerrar o crear paneles), por lo que su uso permite mejorar aún más la apariencia del conjunto.

El Ejemplo 2 muestra el acordeón con algunos estilos aplicados y aprovecha las clases generadas por Spry ‘AccordionPanelOpen’ y ‘AccordionFocused’ para cambiar el color de la pestaña cuando el panel se encuentra abierto y cuando el conjunto gana o pierde el foco. Además, el uso del atributo tabindex permite el uso de los cursores arriba y abajo para navegar por los paneles y la tecla tab para ganar y perder el foco.

Métodos extra:
Hasta ahora hemos visto cómo crear el elemento y cómo, utilizando estilos CSS, podemos modificar la apariencia dinámica del mismo . Sin embargo, sus funcionalidades no terminan ahí: Spry proporciona una serie de métodos JavaScript que nos permiten manipular nuestro Acordeón. En caso de que vayamos a ahacer uso de ellos, es importante que nuestro elemento utilice bloques div y no listas. Algunos de estos métodos son:

• openFirstPanel(): Abre el primer panel
• openLastPanel(): Abre el último Panel
• openPreviousPanel(): Abre el panel anerior
• openNextPanel: Abre el panel siguiente
• addNewPanel(”label”, “contenido”): Permite crear un nuevo panel

Omitiremos cometar las 4 primeras, ya que su uso es bastante obvio. Respecto a la quinta, sólamente es necesario definir como primer parámetro el texto de la pestaña y como segundo, el contenido.

El ejemplo 3 extiende el anterior, añadiendo botones que permiten navegar por las pestañas y la posibilidad de crear otras nuevas.
NOTA: A la hora de escribir este artículo (Spry Beta 1.3), el método addNewPanel es provisional y sufre un bug que impide su uso. Por ello hemos reemplazado el método existente por otro que hemos creado y que es completamente funcional. Futuras versiones del framework ampliarán está función.

Hasta aquí sólo algunas de las posibilidades que ofrece este primer widget de Spry. A medida que avancen las versiones iremos avanzando en el conocimieno de este excelente y sencillo framework para AJAX de Adobe

• Sabado 19 de Agosto:
• 10:00.- Dirección de Arte en Proyectos (por Marco Antonio Morales)
• 12:00.- Flex2 (por Joan Garnet)
• 16:00.- Flash y dispositivos Móviles (por Raul Jiménez y Marcos González)
• 18:00.- Sistemas de representación de redes sociales y de información (por Alex Sánchez)
• Domingo 20 de Agosto:
• 11:00.- AJAX (por Marc Palau)

Para obtener más información, puede visitarse la web del evento:
http://www.subflash.com/talleres/2006

Uno de los objetivos de esta Asociación es lograr lo que su homónima en Cataluña ya tiene, la creación del Colegio Profesional de Diseñadores Gráficos Gallegos. Dificil tarea desde luego, pero ganas no faltan.

Como uno de los responsables del proyecto, si resides y/o trabajas en Galicia y te dedicas al diseño, puedes contactar conmigo por email (carlos@cmacias.com) para recibir más información o participar en el proyecto.

Para el primero de los casos se mantiene la función filterData(), que ya existía en las versiones anteriores de Spry. Ahora, se añade la función filter(), que permite realizar filtrados en los que los datos no utilizados no desaparecen, sino que se mantienen (de ahí su definición de filtrado no destructivo).

Este tutorial es un ejemplo del uso de esta función: Se trata de crear un campo de texto en el queiremos escribiendo texto y que de forma dinámica, irá realizando un filtrado de los datos, los cuales se actualizarán en el documento sin necesidad de recargar. Un ejemplo en la vida real puede ser el quehace Google para ir mostrando posibilidades de búsqueda que coincidan con el texto escrito. Nuestr caso práctico mostrará un listado de productos de Adobe. A medida que escribamos en el campo de texto, se irán eliminando aquellos cuyo nombre no coincida con lo escrito.

El ejemplo en funcionamiento está disponible haciendo click aquí.
Pusa aquí para ver el archivo products.xml.
Puedes descargarte el ejemplo completo y listo para funcionar desde aquí.

Nuestro primer caso, como en toda aplicación que use Spry, es definir el namespace y llamar a los 2 archivos js (xpath.js y SpryData.js) necesarios. Debemos recordar que a partir de esta versión 1.1, la sintaxis difiere de la utilizada en versiones anterios (para conseguir la validación como xhtml):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>filtrado no destructivo</title>
<script language="JavaScript" type="text/javascript" src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript">
var dsProductos = new Spry.Data.XMLDataSet("products/products.xml", "products/product");
</script>
</head>
<body>
<form>
Buscar Producto :
<input type="text" id="filterTF" />
</form>
<div id="productsdiv" spry:region="dsProductos">
<ul>
<li spry:repeat="dsProductos">{name}</li>
</ul>
</div>
</body>
</html>

Hasta ahora, simplemente hemos creado una región repetida (con la etiqueta li) que nos mostrará todos los productos obtenidos del fichero xml. Nuestro siguiente paso será añadir una función que realice el filtrado.

En la primera parte creamos el documento básico que incluía una región deonde se listaban todos los productos. En este segundo paso vamos a añadir las funciones necesarias para ejecutar el filtrado.
El primer paso es crear la función principal. La añadiremos dentro de nuestro encabezado:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>filtrado no destructivo</title>
<script language="JavaScript" type="text/javascript" src="xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="SpryData.js"></script>
<script language="JavaScript" type="text/javascript">
var dsProductos = new Spry.Data.XMLDataSet("products.xml", "products/product")
var filtrarProductos = function(dataSet, row, rowNumber){
 //capturamos el contenido del cuadro de texto
var elTexto=document.getElementById('filterTF').value;
//Creamos la expresion regular con el texto del campo
var miPattern=new RegExp(elTexto,"i");
//si el campo 'name' coincide con la expresion
if (row["name"].search(miPattern) != -1){
return row;  //incluir fila en el listado
}else{                      
return null; //rechazar fila del listado
}                       
}
 
</script>
</head>

No es necesario preocuparse de los 3 parámetros definidos (dataSet, row, rowNumber), ya que Spry los enviará automáticamente a la función. Lo importante es el contenido de la misma y, sobre todo las 2 primeras lineas, ya que Spry se encarga del resto, incluido el bucle por todas las filas del dataset. No es necesario utilzar los

Finalmente, sólo nos queda llamar al método filter() de Spry.

Ya tenemos todos los elementos necesarios para filtrar los datos, sólo nos queda llamar al método filter() de Spry para que todo funcione.
filter() es un método vinculado a un dataset que necesita como parámetro el nombre de la función encargada de manejar el filtrado. En nuestro caso, ya tenemos ambos elementos: dsProductos y filtrarListado(). Por tanto, el código será:

dsProductos.filter(filtrarProductos);

La pregunta ahora es: ¿dónde colocamos el filtro? La respuesta es sencilla: Vamos a invocarlo cada vez que el usuario escriba algo en el campo de texto:

<input type="text" id="filterTF" onkeyup="dsProductos.filter(filtrarProductos);" />

y hemos terminado: Spry se encarga de todo lo demás: recorre el dataset, recupera los valores que coincidan y regenera el listado de elementos li con los valores que coincidad (ya que las regiones creadas por Spry (en nuestro caso, div id=”productsdiv” spry:region=”dsProductos”) ya incluyen un observer que comprueba las modificaciones y actúa en consecuencia.

Resumiendo los pasos:

1. Insertar el namespace y los vínculos a los archivos js
2. Crear la región y añadir el repeat necesario para mostrar todos los elementos.
3. Escribir una función que genere el filtrado
4. Invocar dicha función mediante el método filter() del dataset

Como podéis observar, generar filtrados dinámicos con Spry es una tarea sencilla y que apenas necesita 9 lineas de código extra para funcionar.

Descargar Ficheros de ejemplo.
Ver ejemplo 1 en funcionamiento
Ver ejemplo 2 en funcionamiento

11.00 L.O.P.D por AdhecOnline.
11.30 Dreamweaver dinámico exclusivo para diseñadores. Dictado por Alejandro Rodríguez, manager del MAUG.

Para saber más del grupo y del evento, puede visitarse su web: http://www.maug.es

Alejandro Rodriguez (aka Simar) es el manager de este nuevo grupo y anteriormente había colaborado con el grupo de usuarios de Argentina. En esta nueva etapa, cuenta como co-managers con Pedro Lopez Peña y Sergio de Valais.

Más información en la propia web de interakt

Si hasta ahora, la definición de parámetros que crearán de forma dinámica la consulta SQL era un poco complicada de entender, la nueva apariencia mejora la comprensión y edici&ooacute de los mismos, apareciendo a un lado las variables y a su derecha, los parámetros de las mismas:

Ahora, al pulsar sobre el botón ‘Edit…’ se nos abrirá una nueva ventana donde definir los valores del parámetro (hasta ahora se realizaba directamente en la ventana del recordset):

De los campos de texto, el que supone una novedad es el que nos solicita el tipo de valor que aceptará el parámetro (String, Numeric o Date). Es importante seleccionar el correcto porque Dreamweaver utiliza nuevo código para el recordset con la intención de prevenir las inyecciones SQL.

No vamos a escribir todo el nuevo código; simplemente indicaremos que es muy similar al utilizado hasta ahora para los comportamientos de servidor ‘insertar datos’ y ‘actualizar datos’. Añade una función GetSQLValueString() que identifica el tipo de valor para pasárselo a la consulta (si el valor es numeric sólo aceptará números, si es String, envolverá el texto en comillas…)

Lógicamente, aquellos recordsets basados en las versiones anteriores no será correctamente interpretados en el panel de server behaviors, ya que éstos utilizaban un código diferente.

En Adobe Live! - podrás conocer de la mano de técnicos expertos o de visionarios y emprendedores las últimas tendencias, tecnologías y armas que te ayudarán a ganar la batalla de la creatividad.

• Ven a descubrir Creative Suite 2, Macromedia Studio 8 y Production Studio - desde una perspectiva diferente, conoce los secretos y los trucos mejor guardados que te ayudarán a conseguir mejores resultados, más rápidamente.
• Charlas que te inspiren: De poco sirven las herramientas sin una buena idea. Queremos ayudarte a encontrar la inspiración con ideas innovadoras y arriesgadas, de la mano de personas que, como tú, han ganado ya algunas batallas.
• Trucos y Técnicas: Sesiones lideradas por reconocidos especialistas de producto.
• Sesiones de Partners tecnológicos: Descubre los ordenadores más potentes, las pantallas de última generación, los sistemas de impresión más avanzados, las tabletas más precisas, las cámaras fotográficas con más prestaciones o las soluciones de software que te aportarán las mejores garantias para alcanzar la victoria.
• Experiencias de usuario: Aprende cómo otros usuarios trabajan, crean, disfrutan y descubren oportunidades de negocio en un mundo competitivo.
• Descubre los flujos de trabajo más avanzados e innovadores: Flujos de preimpresión, flujos editoriales, flujos de gestión de color. Deja que tu creatividad fluya de principio a fin y que los procesos no sean un obstáculo para lograr la victoria.
• Aprovecha para intercambiar opiniones con otros profesionales mientras saboreas un café o repones fuerzas con un zumo de frutas. Café y zumos disponibles todo el día.

Las plazas son limitadas. ¡Inscríbete ahora mismo!.

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)

Creando el DataSet
Tras haber enlazado ambos archivos procederemos a crear el DataSet.
Por DataSet conocemos el juego de registros que Spry obtiene del archivo xml y que ‘dibuja’ de forma virtual una tabla a la que posteriormente tendremos acceso para aplicar filtros, ordenar datos… Esta es una de las primeras ventajas de Spry: nos genera una presentación virtual de los datos que nos es familiar donde, en vez de nodos, los datos nos aparecen como campos y filas.

Vamos a crear nuestro DataSet: Después de las llamadas a los scripts, escribiremos:

<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>
<script type="text/javascript">
<!--
var dsProductos = new Spry.Data.XMLDataSet("productos.xml", "productos/producto")
-->
</script>
</head>

Analicemos la línea:
var dsProductos es el nombre con el que definimos nuestro dataset
new Spry.XMLDataSet crea el dataset y necesita 2 parámetros:

• var dsProductos es el nombre con el que definimos nuestro dataset
• new Spry.XMLDataSet crea el dataset y necesita 2 parámetros:
  • Ruta al fichero xml (productos.xml)
  • Nodo del xml a partir del cual queremos obtener los datos (en nuestro caso ‘productos/producto’). La forma de definirlo es similar a la que utilizamos para indicar la ruta a un arhivo. Como nomra general, se trata´ra del primer nodo que se repite.

Por tanto, la declaración del script indica que hemos creado un dataset, llamado dsProductos, que lee el archivo productos.xml y extrae los datos de cada nodo llamado ‘producto’ .

Ya tenemos todo lo necesario en nuestro encabezado. A continuación crearemos una tabla para listar los productos.

Crear la tabla de Datos
A partir de ahora, sólo tenemos que centrarnos en el cuerpo de nuestro documento. Para ello, crearemos un bloque div que alojará una tabla donde los mostraremos.

En el bloque div, deberemos realizar 2 pasos:

• indicarle que vamos a utilizar el datasource ‘dsproductos’ utilizando el atributo ’spryregion’
• Asignarle una id que nos permita aplicarle un estilo css

Este será el código sobre el que trabajemos:

<body>
<div spryregion="dsProductos" id="productos">
</div>
</body>

A continuación, añadiremos una tabla dentro del div donde mostrar el producto y el precio:

<body>
<div spryregion="dsProductos" id="productos">
<table>
<tr>
<th>producto</th>
<th>precio</th>
</tr>
<tbody>
<tr>
<td>{nombre}</td>
<td>{precio}</td>
</tr>
</tbody>
</table>
</div>
</body>

Es decir, para indicar dónde debe aparecer cada elemento del archivo xml, sólo tenemos que envolver su etiqueta xml correspondiente entre llaves: {nombre} y {precio}.

Si probamos el código anterior sólo nos aparecerá el primer producto de nuestro xml: en las 2 imágenes inferiores podéis ver cómo aparece dentro de Dreamweaver y cómo se ve en el navegador:

El siguiente paso será crear una región repetida que nos muestre todos los productos. Para ello, Spry ofrece 2 posibilidades, pero aquí utilizaremos la más sencilla: El atributo spryrepeatchildren.
Este atributo, asignado a una etiqueta, hace que todo los elementos que se encuentran dentro de ella se repitan tantas veces como elementos devuelva el archivo xml. En nuestro caso, tenemos una tabla con un elemento TBODY por lo que, para repetir sus filas, solo tenemos que añadir dicho atributo a la TBDODY, lo que hará que cada fila de su interior se repita tantas veces como elementos tenga el xml:

<body>
<div spryregion="dsProductos" id="productos">
<table>
<tr>
<th>producto</th>
<th>precio</th>
</tr>
<tbody spryrepeatchildren="dsProductos">
<tr>
<td>{nombre}</td>
<td>{precio}</td>
</tr>
</tbody>
</table>
</div>
</body>

Al ejecutarlo en el navegador, nos aparecerá la tabla que hemos creado:

Nuestro siguiente paso será crear otro bloque donde se nos muestre la descripción del producto

Creando el bloque detalle
Hasta ahora hemos creado los enlaces a los archivos js utilizados por spry, hemos creado una tabla donde mostrar los datos y hemos insertado la etiqueta spryrepeatchildren para repetir los resultados. El siguiente pasó será añadir un nuevo div donde mostrar la descripción del producto seleccionado en dicha tabla.

Hemos visto como Spry utiliza el atributo ’spryregion’ para indicar una región donde vamos a mostrar datos del xml. Para indicar un bloque donde mostrar un registro concreto, Spry utiliza el atributo ’spraydetailregion’ que lleva como valor (de nuevo) el dataset del que obtenemos los datos. Para llamar al campo que queremos mostrar, utilizamos de nuevo las llaves {}:

<div sprydetailregion="dsProductos">{descripcion}</div>

Nuestro cuerpo tiene ahora este aspecto:

Deberemos ahora crear los enlaces desde cada artículo para que se nos muestre el detalle cuando pulsamos sobre el mismo. Spry utiliza el método nombreDataSet.setCurrentRow(’{ds_RowID}’), donde sólo tendremos que cambiar nomBreDataSet por el nombre del nuestro. Nuestro documento ya es 100% operativo:

<html>
<head>
<title>Mi primer archivo con spry</title>
<script type="text/javascript" src="scripts/xpath.js"></script>
<script type="text/javascript" src="scripts/SpryData.js"></script>
<script type="text/javascript">
var dsProductos = new Spry.Data.XMLDataSet("xml/productos.xml", "productos/producto")
</script>
</head>
<body>
<div spryregion="dsProductos" id="productos">
<table>
<tr>
<th>producto</th>
<th>precio</th>
</tr>
<tbody spryrepeatchildren="dsProductos">
<tr>
<td>
<a href="JavaScript:;" onclick="dsProductos.setCurrentRow({ds_RowID})">{nombre}</a>
</td>
<td>{precio}</td>
</tr>
</tbody>
</table>
</div>
<div sprydetailregion="dsProductos">{descripcion}</div>
</body>
</html>

Para terminar, el encabezado de la tabla nos permitirá ordenar los datos por nombre o por precio

Ordenar Datos
Nuestro documento ya está operativo, pero vamos a añadir un extra: vamos a convertir los encabezados (nombre y precio) en enlaces que nos permitan ordenar los datos del xml según una u otra columna.
Spry añade un método: nombreDataSet.sort(’nombreDelCampo’), donde nombreDataSet equivale al dataset que estamos utilizando y nombreDelCampo indica el campo a utilizar para ordenar:

<body>
<div spryregion="dsProductos" id="productos">
<table>
<tr>
<th><a href="JavaScript:;" onclick="dsProductos.sort('nombre')">producto</a></th>
<th><a href="JavaScript:;" onclick="dsProductos.sort('precio')">precio</a></th>
</tr>
<tbody spryrepeatchildren="dsProductos">
<tr>
<td>
<a href="JavaScript:;" onclick="dsProductos.setCurrentRow({ds_RowID})">{nombre}</a>
</td>
<td>{precio}</td>
</tr>
</tbody>
</table>
</div>
<div sprydetailregion="dsProductos">{descripcion}</div>
</body>

Por defecto, el método sort() considera la columna como texto, por lo que, al intentar ordenar un campo numérico la ordenación será equivocada (comenzará por los números que comiencen por 1, luego por 2… independientemente de la cantidad: 1200 aparecerá por delante de 200)

Cómo solucionarlo? Sólo es necesario indicar que nuestra columna va a contener datos numéricos. Para ellos deberemos volver al encabezado y utilizar el método setColumnType(”columna”,”tipo”). Los dos tipos aceptados por sort() son ‘number’, ’string’ y ‘date’:

<title>Mi primer archivo con spry</title>
<script type="text/javascript" src="scripts/xpath.js"></script>
<script type="text/javascript" src="scripts/SpryData.js"></script>
<script type="text/javascript">
<!--
var dsProductos = new Spry.Data.XMLDataSet("xml/productos.xml", "productos/producto");
dsProductos.setColumnType("precio", "number");
-->
</script>
</head>

Y hemos terminado. Hemos preparado los archivos necesarios en un fichero zip listo para descargar y utilizar ùlsando aquí. No es necesario utilzar un servidor de prueba (En este caso, Internet Explorer mostrará la advertencia de contenido bloqueado).

También podéis ver el ejemplo que hemos creado pulsando aquí.