SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML| SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML |
Généralités sur la liaison de donnéesL'Explorer Internet MS à partir de la version 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 clic sur le bouton correspondant, peut faire s'afficher les finales de la coupe de France de la saison 1960 à nos jours. À chaque clic, 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 Active-X 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.
Aujourd'hui, le modèle de la liaison de données côté client, introduite par Microsoft avec l'Explorer Internet 4.0 doit pourtant être considéré d'un œil critique. La raison en est, d'une part qu'il repose sur des concepts extrêmement spécifiques en particulier en ce qui concerne l'incorporation des contrôles Active-X peu appréciés en général. Et d'autre part, les serveurs Web se sont entre-temps si fortement implantés que dans la plupart des cas - même localement - il est plus judicieux de mettre en œuvre côté serveur des 
scripts CGI pour le traitement des données.
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: lier un fichier de façon dynamique dans un tableauLa 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.
nom|prenom|rue|cpost|ville|Tel|courriel 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 |
Le fichier externe est ici un simple fichier texte, par exemple un fichier nommé adresses.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.
<html><head><title>Test</title></head> <body> <object id="Adresses" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="adresses.txt"> <param name="UseHeader" value="true"> <param name="FieldDelim" value="|"> </object> <form action=""> <table id="tableau_affiche" datasrc="#adresses" datapagesize="1" width="100%" border="1"> <colgroup><col width="200"><col></colgroup> <tr> <td bgcolor="#EEEEEE"><b>adresses</b></td> <td bgcolor="#EEEEEE" align="right"> <input type="button" value=" < " onclick="document.all.tableau_affiche.previousPage();"> <input type="button" value=" > " onclick="document.all.tableau_affiche.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>Courriel:</b></td> <td bgcolor="#FFFFE0" valign="top"><span datafld="courriel"></span></td> </tr></table></form> </body> </html> |
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 évocateur, dans l'exemple ci-dessus par exemple: "Adresses". Comme deuxième paramètre vous devez référencer le contrôle Active-X 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 Active-X 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 Active-X 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 ligne 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 : tableau_affiche). 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é utilisé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=" < "
onclick="document.all.tableau_affiche.previousPage();"> est défini le bouton, qui lorsqu'on le clique appelle l'enregistrement précédent. Avec document.all.tableau_affiche vous accédez au tableau dans lequel les données sont affichées (tableau_affiche est le nom qui a été attribué au tableau avec id=). Avec <input type=button value=" > "
onclick="document.all.tableau_affiche.nextPage();"> est défini le bouton qui passe à l'enregistrement suivant. Observez qu' il y a aucune nécessité à 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éesL'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 d'affichage: aperçu (62 Koctets)
allemand;anglais;francais;italien;espagnol Rechner;computer;ordinateur;computer, calcolatore;ordenador Maschine;machine (s);machine;macchina;m�quina Personalcomputer;personal computer;ordinateur personnel (m);computer personale;ordenador personal arbeitender Rechner;active computer;ordinateur en session;computer attivo;ordenador activado ... usw. ... |
Le fichier de données de cet exemple montre un dictionnaire spécialisé multilingue. Dans la première ligne sont définies les langues. Au dessous se trouvent les mots dans les langues respectives. Les enregistrements pour les différentes langues sont séparés par des point-virgules (;). Si, pour l'une des langues, plusieurs mots sont concernés, ils sont séparés par des virgules, comme dans la deuxième ligne pour le mot italien pour ordinateur: computer, calcolatore.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
function rechercher() {
var enregistrements = 1000;
document.all.tableau_affiche.style.display = "none";
var expression_recherche = "";
var terme_recherche = 0;
if(document.saisie.cherche_allemand.value != "") {
expression_recherche = expression_recherche + "allemand = " + document.saisie.cherche_allemand.value;
terme_recherche++;
}
if(document.saisie.cherche_anglais.value != "") {
if(terme_recherche > 0)
expression_recherche = expression_recherche + " & anglais = " + document.saisie.cherche_anglais.value;
else
expression_recherche = expression_recherche + "anglais = " + document.saisie.cherche_anglais.value;
terme_recherche++;
}
if(document.saisie.cherche_francais.value != "") {
if(terme_recherche > 0)
expression_recherche = expression_recherche + " & francais = " + document.saisie.cherche_francais.value;
else
expression_recherche = expression_recherche + "francais = " + document.saisie.cherche_francais.value;
terme_recherche++;
}
if(document.saisie.cherche_italien.value != "") {
if(terme_recherche > 0)
expression_recherche = expression_recherche + " & italien = " + document.saisie.cherche_italien.value;
else
expression_recherche = expression_recherche + "italien = " + document.saisie.cherche_italien.value;
terme_recherche++;
}
if(document.saisie.cherche_espagnol.value != "") {
if(terme_recherche > 0)
expression_recherche = expression_recherche + " & espagnol = " + document.saisie.cherche_espagnol.value;
else
expression_recherche = expression_recherche + "espagnol = " + document.saisie.cherche_espagnol.value;
terme_recherche++;
}
document.all.termes.object.filtre = expression_recherche;
document.all.termes.Reset();
document.all.tableau_affiche.dataSrc = "#termes";
if(document.all.termes.recordset.recordCount < enregistrements) {
document.all.tableau_affiche.dataPageSize = termes.recordset.recordCount;
document.all.occurrence.innerText = termes.recordset.recordCount + " occurrences!";
document.all.tableau_affiche.style.display = "block";
}
else
document.all.occurrence.innerText = "0 occurrence!";
}
//-->
</script>
</head>
<body>
<object id="termes" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="dico.txt">
<param name="UseHeader" value="true">
<param name="filtre" value="">
<param name="FieldDelim" value=";">
</object>
<p>La base de donn�es o� s'effectuent les recherches contient 1000 enregistrements. Recherchez des termes dans une pou plusieurs langues. Pour la recherche dans plusieurs langues les saisies seront reli�es avec l'op�rateur logique ET. Vous pouvez �galement utiliser le caract�re de ramplacement <b>*</b> pour des expressions partielles. Recherchez par exemple dans le champ (allemand) apr�s <b>Arbeits*</b> ou dans le champ (italien) apr�s <b>*ore</b> ou dans le champ (anglais) apr�s <b>*computer</b>.</p> ou dans le champ (francais) apr�s <b>ordinateur*</b>.</p>
<form name="saisie" action="">
Recherche:<br>
<input name="cherche_allemand" type="text" width="40"> (allemand)<br>
<input name="cherche_anglais" type="text" width="40"> (anglais)<br>
<input name="cherche_francais" type="text" width="40"> (francais)<br>
<input name="cherche_italien" type="text" width="40"> (italien)<br>
<input name="cherche_espagnol" type="text" width="40"> (espagnol)<br>
<input type="button" style="width:150px; height:25px;" value="lancer la recherche" onClick="rechercher()">
</form>
<table border="1" cellpadding="1" cellspacing="0"><tr><td>
<table width="100%">
<tr>
<td valign="top" colspan="5">
<span id="occurrence" style="color:#0000CC; font-weight:bold;"> </span>
</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>allemand:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>anglais:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>francais:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>italien:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>espagnol:</b></td>
</tr>
</table>
<table id="tableau_affiche" style="display:none" width="100%">
<tr>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="allemand"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="anglais"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="francais"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="italien"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="espagnol"></span></td>
</tr>
</table>
</td></tr></table>
</body>
</html>
|
L'exemple montre le fichier HTML complet pour la réalisation d'une base de données pouvant être parcourue. Dans le fichier HTML est encore noté comme dans l' exemple: lier un fichier de façon dynamique dans un tableau, le repère <object> pour établir une liaison au fichier externe de données. Un nouveau paramètre est cependant mentionné:
<param name="filtre" value="">
Avec le paramètre filtre, 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 filtre 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="saisie" action="">>). Le formulaire a cinq champs de saisie, l'un pour chacune des cinq langues du dictionnaire multilingue. Avec un bouton pouvant être cliqué, l'utilisateur peut lancer la recherche. Lorsque le bouton est cliqué, la fonction rechercher(), définie dans le passage JScript de l'entête de fichier (onClick="rechercher()"), est appelée.
Dans la fonction rechercher() une variable enregistrements se voit d'abord affecter une valeur (1000). 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 expression_recherche 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 filtre.
Les règles importantes qui suivent s'appliquent aux valeurs permises pour filtre (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 caractère de remplacement. 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 filtre 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 rechercher() se trouve ensuite l'instruction:
document.all.termes.object.filtre = expression_recherche;
Avec cette instruction, l'expression qui a été recherchée auparavant puis sauvegardée dans la variable expression_recherche, est affectée au paramètre filtre du repère <object>.
L'instruction suivante est elle aussi d'une importance décisive:
document.all.termes.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 externesDans 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:
<a>...</a>:Supposons que vous ayez un fichier texte externe lien.txt avec les lignes suivantes:
URL,texte du lien
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 datafld="texte du lien" datasrc="#lien"></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 globalement 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.
<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 action=""><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
<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 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.
<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>
Bild <span datafld="nombre"></span><br>
<input type=button value=" < "
onclick="document.all.affiche.previousPage();">
<input type=button value=" > "
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.
<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 cadres:
<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.
<iframe>:Voyez l'exemple pour les cadres. 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.
<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="prenom"></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.
<marquee>...</marquee>:Avec ce repère HTML qui est cependant décrié entre-temps comme exemple type des extensions HTML spécifiques à une firme, 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.
<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.
<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 bien:
<input type="radio" name="client" value="déjà client" datafld="déjà client">
ou bien:
<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.
<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.
<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 Active-X. 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).
<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="#actuel" 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:
<object id="nomobjet" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name= value=> <!-- etc... autres param�tres --> </object> |
Pour incorporer de telles données, vous utilisez dans l'Explorer Internet 4.x le contrôle Active-X avec l' ID 333C7BC4-460F-11D0-BC04-0080C7055A83. À 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:
|
|
|
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 :
<object id="nomobjet" classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"> <param name= value=> <!-- etc... autres param�tres --> </object> |
Pour incorporer de telles données, vous utilisez dans l'Explorer Internet 4.x le contrôle Active-X 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:
|
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.basedonnees.SQL = requete
affecter une requête SQL. Dans cet exemple, "basedonnees" 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 la 
page des développeurs de Microsoft. Là recherchez Microsoft Internet Client SDK .
|
|
Mode de données: JDBC DataSource AppletLe 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 Active-X, 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 Active-X 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 Web 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.
<applet code="JDC.class" name="DSA1" id="DSA1" width="0" height="0"> <param name= value=> <!-- etc... autres param�tres --> </applet> |
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:
|
Pour le mode de données de l'applet Java JDBC DataSource s'appliquent les observations concernant le mode de données Remote Data Service (RDS).
|
|
Mode de données: XML Data SourceLe 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, le chapitre sur XML/DTDs.
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.
<applet class=com.ms.xml.dso.xmldso.class id="xmldso" width="0" height="0" mayscript=true> <param name="url" value=> </applet> |
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 name="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 SourceCe 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">Dupond</span><br>
<span id="prenom">Jean</span><br>
<span id="ville">Bordeaux</span><br>
<span id="Telephone">05-56123456</span><br>
</div>
Pour lier ce genre de données dans un fichier HTML, il vous faut noter un simple objet.
<object id="Donnees" data="donnees.htm" width="0" height="0"> </object> |
Dans le repère <object> vous attribuez comme d'habitude un nom avec id= , nom par lequel vous pouvez adresser l'objet et afficher de façon dynamique dans un tableau, les données de l'autre fichier. 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".
|
| |
 |
 Filtres dynamiques (seulement Microsoft)
|
 |
L'ancien modèle DHTML de Netscape
|
| SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@selfhtml.com.fr