XML Data Islands
Los XML Data Islands son datos XML embebidos dentro de una página HTML. Los datos XML pueden estar localizados en la misma página HTML o bien en un documento XML externo.
La sintaxis para incluir datos XML directamente en una página HMTL es la siguiente:
<html> <body> <xml id="datos"> <?xml version="1.0"?> <productos> <producto> <nombre>Té Dharamsala</nombre> <categoria>Bebidas</categoria> <precio>18,00 €</precio> <proveedor>Exotic Liquids</proveedor> <ciudad>Londres</ciudad> <pais>Reino Unido</pais> </producto> <producto> <nombre>Refresco Guaraná Fantástica</nombre> <categoria>Bebidas</categoria> <precio>4,50 €</precio> <proveedor>Refrescos Americanas LTDA</proveedor> <ciudad>São Paulo</ciudad> <pais>Brasil</pais> </producto> <producto> <nombre>Cerveza Klosterbier Rhönbräu</nombre> <categoria>Bebidas</categoria> <precio>7,75 €</precio> <proveedor>Plutzer Lebensmittelgroßmärkte AG</proveedor> <ciudad>Frankfurt</ciudad> <pais>Alemania</pais> </producto> </productos> </xml> </body> </html>
Descargar archivo ejemplo1.html.
Para incluir datos XML contenidos en un documento externo:
<html> <body> <xml id="datos" src="datos.xml"></xml> </body> </html>
Descargar archivos ejemplo2.html y datos.xml.
Se recomienda el uso de documentos XML externos para lograr separación entre información y presentación. Los ejemplos mostrados a continuación utilizarán este segundo método.
El parser XML de Microsoft Internet Explorer (desde la versión 5) crea un data island a partir de un documento XML almacenando los datos en un Data Source Object (DSO). Un DSO es un control Microsoft ActiveX incorporado en Microsoft Internet Explorer desde la versión 4, que se embebe en una página Web y permite la comunicación entre ésta y un origen de datos, en este caso datos XML. A este proceso se le denomina data binding.
La especificación HTML 4.0 reserva algunos atributos para usos futuros, cuatro de los cuales son utilizados por Microsoft Internet Explorer para realizar data binding y mostrar los datos:
datasrc, datafld, dataformatas y datapagesize.El atributo
datasrc define el origen de los datos, debe contener un identificador de data island único en la página HTML, prefijado por el símbolo #. Puede ser usado con los siguientes elementos: a, applet, button, div, frame, iframe, img, label, marquee, select, span, table, textarea e input (de tipo button, checkbox, hidden, image, password, radio y text).El atributo
datafld especifica un campo del data island. No todos los elementos HTML soportan data binding (por ejemplo, al elemento td no se le pueden vincular datos), y los que lo soportan, usan el valor del campo vinculado de diferentes formas. Por ejemplo, el elemento span utiliza el valor del campo como texto dentro del propio elemento, mientras que el elemento a asigna el valor del campo al atributo ref.Este sería un ejemplo de uso de los atributos
datasrc y datafld:<span datasrc="#xmlDataIsland" datafld="nombre"></span>
Se está vinculando el campo
nombre del data island #xmlDataIsland con un elemento span. En el siguiente ejemplo se muestran los datos del XML, navegando por los diferentes registros:<html>
<head>
<script languaje="javascript">
function siguiente() {
datos = xmlDataIsland.recordset;
if (datos.absoluteposition < datos.recordcount) {
datos.movenext();
}
}
function anterior() {
datos = xmlDataIsland.recordset
if (datos.absoluteposition > 1) {
datos.moveprevious()
}
}
</script>
</head>
<body>
<xml id="xmlDataIsland" src="datos.xml"></xml>
<table border="1">
<tr><td>Producto: </td><td><span datasrc="#xmlDataIsland" datafld="nombre"></span></td></tr>
<tr><td>Categoría: </td><td><span datasrc="#xmlDataIsland" datafld="categoria"></span></td></tr>
<tr><td>Precio: </td><td><span datasrc="#xmlDataIsland" datafld="precio"></span></td></tr>
<tr><td>Proveedor: </td><td><span datasrc="#xmlDataIsland" datafld="proveedor"></span></td></tr>
<tr><td>Ciudad: </td><td><span datasrc="#xmlDataIsland" datafld="ciudad"></span></td></tr>
<tr><td>País: </td><td><span datasrc="#xmlDataIsland" datafld="pais"></span></td></tr>
</table>
<a href="#" onclick="anterior()">Anterior<a/>
<a href="#" onclick="siguiente()">Siguiente<a/>
</body>
</html>Descargar archivo ejemplo3.html.
La mayoría de elementos HTML únicamente soportan el vínculo con un único registro, a excepción del elemento
table que puede vincularse con múltiples registros, de manera que por cada fila (tr) se muestra un registro.<html> <body> <xml id="xmlDataIsland" src="datos.xml"></xml> <table datasrc="#xmlDataIsland" border="1"> <thead> <tr align="left"> <th>Producto</th> <th>Categoría</th> <th align="right">Precio</th> <th>Proveedor</th> <th>Ciudad</th> <th>País</th> </tr> </thead> <tfoot> <tr><th colspan="6">Mis productos</th></tr> </tfoot> <tr align="left"> <td><div datafld="nombre" /></td> <td><div datafld="categoria" /></td> <td align="right"><div datafld="precio" /></td> <td><div datafld="proveedor" /></td> <td><div datafld="ciudad" /></td> <td><div datafld="pais" /></td> </tr> </table> </body> </html>
Descargar archivo ejemplo4.html.
El atributo
datapagesize indica el número de registros del data island que se mostrarán. Con los métodos firstPage, previousPage, nextPage y lastPage se podría navegar por los registros. Para ello, es necesario indicar un identificador al elemento table, ya que será sobre el que se ejecutarán los métodos. En el ejemplo anterior, utilizando el atributo datapagesize se podría limitar el número de elementos a mostrar en la tabla, y utilizando los métodos anteriores se podría navegar por las dos páginas resultantes.<table datasrc="#xmlDataIsland" datapagesize="2" id="tableXmlDataIsland" border="1">
<a href="#" onclick="tableXmlDataIsland.firstPage()">Primeros<a/> <a href="#" onclick="tableXmlDataIsland.previousPage()">Anteriores<a/> <a href="#" onclick="tableXmlDataIsland.nextPage()">Siguientes<a/> <a href="#" onclick="tableXmlDataIsland.lastPage()">Últimos<a/>
Descargar archivo ejemplo5.html.
El atributo
dataformatas indica cómo el navegador interpretará el dato, en html o text. Si no se especifica lo contrario, el valor por defecto es text. Este atributo únicamente lo admiten los elementos button, div, label, marquee, y span.<span datafld="nombre" dataformatas="html"></span>
La siguiente tabla muestra los elementos que admiten data binding , si es posible actualizarlos, aplicarles formato HTML, y el atributo que recibe el valor del vínculo:
| Elemento | Actualizable | Formato HTML | Vínculo |
|---|---|---|---|
| a | No | No | href |
| applet | Sí | No | Atributo value de elemento param |
| button | No | Sí | innerText, innerHTML |
| div | No | Sí | innerText, innerHTML |
| frame | No | No | src |
| iframe | No | No | src |
| img | No | No | src |
| input type="checkbox" | Sí | No | checked |
| input type="hidden" | Sí | No | value |
| input type="label" | Sí | No | value |
| input type="password" | Sí | No | value |
| input type="radio" | Sí | No | checked |
| input type="text" | Sí | No | value |
| label | No | Sí | innerText, innerHTML |
| marquee | No | Sí | innerText, innerHTML |
| select | Sí | No | obj.options(obj.selectedIndex).text |
| span | No | Sí | innerText, innerHTML |
| textarea | Sí | No | value |
Se puede ver un ejemplo completo de XML Data Islands aquí.
Fuente:
- XML Data Island de W3Schools.
- Introduction to Data Binding de Rizwan Dar.
- XML Data Binding de jqjacobs.net.
- Introduction to Data Binding de MSDN.
2 comentarios:
Esto solo funciona en IExporer. ¿Como se puede hacer para que funcione en Firefox? He leido de XBL, pero no sale nada concreto. Alguien sabe algo de eso?.
12 de octubre de 2008, 8:17
hola, estos archivos de no abren en mozilla y explorer 8... alguien sabe a que se debe?
24 de noviembre de 2011, 21:56
Publicar un comentario