Unidad 24. AJAX y Spry Framework (XIII)

24.12. 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 (spry:detailregion) se actualizará automáticamente mostrando el resto de campos que en la región maestro no se mostraban.

Recuerda que al insertar una nueva región Spry, podíamos que fuese una región de detalle.

24.13. 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>

Pág. 24.13

Octubre-2009.