Página inicial  

trans_770 trans_160

Unidad 23. AJAX y Spry Framework (IX)


Modo Maestro/Detalle

 

Una de las posibilidades que nos ofrece Spry es trabajar en modo maestro/detalle.

De esta forma podemos mostrar unas cuantas columnas por registro y mostrar el detalle completo si son seleccionadas.

El uso de este método es muy aconsejable cuando la información almacenada para cada registro es muy grande.

Para ello, además de definir una región spry:region deberemos reservar también una región para el detalle utilizando spry:detailregion.

 

La forma de trabajo para este modo es muy similar a la que llevamos viendo, simplemente habrá que añadir un nuevo elemento que hará las veces de región de detalle:

<div spry:region="miDataSet">

<ul spry:repeatchildren="miDataSet">

<li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id}, {propiedad}</li>

</ul>

</div>

 

<div spry:detailregion="miDataSet">

<p>{columna2}</p>

<p>{columna3}</p>

<p>{columna4}</p>

<p>{columna5}</p>

</div>

 

Como puedes ver hemos añadido una nueva región donde cargaremos la información completa del registro actual, para ello hemos de generar un evento que ejecute el método que establece (set) cuál es el nuevo registro (row) actual (current).

Lo hemos añadido en un evento onclick.

Para establecer un nuevo registro como el actual hemos utilizado el método setCurrentRow, que necesita de un valor numérico el cual pasará como registro actual.

La región identificada como región de detalle se actualizará automáticamente mostrando el resto de campos que en la región maestro no se mostraban.

 

Modo Maestro/Detalle con diferentes fuentes XML

 

Es posible que el detalle de un elemento no se encuentre en el mismo archivo XML, lo que nos obligaría a cargar el XML del maestro junto con todos los archivos que contuviesen la información del detalle de cada uno de los registros.

Esta operación se puede resolver fácilmente en Spry de la siguiente forma:

<script type="text/javascript">

var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento");

var miDataSetDetalle = new Spry.Data.XMLDataSet("{miDataSet::URL}", "listado/detalle_elemento");

</script>

 

De esta forma deberemos incluir una nueva columna en el archivo XML del maestro indicando la URL del archivo del detalle para cada uno de los registros.

Así cada vez que cambiemos de registro actual el dataset se recargará con el archivo que establece ese campo y mostrará el detalle del registro que nos interesa.

 

Luego el código permanece prácticamente igual que el anterior, sólo que deberemos cambiar la sección spry:detailregion para que apunte al dataset correspondiente:

<div spry:region="miDataSet">

<ul spry:repeatchildren="miDataSet">

<li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id}, {propiedad}</li>

</ul>

</div>

 

<div spry:detailregion="miDataSetDetalle">

<p>{columna2}</p>

<p>{columna3}</p>

<p>{columna4}</p>

<p>{columna5}</p>

</div>

 


  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 23.9

Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.