Conecta Datasets

En ésta lección mostraré como puedes obtener datos desde un archivo xml y divirlos en dos elementos spry. Dependiendo en que está seleccionado en el primer elemento (table Spry), el dato es mostrado en el segundo elemento (Panel Colapsable Spry).
Cuáles elementos usar, no importa, éste es una muestra nadamas.

He añadido un número de estilos CSS internos.
Y hay una nueva etiqueta añadida al archivo xml, la etiqueta “descripción”.

Primero abre la página de tu curso donde quieras colocar los dos elementos spry.
Selecciona la pestaña “Spry” en la barra de herramientas “Insertar” y haz click en “Spry XML Data Set.”
En el diálogo que aparece en la parte superior de la sección, das un nombre al dataset.
Haz click en el botón “Navegar”, y selecciona el archivo xml que funciona como una fuente valiosa.
Haz click en el botón “Obtener Esquema”.
Importante: No olvides ajustar el tipo de datos para nuestra imagen, la etiqueta de imagen.
Hasta el momento, todo está aún igual como en lecciones pasadas, entonces no debe ser un problema.
Haz click en el botón “Aceptar”.

Después añadimos nuestra tabla spry en el documento.
Coloca el cursor donde quieras y haz click en “Tabla Spry”.
En el diálogo que aparece elimina la columna “descripción”. Quiero ésto en mi tabla, pero quiero que esté subrayado en el panel colapsable que haré después.

En la ventana con varias columnas, selecciona las columnas que quiero ordenar y verifico la casilla “ordenar columna cuando el encabezado está clickeado”. Lo que hará es bastante claro para mí.

En las cuatro clases subrayadas, había introducido los estilos de clases. Estos son colores diferentes para renglones, pasa el mouse por el signo de más de un estilo seleccionado.
Esto no necesita ser completado, pero es bueno verlo.

La siguiente casilla “Actualizar Detalles de Regiones cuando un renglón es clickeado” DEBE de estar verificada, de otra forma no podrás conectar los dos elementos Spry.
Haz click en el botón Aceptar.

La tabla está insertado, aún necesitamos el panel colapsable.
Coloca el cursor bajo la tabla y haz click en “Panel de Spry Colapsable” en la pestaña “Spry”.
En el panel nuevo creado, selecciona un texto por defecto (contenido).
Selecciona el vínculo “descripción” bajo la pestaña “Vínculo”.
Y haz click en el botón “Insertar” en la parte inferior de la pestaña.

Esto coloca la descripción de la etiqueta xml en el panel colapsable.
Lo que ahora necesitamos es conectarlos a la tabla spry de arriba.
Primero, coloca el cursor en el panel colapsable donde no hay datos.
Haz click derecho en el selector etiqueta en la etiqueta Div. Para “Panel Colapsable”.
Selecciona el “Editor de Etiqueta Rápido” en el menu desplegable. Este editará la etiqueta.
En el “Editor de Etiqueta Rápido”, coloca el cursor entre el final de la etiqueta Div y el signo mayor que(>).
Escribe un espacio entre el tipo de spry:
Dreamweaver te ayudar a encontrar la opción “spry: detailtregion” en el menu que se abre.

Dreamweaver añadirá automaticamente el código, la única cosa que se necesita es conocer el nombre del dataset que quieres usar. En este caso, éste es el data set “lista del personal”.
Entonces lo escribimos entre comillas.
Haz click en la tecla Enter y cierra en editor de etiqueta.

Ver la página en tu navegador, Firefox en éste caso.
O en línea: click aquí
¿Qué tenemos ahora?

1. Cuando pasamos sobre un renglón, el color del renglón cambia.
2. El renglón seleccionado tiene colores diferentes.
3. Si hacemos click en el encabezado de columna de datos “Nombre”, “Salario”, o “Foto” será ordenado en ésta columna.
4. Cuando un renglón es seleccionado en la tabla superior, los “datos” de etiqueta acerca ésta persona es desplegado en el panel colapsable.
5. Y por supuesto podemos abrir o cerrar el panel colapsable haciendo click en el título.

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats