|
Page:
1 | 2 | 3
| 4 | 5
Utilisation du Data binding HTML
Le Data Binding HTML permet de lier un document XML à des éléments
de la page HTML, de manière simple et automatique. Les éléments
HTML liés seront rafraîchis automatiquement si les données XML sont
modifiées.Internet Explorer utilise un objet particulier, le XML
Data Source Object (XMLDSO) qui a la charge de parcourir le document
XML et de permettre aux éléments HTML d'en extraire les données.
Un XMLDSO est créé dès que des données XML sont incorporées dans
la page HTML, par le biais d'un îlot de données ("Data Island").
avec IE 4.x :
<OBJECT width="0" height="0"
classid="clsid: F6D90F14-9C73-11D3-B32E-00C04F990BB4"
id="xmldso">
<LISTE>
<LIVRE>
<TITRE>Titre 1</TITRE>
<AUTEUR>Auteur 1</AUTEUR>
<PAGES>501</PAGES>
<EDITION>Edition 1</EDITION>
<PRIX>$21</PRIX>
</LIVRE>
</LISTE>
</OBJECT>
avec IE 5.x :
<xml id=xmldso>
<LISTE>
<LIVRE>
<TITRE>Titre 1</TITRE>
<AUTEUR>Auteur 1</AUTEUR>
<PAGES>501</PAGES>
<EDITION>Edition 1</EDITION>
<PRIX>$21</PRIX>
</LIVRE>
</LISTE>
</xml>
ou :
<xml id="xmldso" src="livres.xml">
</xml>
L'attribut src peut faire référence à un fichier local ou
à une URL (par exemple, à une page ASP générant dynamiquement les
données XML). Une fois l'îlot de données incorporé, un élément HTML
(par exemple, une table) peut lui faire référence par le biais de
l'attribut dataSrc. Ensuite, chacun de ses sous-éléments
pourra être lié à un champ particulier, par le biais de l'attribut
dataFld.
<TABLE dataSrc="#dsoListe">
...
<TD><SPAN dataFld="AUTEUR"></SPAN></TD>
...
<TABLE dataSrc="#dsoListe">
NB : tous les objets HTML ne peuvent pas être liés aux données.
C'est en particulier le cas de l'objet TD (cellule de table), d'où
l'utilisation d'un tag SPAN effectuant la liaison.
Exemple
<HTML>
<HEAD>
<TITLE>Liste des livres </TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="Style.css">
</LINK>
</HEAD>
<BODY>
<XML ID="dsoListe" SRC="Liste.xml"></XML>
<H2>Liste des livres</H2>
<TABLE DATASRC="#dsoListe" BORDER="1" CELLPADDING="5"
id="ListeID">
<THEAD>
<TH>Titre</TH>
<TH>Auteur</TH>
<TH>Pages</TH>
<TH>Edition</TH>
<TH>Prix</TH>
</THEAD>
<TR ALIGN="center">
<TD><SPAN DATAFLD="TITRE"></SPAN></TD>
<TD><SPAN DATAFLD="AUTEUR"></SPAN></TD>
<TD><SPAN DATAFLD="PAGES"></SPAN></TD>
<TD><SPAN DATAFLD="EDITION"></SPAN></TD>
<TD><SPAN DATAFLD="PRIX"></SPAN></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Résultat
Pour un document XML relativement grand, on peut afficher un nombre
bien précis de lignes de données par le biais de l'attribut dataPageSize
de l'élément TABLE, en fixant le nombre de lignes à afficher.
Pour naviguer à travers les différentes pages (enregistrements)
de la table, on appelle alors les méthodes firstPage, nextPage,
previousPage et lastPage de l'objet TABLE.
L'exemple suivant montre comment employer ces différentes méthodes
sur l'événement onClick associé à des boutons.
Exemple
<BUTTON ONCLICK="ListeID.firstPage()"> |< </BUTTON>
<BUTTON ONCLICK="ListeID.previousPage()"> < Précédent
</BUTTON>
<BUTTON ONCLICK="ListeID.nextPage()"> > Suivant </BUTTON>
<BUTTON ONCLICK="ListeID.lastPage()"> >| </BUTTON>
<XML ID="dsoListe" SRC="Liste.xml"></XML>
<TABLE ID="ListeID" DATASRC="#dsoListe" BORDER="1"
DATAPAGESIZE="1">
Résultat
L'objet XMLDSO permet de plus d'accéder par programmation
aux données XML sous-jacentes, en utilisant deux couches différentes,
ADO et le DOM :
- la propriété Recordset du XMLDSO renvoie un objet Recordset
du modèle objet ADO (accès aux données sous la forme d'un ensemble
d'enregistrement possédant des champs),
- la propriété XMLDocument du XMLDSO renvoie un objet DOMDocument
du modèle objet DOM de MSXML (accès aux données sous la forme
d'une arborescence de noeuds)
Pour en savoir plus: Binding
the XML Data Source Object to Data
Avantages
- simplicité de mise en oeuvre
- possibilité de liaison en lecture/écriture, si on lie des éléments
HTML INPUT
Inconvénients
- essentiellement utilisé pour des données tabulaires
- ne permet pas d'effectuer directement des traitements complexes
(tris/filtrages, etc.)
Page:
1 | 2 | 3
| 4 | 5
|
[ Loïc
Boileau, ,