SELFHTML/Quickbar  HTML dynamique  Les apports de Microsoft et de Netscape

	Liaison de données (Microsoft)
	Généralités sur la liaison de données  Exemple: lier un fichier de façon dynamique dans un tableau  Exemple: rendre possible la recherche de données  Repères HTML pour l'affichage de données externes  Mode de données: Tabular Data Control (TDC)  Mode de données: Remote Data Service (RDS)  Mode de données: JDBC DataSource Applet  Mode de données: XML Data Source  Mode de données: MSHTML Data Source

Généralités sur la liaison de données

L'Explorer Internet MS 4.x permet de chercher des données sous forme contrôlée à partir d'une source de données externe et de les afficher de façon dynamique dans des éléments HTML. Ainsi un tableau est-il pensable dans lequel l'utilisateur, à chaque cliquement sur le bouton correspondant, peut faire s'afficher les finales de la coupe de France de la saison 1960 à nos jours. À chaque cliquement, une série de données sera lue dans un fichier externe et prise de façon dynamique dans le tableau d'affichage.

Microsoft a interprété de façon très souple le concept de liaison de données. Il y a différentes possibilités pour accéder à des sources de données externes. L'accès à un simple fichier texte n'est que l'une d'entre elles. Il existe pareillement la possibilité d'accéder à une base de données qui peut traiter les commandes SQL par le langage de requête de base de données SQL. Pour les différentes possibilités de liaison de données, il y a différents modes de données. Pour chacun de ces modes de données existe un contrôle ActiveX- déterminé ou un applet Java qu'il vous faut adresser dans votre fichier HTML pour réaliser avec lui la liaison de données. Les modes de données et leur liaison en HTML sont présentés dans cette page.

Les avantages de la liaison de données sautent aux yeux: Les données peuvent être entretenues et sauvegardés avec une application appropriée. Un fichier HTML peut accéder à des données toujours actuelles sans devoir être modifié lui-même. Pour "aller chercher" les données il n'y a pas de protocole prescrit. La liaison de données fonctionne donc sur tous les environnements, que ce soit sur un serveur WWW, ou localement sur le disque dur d'un PC ou sur un CD-ROM (c'est le cas tout au moins pour le plus simple des modes de données). Il ne faut pas de script CGI supplémentaire qui doit être appelé en permanence comme intermédiaire entre le fichier HTML et la base de données à chaque interaction. Le navigateur possède ce savoir-faire, et la direction de la liaison de données est notée directement dans le fichier HTML. Par l'échange dynamique des contenus d'éléments HTML dans lesquels les données sont affichées, une nouvelle construction de la page WWW n'est pas nécessaire.

Remarque:

Les explications concernant les modes de données plus bas sur cette page sont en partie très techniques. C'est malheureusement inévitable étant donné que la discipline est assez complexe. Les explications concernant les modes de données ne s'adressent aussi qu'à des spécialistes qui connaissent et pratiquent les concepts correspondants.

Exemple: incorporation dynamique d'un fichier dans un tableau

Exemple d'affichage: aperçu

La façon de procéder décrite ici explique comment vous pouvez afficher dans un tableau des enregistrements distincts d'un fichier texte externe. Pour cela est utilisé le  Mode de données: Tabular Data Control (TDC). À l'aide de boutons, l'utilisateur peut charger dans le tableau l'enregistrement suivant ou précédent.

Exemple 1ère partie (fichier externe avec des données):

nom|prenom|rue|cpost|ville|Tel|EMail
Berger|Daniel|11 rue des joncs|67000|Strasbourg|0365-985251|bg@boum.fr
Guidoni|Martine|123 Cours Sextius|13100|Aix en Provence|0442-871428|gm@vlan.com
Martinez|Bernard|13 rue de la paix|75000|Paris|01836-552263|martinez@peng.net
Coquette|Patricia|1 rue de la joie|59100|Roubaix|0320-759921|pc@hotcpu.org

Explication:

Le fichier externe est ici un simple fichier texte, par exemple un fichier nommé donnees.txt. Le fichier est construit de telle façon que chaque ligne représente un enregistrement. Les différents champs de l'enregistrement sont séparés ici par le signe "|". Cela pourrait être aussi un autre signe. Le signe "|" a été choisi ici parce qu'il est très rare - et n'apparaît pas dans les données proprement dites. Dans la première ligne du fichier ne se trouvent pas de données, mais des noms de champ. Par exemple, le troisième nom de champ est rue. En dessous, dans les lignes de données proprement dites, se trouvent donc les données, ordonnées dans l'ordre correspondant. Ainsi, le troisième champ de la première ligne de données a comme valeur 11 rue des joncs. C'est la valeur correspondante au troisième champ de la première ligne rue.

De tels fichiers texte ne sont pas particulièrement pratiques quand on veut les modifier soi-même avec un éditeur de texte. Cependant, ces fichiers texte peuvent être créés avec presque tous les programmes de feuilles de calcul ou de base de données. La plupart du temps est prévu pour cela le type de données "délimitées par des virgules" ("comma delimited") portant l'extension de fichier standard .csv. Les meilleurs logiciels permettent d'attribuer pour cela un délimiteur de champ défini soi même.

Exemple 2ème partie (fichier HTML avec accès aux données):

<html>
<head>
</head>
<body>
<object id="adresses" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
 <param name="DataURL" value="donnees.txt">
 <param name="UseHeader" value="true">
 <param name="FieldDelim" value="|">
</object>
<form><table id="tableauaffich" datasrc="#adresses" datapagesize=1 width=100%>
<colgroup>
<col width=200>
<col>
<tr>
<td bgcolor="#EEEEEE"> </td>
<td bgcolor=#EEEEEE align=right>
<input type=button value=" &lt; "
onclick="document.all.tableauaffich.previousPage();">
<input type=button value=" &gt; "
onclick="document.all.tableauaffich.nextPage();">
</td>
</tr><tr>
<td bgcolor=#EEEEEE valign=top><b>Nom:</b></td>
<td bgcolor=#FFFFE0 valign=top><span datafld="Nom"></span></td>
</tr><tr>
<td bgcolor=#EEEEEE valign=top><b>Prénom:</b></td>
<td bgcolor=#FFFFE0 valign=top><span datafld="prenom"></span></td>
</tr><tr>
<td bgcolor=#EEEEEE valign=top><b>rue:</b></td>
<td bgcolor=#FFFFE0 valign=top><span datafld="rue"></span></td>
</tr><tr>
<td bgcolor=#EEEEEE valign=top><b>code postal:</b></td>
<td bgcolor=#FFFFE0 valign=top><span datafld="cpost"></span></td>
</tr><tr>
<td bgcolor=#EEEEEE valign=top><b>Ville:</b></td>
<td bgcolor=#FFFFE0 valign=top><span datafld="ville"></span></td>
</tr><tr>
<td bgcolor=#EEEEEE valign=top><b>téléphone:</b></td>
<td bgcolor=#FFFFE0 valign=top><span datafld="Tel"></span></td>
</tr><tr>
<td bgcolor=#EEEEEE valign=top><b>E-Mail:</b></td>
<td bgcolor=#FFFFE0 valign=top><span datafld="EMail"></span></td>
</tr></table></form>
</body>
</html>

Explication:

Pour pouvoir utiliser dans un fichier HTML une source de données externe, vous devez d'abord noter la source et diverses mentions relatives à sa construction. Pour cela, vous avez besoin du repère <object>. Dans le repère d'ouverture <object>, deux attributs sont nécessaires: avec la mention id= vous attribuez un nom avec lequel, plus tard, vous accéderez aux données. Le nom doit être parlant, dans l'exemple ci-dessus par exemple: "adresses". Comme deuxième paramètre vous devez référencer le contrôle ActiveX qui assure l'accès complet au fichier externe. Pour des fichiers de texte simples avec des enregistrements occupant une ligne, vous devez toujours noter la mention classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83". Le contrôle ActiveX avec ce numéro d'identification est livré avec l' Explorer Internet MS à partir de la version 4.x - Vous n'avez pas besoin de vous soucier d'autre chose d'autre. À vrai dire, c'est exactement là que se trouve le point de rupture de tout le concept: sans de tels contrôles ActiveX rien ne marche.

Dans le repère <object>, notez les mentions sur l'emplacement et la nature du fichier externe.
Avec <param name="DataURL", vous pouvez adresser le fichier désiré. Derrière value=, notez le nom de fichier. Si le fichier se trouve dans le même répertoire, le simple nom de fichier suffit. Sinon, respectez les mêmes règles que pour les  liens en HTML.
Avec <param name="UseHeader" value="true">, vous avisez le navigateur qu'il doit interpréter la première ligne du fichier externe non pas comme ligne de données, mais comme lignes pour la définition des noms de champ.
Avec <param name="FieldDelim", mentionnez quel doit être le signe de délimitation pour les champs. Dans l'exemple c'est le signe "|".

Ainsi, toutes les conditions préalables sont réunies pour afficher de façon dynamique en HTML les données du fichier externe. L'affichage des données se fait dans un tableau. Le repère d'ouverture <table> crée les conditions préalables nécessaires pour afficher les données sous forme contrôlée. Dans un premier temps, un nom est attribué dans le tableau avec id= (dans l'exemple : tableauaffich). Ce nom sera nécessaire pour les boutons qui permettent, dans le tableau, de feuilleter entre les enregistrements.

La mention suivante dans le repère <table> est datasrc= (data source, source de données). Par cette mention, vous vous référez au fichier de données externe. À cet endroit, vous ne devez cependant pas mentionner le fichier de données lui-même, mais vous devez mentionner le nom que vous avez auparavant attribué dans la repère <object> avec id=, et cela avec un signe dièse placé devant #. C'est ainsi que vous établissez la relation entre le tableau et la source de données. Ensuite, tous les paramètres que vous avez mentionnés dans le repère <object> seront pris en considération.

La mention datapagesize= (taille de la page de données) dans le repère <table> est également importante. Avec celle-ci, vous mentionnez combien d'enregistrements du fichier externe doivent être affichés simultanément. Si vous omettez cette mention, l'Explorer Internet MS fera automatiquement un tableau assez long pour que tous les enregistrements y soient représentés en une seule fois. Dans l'exemple ci-dessus est mentionné datapagesize=1. Ainsi, exactement un enregistrement sera toujours affiché.

Dans le tableau, vous pouvez reconnaître comment un enregistrement d'une source de données externe y est affiché. Vous pouvez structurer le tableau lui-même comme vous le souhaitez. Il est simplement important de savoir comment est établie la relation à un enregistrement du fichier externe. Dans l'exemple, cela s'obtient dans les cellules correspondantes du tableau à l'aide du repère <span>. Avec une commande comme <span datafld="cpost"></span>, vous avisez le navigateur d'afficher dans la cellule correspondante du tableau le contenu actuel du champ "cpost" de la source de données externe (datafld = data field = champ de données). Pour ce faire, la valeur que vous notez derrière la mention datafld= doit correspondre au nom du champ que vous avez attribué dans la première ligne du fichier de données externe. Veillez aussi à ce que la façon de l'écrire soit exacte.

À côté de la mention datafld= vous pouvez encore mentionner dans un tel passage d'affichage de données la mention dataformatas= (formater les données en tant que). Dans l'exemple ci-dessus, cette mention n'a pas été utlisée. Utilisez dataformatas= quand les données du fichier externe contiennent elles-mêmes des repères HTML. Avec dataformatas="html", vous imposez que les repères notés dans le fichier externe soient interprétés comme des repères HTML.

Étant donné que, dans l'exemple ci-dessus, a été fixé avec datapagesize=1 que toujours un seul enregistrement soit affiché, il n'apparaît d'abord dans le tableau que le contenu de la première ligne de données du fichier externe. Naturellement, il est souhaité que l'utilisateur puisse maintenant feuilleter dans les enregistrements. Pour ce faire ont été définis des boutons pour page suivante et page précédente. Dans l'exemple, ces boutons se trouvent dans la première ligne du tableau. Ils pourraient aussi bien être définis ailleurs.

Avec <input type=button value=" &lt; " onclick="document.all.tableauaffich.previousPage();"> est défini le bouton, qui lorsqu'on le clique appelle l'enregistrement précédent. Avec document.all.tableauaffich vous accédez au tableau dans lequel les données sont affichées (tableauaffich est le nom qui a été attribué au tableau avec id=). Avec <input type=button value=" &gt; " onclick="document.all.tableauaffich.nextPage();"> est défini le bouton qui passe à l'enregistrement suivant. Observez qu' il y a aucune nécéssité à contrôler si l'utilisateur affiche le premier ou le dernier enregistrement. Si l'utilisateur essaie d'appeler un enregistrement qui n'existe pas, aucun message d'erreur n'est rendu: le bouton n'a alors tout simplement aucun effet.

Exemple: rendre possible la recherche de données

Exemple d'affichage: aperçu

L'exemple suivant est basé sur l'  Exemple: lier un fichier de façon dynamique dans un tableau. Ici, il est montré comment vous pouvez permettre à l'utilisateur, à l'aide d'un mot recherché, de n'afficher que les enregistrements dans lesquels le mot recherché apparaît. L'exemple montre aussi comment vous pouvez à l'aide de scripts accéder aux éléments HTML qui concernent la liaison de données.

Exemple (fichier HTML avec accès aux données):

<html>
<head>
<script language="JScript">
function cherche()
{
 var max = 500;
 document.all.affiche.style.display = "none";
 var exprech = "";
 var objetrech = 0;
 if(document.entree.nomcherch.value != "")
  {
   if(objetrech > 0)
     exprech = exprech + " & nom = " + document.entree.nomcherch.value;
   else
     exprech = exprech + "nom = " + document.entree.nomcherch.value;
   objetrech++;
  }
 if(document.entree.prenomcherch.value != "")
  {
   if(objetrech > 0)
     exprech = exprech + " & prenom = " + document.entree.prenomcherch.value;
   else
     exprech = exprech + "prenom = " + document.entree.prenomcherch.value;
   objetrech++;
  }
 document.all.adresses.object.Filter = exprech;
 document.all.adresses.Reset();
 document.all.affiche.dataSrc = "#adresses";
 if(document.all.adresses.recordset.recordCount < max)
  {
   document.all.affiche.dataPageSize = adresses.recordset.recordCount;
   document.all.occur.innerText = adresses.recordset.recordCount + " occurrences!";
   document.all.affiche.style.display = "block";
  }
 else
   document.all.occur.innerText = "0 ou trop d'occurrences!";
}
</script>
</head>
<body>
<object id="adresses" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
 <param name="DataURL" value="donnees.txt">
 <param name="UseHeader" value="true">
 <param name="FieldDelim" value="|">
 <param name="Filter" value="">
</object>
<form name="entree">
Suche nach:<br>
<input name="nomcherch" type="text" width=40> (nom)<br>
<input name="prenomcherch" type="text" width=40> (prenom)<br>
<input type="button" style="width:150px; height:25px;" value="commencer la recherche" onClick="cherche()">
</form>
<span id="occur" style="color:#0000FF; font-weight:bold;"></span>
<table width=98%>
<tr>
<td bgcolor="#EEEEEE" width=10%><b>nom</b></td>
<td bgcolor="#EEEEEE" width=14%><b>prenom</b></td>
<td bgcolor="#EEEEEE" width=14%><b>rue</b></td>
<td bgcolor="#EEEEEE" width=14%><b>cpost</b></td>
<td bgcolor="#EEEEEE" width=14%><b>ville</b></td>
<td bgcolor="#EEEEEE" width=14%><b>téléphone</b></td>
<td bgcolor="#EEEEEE" width=20%><b>E-Mail</b></td>
</tr>
</table>
<table id="affiche" style="display:none" width=98%>
<tr>
<td bgcolor="#FFFFE0" width=10%><span datafld="nom"></span></td>
<td bgcolor="#FFFFE0" width=14%><span datafld="prenom"></span></td>
<td bgcolor="#FFFFE0" width=14%><span datafld="rue"></span></td>
<td bgcolor="#FFFFE0" width=14%><span datafld="cpost"></span></td>
<td bgcolor="#FFFFE0" width=14%><span datafld="ville"></span></td>
<td bgcolor="#FFFFE0" width=14%><span datafld="Tel"></span></td>
<td bgcolor="#FFFFE0" width=20%><span datafld="EMail"></span></td>
</tr></table>
</body>
</html>

Explication:

L'exemple montre le fichier HTML complet pour la réalisation d'une base de données pouvant être parcourue. Pour cela, la source est le fichier texte dans lequel sont rassemblées les adresses. Il s'agit ici du même fichier supposé que dans l'  Exemple: lier un fichier de façon dynamique dans un tableau. Dans le fichier HTML est également noté à nouveau le même repère <object>, pour établir une liaison au fichier externe de données. Un nouveau paramètre est cependant mentionné:
<param name="Filter" value="">
Avec le paramètre Filter, vous pouvez limiter les enregistrements "puisés" dans le fichier de données. Pour cela, vous pouvez mentionner avec value= des critères sélectifs. À la définition de l'objet, dans l'exemple ci-dessus, a été noté value="". Cela signifie qu'il n'y a pas de restrictions. Tous les enregistrements seront trouvés.

Dans le script assez long qui se trouve dans l'entête du fichier HTML, la valeur pour Filter est modifiée de façon dynamique. C'est ainsi que l'affichage est limité à certains enregistrements - à savoir ceux qui correspondent aux critères de filtre.

Les critères pour le filtre doivent pouvoir être fixés par l'utilisateur lui-même dans sa requête de recherche. Dans l'exemple ci-dessus est défini à cette raison sous le repère <object> un formulaire (<form name="entree">). Le formulaire a deux champs de saisie, l'un pour la mention du nom et l'autre pour la mention du prénom. Vous pourriez bien sûr à cet endroit mettre un champ de saisie pour tous les champs de l'enregistrement, dans l'exemple donc pour rue, cpost, tel et E-Mail. Pour simplifier l'exemple, ces champs n'ont pas étés indiqués. L'utilisateur peut remplir un ou même les deux champs. Avec un bouton cliquable, il peut lancer la recherche. Lorsque le bouton est cliqué, la fonction cherche(), définie dans le passage JScript de l'entête de fichier (onClick="cherche()"), est appelée.

Dans la fonction cherche() une variable max se voit d'abord affecter une valeur (500). Ce qui est conseillé pour des bases de données importantes. Car l' Explorer Internet MS livre par défaut, quand il ne trouve aucun enregistrement qui corresponde aux critères, tous les enregistrements en retour. À supposer que vous ayez 5000 enregistrements: un tableau avec 5000 lignes serait affiché. Étant donné que l'affichage d'un tel tableau demande beaucoup de temps, une limitation est judicieuse.

La variable exprech doit enregistrer les critères de l'utilisateur pour parcourir les enregistrements. Pour cela, il est nécessaire de convertir les mentions du champ de saisie en une chaîne de caractères qui correspondent aux règles pour le paramètre Filter.

Les règles importantes qui suivent s'appliquent aux valeurs permises pour Filter (ces règles s'appliquent aussi bien pour l'affectation de valeur dans le repère <object> que pour une pour une affectation dynamique de valeur dans des scripts):
Avec nomduchamp = valeur ne sont trouvés que les enregistrements dans lesquels le champ nomduchamp contient exactement la valeur valeur ni plus ni moins. Pour nom = Martin ne seront donc trouvés que les Martin et aucun Martinez.
Avec nomduchamp <> valeur seront trouvés les enregistrements dans lesquels la valeur valeur apparaît dans le champ nomduchamp - elle peut aussi coïncider exactement avec celui-ci. Pour nom <> Martin seront donc trouvés à la fois les Martin et les Martinez.
Avec nomduchamp > valeur seront trouvés les enregistrements pour lesquels la valeur de nomduchamp est supérieure à valeur. Pour nom > Y ne seront donc trouvés que les noms qui commencent par Z.
Avec nomduchamp >= valeur seront trouvés les enregistrements pour lesquels la valeur de nomduchamp est supérieure ou égale à valeur. Pour nom >= Y ne seront donc trouvés que les noms qui commencent par Y ou par Z.
Avec nomduchamp < valeur seront trouvés les enregistrements pour lesquels la valeur de nomduchamp est inférieure à valeur. Pour nom < D ne seront donc trouvés que les noms qui commencent par A, B ou C.
Avec nomduchamp <= valeur seront trouvés les enregistrements pour lesquels la valeur de nomduchamp est inférieure ou égale à valeur. Pour nom <= D seront donc trouvés les noms qui commencent par A, B, C ou D.
À chaque endroit, il est permis d'employer un signe Joker. Celui-ci est un astérisque (*). Il est placé à la fois pour aucun, un ou un nombre indéterminé de signes.
Vous pouvez également lier logiquement deux ou plusieurs expressions simples de ce type avec le signe & (pour ET) ou | (pour OU inclusif). Si vous liez plusieurs expressions en utilisant aussi bien ET que OU, il vous faut employer des parenthèses, pour vous assurer d'une estimation claire et précise du critère de choix. Une expression complexe de ce genre est par exemple nom > M & cpost = 8*.

Dans le script ci-dessus une valeur d'affectation valable pour Filter est construite avec diverses requêtes if sur les champs de saisie du formulaire. Seule la plus simple des conditions avec le signe égal est mise en oeuvre. Étant donné que l'utilisateur peut entrer lui-même également l'astérisque comme joker dans un champ de saisie, cette recherche simple suffit dans la plupart des cas. Si vous voulez permettre à l'utilisateur des recherches plus complexes, vous devez structurer plus en détail cette partie du script.

Dans la partie inférieure de la fonction cherche() se trouve ensuite l'instruction:
document.all.adresses.object.Filter = exprech;
Avec cette instruction, l'expression qui a été recherchée auparavant puis sauvegardée dans la variable exprech, est affectée au paramètre Filter du repère <object>.

L'instruction suivante est elle aussi d'une importance décisive:
document.all.adresses.Reset();
Avec cette instruction, vous demandez au navigateur de rechercher à nouveau le nombre d'enregistrements à afficher. Étant donné qu'entre temps un filtre a été déterminé, le navigateur ne trouve plus que les enregistrements qui correspondent aux conditions du filtre.

On n'abordera ici pas plus en détail les autres instructions du script et les éléments du fichier HTML. Il s'agit de HTML dynamique simple d'après les règles de l'Explorer Internet MS 4.x.

Repères HTML pour l'affichage de données externes

Dans l'  Exemple: incorporation dynamique d'un fichier dans un tableau les données externes sont affichées chacune dans un repère <span>. Il existe une série d'autres repères HTML dans lesquels vous pouvez afficher des données contenues dans des champs d'une source de données externe. En dehors de ces repères là, un affichage de données externes n'est pas possible. Les repères HTML suivants sont permis:

liens avec <a>...</a>:

Supposons que vous ayez un fichier texte externe lien.txt avec les lignes suivantes:
URL,texte
http://fr.yahoo.com/,Service de recherche Yahoo
Vous pouvez incorporer ce fichier avec le repère <object> comme suit:
<object id="lien" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="lien.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Ensuite, vous pouvez construire le lien suivant:
<a datasrc="#lien" datafld="URL"><span datasrc="#lien" datafld="texte"></span></a>
En notant <a datafld=>, le contenu livré par le champ de données sera estimé comme mention pour href= (dans l'exemple le champ "URL" livre ces mentions). À l'intérieur du lien est ensuite "extrait" l'autre champ à l'aide du repère <span>, à savoir le texte du lien. De tels liens sont à préconiser par exemple quand vous utilisez le même lien à beaucoup d'autres endroits dans vos pages WWW. La cible du lien et le texte du lien sont alors sauvegardés centralement et ne doivent en cas de modifications n'être modifiés que dans le fichier texte. Tous les liens HTML correspondants sont alors ainsi actualisés automatiquement.

Boutons avec <button>...</button>:

Supposons que vous ayez un fichier texte externe donnees.txt avec la structure et les enregistrements d'exemple suivants: ligne,texte
1,ceci est un test
2,avec un bouton
3,intéressant - pas vrai?
Vous pouvez incorporer ce fichier en HTML avec le repère <object> comme suit:
<object id="donnees" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="donnees.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Ensuite, vous pouvez construire par exemple le tableau suivant:
<table id="affiche" datasrc="#donnees" datapagesize=1><tr><td>
<form><button datafld="texte" onClick="document.all.affiche.nextPage()"></button></form>
</td></tr></table>
Ainsi l'utilisateur saute à l'enregistrement suivant à chaque fois qu'il clique sur le bouton et l'inscription sur le bouton prend la valeur actuelle du champ texte.

Passages avec <div>...</div>:

Avec ce repère HTML, vous pouvez par exemple sortir des données externes dans un tableau, exactement comme il est fait dans l'  Exemple: incorporation dynamique d'un fichier dans un tableau avec le repère <span>. La différence entre <div>...</div> et <span>...</span> est que le repère <div> crée un paragraphe distinct, ce qui n'est pas le cas avec le repère <span>.

Graphiques avec <img>:

Supposons que vous vouliez programmer une séance de diapositives. Pour cela vous pouvez créer un fichier texte donnees.txt qui a à peu près la structure suivante:
nombre,image
1,mamaison.gif
2,monbateau.gif
3,monauto.gif
4,etmoi.gif
Vous pouvez incorporer ce fichier en HTML dans le repère <object> de la façon suivante:
<object id="Donnees" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="donnees.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Ensuite vous pouvez par exemple construire le tableau suivant:
<table id="affiche" datasrc="#donnees" datapagesize=1><tr>
<td>
image <span datafld="nombre"></span><br> <input type=button value=" &lt; " onclick="document.all.affiche.previousPage();">
<input type=button value=" &gt; " onclick="document.all.affiche.nextPage();">
</td><td>
<img datafld="image">
</td></tr></table>
Ainsi l'utilisateur peut feuilleter les images avec les boutons prévus à cet effet.

Frames avec <frame>:

Supposons que vous ayez un fichier texte externe meilleurepage.txt avec les lignes suivantes:
Meilleurepage
http://www.selfhtml.com.fr/selfhtml/
Maintenant, il vous est possible de construire le fichier HTML suivant avec un jeu de frames:
<html><head>
<object id="Urlsemaine" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="meilleurepage.txt">
<param name="UseHeader" value="true">
</object></head>
<frameset rows="100,*">
 <frame src="mon.htm">
 <frame datasrc="#Urlsemaine" datafld="Meilleurepage">
</frameset>
</html>
De cette façon, vous pouvez afficher une page dont vous actualisez l'adresse cible dans un fichier texte séparé. L'important est de placer le repère <object> exactement comme dans l'exemple.

Frames incorporées avec <iframe>:

Voyez l'exemple pour les frames. La différence est que vous placez le repère <object> dans un fichier HTML normal. Avec une instruction comme:
 <iframe datasrc="#Urlsemaine" datafld="Meilleurepage"></iframe>
vous pouvez alors afficher le contenu de la page mentionnée dans le fichier texte dans une frame incorporée dans le même fichier HTML.

Etiquettes avec <label>...</label>:

Le repère <label>, nouveau en HTML 4.0, permet l'inscription d'un champ de formulaire. Dans le cadre de la liaison de données, vous pouvez utiliser ce repère HTML si vous voulez sortir les données externes dans des champs de formulaires. Vous pouvez alors affecter le nom de champ, qui est défini dans le fichier de données externes, de façon dynamique au repère <label> que vous assignez par exemple à un champ de saisie. Si le nom de champ est ensuite modifié dans le fichier de données, l'affichage dans le fichier HTML sera automatiquement actualisé. Exemple:
<label for="prenom" datafld="prename"></label>
Ainsi est affecté au contenu du repère <label> d'un champ de formulaire le nom de champ prename, défini dans la base de données.

Texte déroulant avec <marquee>...</marquee>:

Avec ce repère HTML vous pouvez par exemple afficher dans un tableau des données externes exactement comme il est procédé dans l'  Exemple: lier un fichier de façon dynamique dans un tableau avec le repère <span>. La différence entre <marquee>...</marquee> et <span>...</span> est que le repère <marquee> crée un texte déroulant, ce qui n'est pas le cas du repère <span>. Le repère <marquee> ne fait pas partie du standard HTML.

Passages avec <span>...</span>:

Avec ce repère HTML vous pouvez par exemple afficher des données externes dans un tableau exactement comme dans l'  Exemple: lier un fichier de façon dynamique dans un tableau.

Champs de formulaire avec <input>:

Avec ce repère HTML vous pouvez par exemple afficher des données externes dans un tableau, dans des champs de formulaire pouvant être édités. C'est alors particulièrement intéressant quand les données modifiées peuvent être effectivement écrites dans la source de données. Pour de simples fichiers texte ce n'est pour l'instant pas possible, mais ça l'est pour le  Mode de données: Remote Data Service (RDS) et pour le  Mode de données: JDBC DataSource Applet.
L'incorporation en HTML est similaire à celle de l'  Exemple: incorporation dynamique d'un fichier dans un tableau, à cette différence près qu'il vous faut respecter les règles pour incorporer le mode de données désiré. Notez dans le repère d'ouverture <table> du tableau dans lequel vous affichez les enregistrements dans la mesure du possible la mention datapagesize=1. Dans la cellule du tableau dans laquelle vous voulez ainsi afficher les données externes, vous pouvez alors noter (exemples supposés):
<input type=text datafld="prenom">
ou:
<input type=radio name="client" value="déjà client" datafld="dejaclient">
ou:
<input type=checkbox name="paiement" value="Mastercard" datafld="modepaiement">
Les champs de données qui sont affichés dans des champs de saisie du type <input type=text>, peuvent être du texte normal comme par exemple un nom. Les boutons radios et boites de vérification ont d'autres exigences. Un bouton radio est activé à l'affichage quand le contenu du champ de la base de données correspond à la valeur placée derrière la mention value=. Une boite de vérification est marquée quand le contenu du champ concerné dans la base de données est 1, true ou un contenu quelconque avec plus d'un signe. Si le contenu est 0, false ou vide, la boite de vérification n'est pas marquée.

Champs de formulaire avec <select>:

Ici entrent en vigueur les mêmes conditions que pour les champs de formulaire du type <input>. Si la valeur de l'enregistrement actuel de la base de données coïncide avec une des valeurs définie dans la mention value pour un repère option dans la liste de choix, ce choix est sélectionné. Cette possibilité de sortie de données externes n'est intéressante, comme pour les autres champs de formulaire, que si les données peuvent être écrites après modification. Pour les listes de choix par exemple, une nouvelle valeur choisie peut être sauvegardée comme nouveau contenu du champ. L'Explorer Internet MS ne supporte ici que le simple choix, pas le choix multiple.

Autres objets avec <object>...</object>:

Avec le repère <object> vous pouvez travailler exactement comme avec le  repère <img>. La différence est que pour le repère <img> vous êtes limités aux graphiques, alors qu'avec le repère <object>, vous pouvez incorporer quelconques fichiers Multimédia ou contrôles ActiveX. Ainsi, vous pouvez de façon similaire à l'exemple du repère <img> programmer à la place d'une "séance de diapositives", une "séance de musique", constituée par exemple de fichiers MIDI.
Dans le fichier texte externe vous notez les fichiers MIDI choisis et lors de l'incorporation en HTML, vous pouvez, à la place de la liaison de données avec <img>, noter une instruction du genre :
<object datafld="musique" width=0 height=0></object>
(où "musique" doit être noté comme titre de champ dans le fichier texte avec les données).

Applets Java-mit <applet>...</applet>:

Vous pouvez utiliser la propriété de liaison de données pour vous procurer un paramètre d'un applet Java d'une source de données externe. Exemple:
<applet code="deform.class">
 <param name="image" datasrc="#aktuell" datafld="photo_b_gates">
</applet>

Mode de données: Tabular Data Control (TDC)

C'est le mode de données lorsque la source de données externe est un simple fichier texte dans lequel chaque ligne contient un enregistrement, et pour lequel les différents champs des enregistrements sont marqués par un signe délimiteur, par exemple une virgule. Ce mode de données est approprié pour des bases de données plus réduites n'excédant pas quelques milliers d'enregistrements. Vous trouverez ci-dessus un exemple complet pour ce mode de données dans la partie  Exemple: incorporation dynamique d'un fichier dans un tableau. Pour lier une telle source de données à un fichier HTML, vous devez noter l'objet suivant dans le fichier HTML:

Schéma pour l'incorporation en HTML:

<object id="nomobjet" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
 <param name= value=>
 <!-- etc. autres paramètres -->
</object>

Explication:

Pour incorporer de telles données, vous utilisez dans l'Explorer Internet 4.x le contrôle ActiveX avec l' ID 333C7BC4-460F-11D0-BC04-0080C7055A83. À l'intérieur du repère des <object> notez différents paramètres importants pour la présentation des données. Les paramètres suivants sont permis:

<param name="AppendData" value=>	Avec ce paramètre vous pouvez mentionner si dans le tableau de sortie, lorsqu'on feuillette pour chaque nouvel enregistrement (conformément à la taille de datapagesize= les cellules de tableau affichées doivent être écrasées ou si des nouvelles cellules de tableau doivent être ajoutées. Avec value=true vous forcer les données à être ajoutées. Par défaut, les cellules du tableau affichées sont écrasées.
<param name="CaseSensitive" value=>	Avec ce paramètre vous pouvez mentionner si pour les comparaisons des entrées de l'utilisateur avec les données de la source de données, la casse doit être respectée. Cela n'est intéressant que pour le traitement des données avec des scripts. Par défaut la casse est respectée. Avec value=false vous pouvez déconnecter le respect de la casse.
<param name="CharSet" value=>	Avec ce paramètre vous pouvez mentionner le jeu de caractères qui est déterminant pour les données du fichier de données. Par défaut, c'est le jeu de caractères Western Latin-1 (iso-8859-1). N'utilisez ce paramètre que si les données utilisent un jeu de caractères différent par exemple iso-8859-5 pour l'alphabet cyrillique. Avec value= vous pouvez mentionner le jeu de caractères. De plus amples informations dans la partie sur les  jeux de caractères.
<param name="DataURL" value=>	Ce paramètre est absolument nécessaire. Avec value= vous mentionnez le fichier dans lequel se trouvent les données.
<param name="EscapeChar" value=>	Vous devez mentionner ce paramètre si un signe pour masquer est utilisé dans votre fichier de données. C'est le cas par exemple si dans un fichier délimité avec des virgules vous masquez des virgules à l'intérieur des champs avec une barre oblique inversée (\) placée devant. Mentionnez dans ce cas pour value= le signe pour masquer.
<param name="FieldDelim" value=>	Avec ce paramètre vous mentionnez quel signe doit être interprété comme délimiteur de champs dans une ligne du fichier texte externe. Avec value= vous pouvez mentionner le signe.
<param name="Filter" value=>	Avec ce paramètre vous pouvez limiter le choix des données. Par défaut toutes les données du fichier externe sont affichées. Ce paramètre est intéressant avant tout quand l'utilisateur peut définir lui-même la recherche dans un formulaire de saisie et que les entrées peuvent être ensuite à l'aide d'un script affectées de façon dynamique à ce paramètre du repère <object>. Avec value= vous pouvez mentionner le filtre. Exemples: value="Telephone <> '0442*'" ne trouve dans le champ "Telephone" que les numéros qui commencent par 0442. value="cpost > '50000'" ne trouve dans le champ "cpost" pour code postal que les valeurs plus élevées que 50000.
<param name="Language" value=>	Avec ce paramètre vous pouvez mentionner la langue dans laquelle sont disponibles les données du fichier de données externes. Pour cela les noms de langue comme ils sont définis dans l' ISO 369 sont déterminants. Avec value= vous pouvez mentionner la langue.
<param name="RowDelim" value=>	Si votre fichier de données externes est structuré de telle façon qu'un signe délimiteur d'enregistrement se trouve à la fin d'un enregistrement, vous devez mentionner ce signe avec ce paramètre. Notez le derrière value=.
<param name="Sort" value=>	Avec ce paramètre vous pouvez faire en sorte que pour une sortie de plusieurs enregistrements (donc pour datapagesize= plus grand que 1) les enregistrements affichés soient triés d'après un champ déterminé. Exemple: value="cpost" trie les données à afficher d'après un champ nommé "cpost". value="-cpost" trie les données à afficher d'après un champ nommé "cpost", et cela par ordre décroissant (signe moins qui précède). value="nom; cpost" trie les données à afficher d'abord d'après un champ nommé "nom" puis d'après un champ "cpost".
<param name="TextQualifier" value=>	Si votre fichier de données externes est structuré de telle façon que tous les champs de données soient inclus dans des signes déterminés, par exemple entre parenthèses, alors vous devez mentionner le signe concerné avec ce paramètre. Avec value="'"'" par exemple, vous déterminez les guillemets comme signe marquant le début et la fin du champ.
<param name="UseHeader" value=>	Vous devez mentionner ce paramètre quand la première ligne du fichier de données externe ne contient pas de données mais les noms de champ concernant les données. Avec value=true le fichier de données est interprété comme si la première ligne contenait des noms de champ. Avec value=false il est interprété comme s'il contenait des données dés la première ligne.

Mode de données: Remote Data Service (RDS)

Par le mode de données Remote Data Service (RDS) vous pouvez réaliser la liaison d'un fichier HTML avec les données d'une base de données. Ce modèle est approprié pour des bases de données qui disposent d'un port de base de données OLE-DB ou ODBC (DBMS). C'est le cas par exemple de MS Access, Oracle ou Serveur SQL comme msql. Veuillez vous informer sur les produits correspondants et la structure des bases de données avec ces produits chez leurs constructeurs respectifs. Pour réaliser une telle liaison de données sur le WWW, une application de base de données doit être installée sur l'ordinateur serveur. Demandez le cas échéant à votre fournisseur d'accès.

Pour lier une telle source de données à un fichier HTML, vous devez noter l'objet suivant dans le fichier HTML :

Schéma pour la liaison en HTML:

<object id="nomobjet" classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33">
 <param name= value=>
 <!-- etc. autres paramètres -->
</object>

Explication:

Pour incorporer de telles données, vous utilisez dans l'Explorer Internet 4.x le contrôle ActiveX avec l' ID BD96C556-65A3-11D0-983A-00C04FC29E33 À l'intérieur du repère <object> notez différents paramètres importants pour la présentation des données. Les paramètres suivants sont permis:

Attention:

De telles liaisons de données ne sont judicieuses que si vous mettez à la disposition de l'utilisateur un formulaire HTML dans lequel il puisse faire ses entrées pour parcourir la base de données. À l'aide d'un script JavaScript vous pouvez ensuite transformer les entrées de l'utilisateur en une commande SQL valable que vous affecterez dans le script au paramètre SQL du repère object. Ainsi par exemple vous pouvez avec l'instruction JavaScript:
document.all.basedonn.SQL = requete;
affecter une requête SQL. Dans cet exemple, "basedonn" est le nom attribué dans le repère object comme id= et requete est une variable qui a créé auparavant une commande SQL à partir des saisies de l'utilisateur. Avec de telles bases de données, il est également possible d'écrire des commandes SQL pour écrire les enregistrements modifiés dans la base de données. La condition en est que les données soient affichées dans le fichier HTML dans des champs de saisie pouvant être édités (par exemple: <input...>).

Des informations complètes pour organiser et réaliser une base de données avec des scripts peuvent être trouvées dans  Microsoft Internet Client SDK (documentation de toutes les technologies Internet de Microsoft).

Mode de données: JDBC DataSource Applet

Le mode de données JDBC DataSource Applet accède à des bases de données qui disposent d'un port de base de données OLE-DB ou ODBC (DBMS) comme par exemple de MS Access, Oracle ou Serveur SQL comme msql comme le mode de données Remote Data Service (RDS). la différence entre le JDBC DataSource Applet et le Remote Data Service (RDS) est que ce dernier est incorporé comme contrôle ActiveX, tandis que le JDBC DataSource Applet est un applet Java. Microsoft veut ainsi mettre sa technologie de liaison de données à la disposition d'autres navigateurs qui ne supportent aucun ActiveX mais supportent Java, C'est le cas en fait de Netscape et de quelques autres navigateurs mais aussi longtemps cependant que ceux-ci ne supporteront pas le concept de liaison des données en HTML dynamique tout est, à vrai dire, assez dénué de sens.

L'applet Java qui dirige cette forme de liaison des données ne fait pas partie de la livraison de l'Explorer Internet MS. Sur les pages WWW de Microsoft vous pouvez  télécharger l'applet Java JDBC DataSource .

Pour réaliser une telle liaison de fichiers sur le WWW, L'application de bases de données doit être installée sur l'ordinateur serveur. Demandez là aussi à votre fournisseur d'accès.

Pour lier une telle source de données à un fichier HTML vous devez noter l'applet Java JDBC DataSource dans le fichier HTML.

Schéma pour la liaison en HTML:

<applet code="JDC.class" name="DSA1" id="DSA1" width=0 height=0>
 <param name= value=>
 <!-- etc. autres paramètres -->
</applet>

Explication:

L'applet Java est incorporé comme d'habitude en HTML avec le repère <applet>. Avec l'attribut code= mentionnez le fichier exécutable Java. C'est le fichier JDC.class, que vous recevez quand vous téléchargez l'applet Java JDBC DataSource. Dans l'applet, notez les différents paramètres dont l'applet a besoin pour travailler correctement. Des informations avancées sur ces paramètres peuvent être prises dans la documentation d'origine de l'applet. L'applet attend les paramètres suivants:

Attention:

Pour le mode de données de l'applet Java JDBC DataSource valent les  observations concernant le mode de données Remote Data Service (RDS).

Mode de données: XML Data Source

Le mode de donnés XML Data Source pourrait devenir très intéressant à l'avenir étant donné qu'il utilise le langage standard XML du consortium W3 pour la définition de données. Avec ce mode de données, les données sont sauvegardées dans un fichier XML. Pour les enregistrements et les champs de données vous pouvez inventer dans un fichier XML vos propres repères et leur imbrication. Un schéma vraisemblable pour un fichier d'adresses serait à peu près:
<adresse>
 <nom>Dupond</nom>
 <prenom>Jean</prenom>
 <ville>Bordeaux</ville>
 <telephone>05-56123456</telephone>
</adresse>
Le fichier doit correspondre aux conventions pour la structure d'un fichier XML. Lisez à ce sujet la  XML-Specification du consortium W3. Une version très bien faite en langue allemande  introduction en XML a été faite par Kuno Dünhölter.

Dans la livraison de l'Explorer Internet MS 4.x figure un applet Java, qui interprète de telles structures de repères dans des fichiers XML et en recherche la structure.

Pour lier ce genre de sources de données à un fichier HTML, vous devez noter l'applet Java correspondant dans le fichier HTML.

Schéma pour l'incorporation en HTML:

<applet class=com.ms.xml.dso.xmldso.class id="xmldso" width=0 height=0 mayscript=true>
 <param nom="url" value=>
</applet>

Explication:

L'applet Java est incorporé comme d'habitude en HTML avec la repère <applet>. Notez le repère d'ouverture <applet> exactement comme dans le schéma ci-dessus. La raison pour la mention pour class= un peu inhabituelle est que cet applet est une ressource interne de l'Explorer Internet MS et non pas un fichier séparé.

L'applet attend exactement un paramètre :
Avec <param nom="url" value=> vous mentionnez avec value= le nom de fichier du fichier XML. Pour le faire sont permises naturellement des mentions de chemin relatives ou même des adresses URL absolues.

Mode de données: MSHTML Data Source

Ce que vous pouvez résoudre de façon particulièrement élégante avec XML, se résout un peu moins élégamment avec HTML lui même: derrière le mode de données MSHTML Data Source ne se cache rien d'autre qu'une convention d'après laquelle les données sont tenues dans un fichier HTML - ce fichier HTML sert alors de source externe pour un autre fichier HTML dans lequel les données sont affichées. Un schéma pour un enregistrement d'un fichier adresse serait à peu près:
<div id="Adresse">
 <span id="Nom">Meyer</span><br>
 <span id="prenom">Hubert</span><br>
 <span id="ville">Hambourg</span><br>
 <span id="telephone">040-598487374</span><br>
</div>

Pour lier ce genre de source de données à un fichier HTML, vous devez pour cela noter un simple objet.

Schéma pour l'incorporation en HTML:

<object id="donnees" data="donnees.htm" width=0 height=0>
</object>

Explication:

Dans le repère <object> vous attribuez comme d'habitude un nom avec id=, sous lequel vous pouvez adresser l'objet et afficher les données d'un autre fichier dans un tableau de façon dynamique. L'accès aux enregistrements fonctionne ici exactement comme dans l'  Exemple: incorporation dynamique d'un fichier dans un tableau. Avec datafld= vous mentionnez le nom que vous avez attribué avec id= dans le fichier HTML externe pour chaque champ correspondant de l'enregistrement par exemple. "prenom".

après:	Filtres dynamiques (Microsoft)
avant:	Accès dynamique à des éléments HTML (Microsoft)

SELFHTML/Quickbar  HTML dynamique  Les apports de Microsoft et de Netscape

© 1998 Stefan Münz / © 2001 Traduction  Serge François, 13405@free.fr