populate() est une fonction écrite en Javascript/Jquery. Sa principale fonction est de «peupler» différentes zones d’une page HTML en puisant les données dans un ilot XML se trouvant dans l’entête du document. Cet ilot fait office de source de données provisoire qui sera remplacé à terme par les données réelles (venant du serveur ou d’un service web).
Grâce à populate() et à l’ilot XML associé, les concepteurs front-end peuvent produire des pages pleinement fonctionnelles d’un bout à l’autre en créant et en modifiant leurs propres sources de données durant les tests. Grâce à des syntaxes très simples ces données fictives peuvent être exploitées comme si elles étaient réelles. Ils ont l’assurance que leur code côté client fonctionnera lorsque le serveur fournira les données réelles.
Ainsi, la charge des développeurs back-end s’en trouve soulagée. Ils n’ont plus à reprendre des maquettes avec des textes saisis «en dur» pour y insérer des champs et des processus dynamiques. Leur travail consiste uniquement à construire un ilot XML conforme à ce que la page attend.
S’ils le souhaitent les développeurs back-end peuvent imposer une structure précise de l’ilot XML et fournir à l’équipe front-end le schéma à respecter. Mais il est possible de s’affranchir de cette dépendance (souvent pénalisante pour les deux équipes), en transférant la compétence à l’équipe front-end, car la syntaxe d’un ilot XML est très facile, et nécessite très peu de formation pour des personnes connaissant le HTML.
Par ailleurs, un certain nombre d’options liées à populate() permettent de bénéficier d’opérations inexistantes en HTML, telles que les tests, les boucles, etc.
Populate() est pleinement compatible avec les normes du web et les langages habituellement utilisés. Aucun conflit n’est à craindre lors de l’utilisation de bibliothèques telles que Bootstrap, Jquery, Datatable, etc.
Première approche #
Voici une source de données XML (à placer avant la section BODY du document) :
<application>
<nomCourt>EOL</nomCourt>
<nomComplet>Etudes ONLINE</nomCourt>
<editeur>
<raisonSociale>Medsharing</raisonSociale>
<tel>01.48.75.39.14</tel>
<eMail>support@medsharing.fr</eMail>
<lienSupport>https://www.medsharing.fr/eol/support</lienSupport>
</editeur>
</application>Et voici la zone de la section BODY qui utilise ces données :
<p data-src="/">
L'application {application.nomCourt} a été créée
par la société <b>{application.editeur.raisonSociale}</b>
Pour contacter le support technique vous disposez de 3 possibilités :
</p>
<ul data-src="/application.editeur">
<li>Par téléphone : {tel} </li>
<li>Par courrier électronique :
<a href="mailto:{eMail}">{eMail}</a>
</li>
<li>Via la page Support de notre site :
<a href="{lienSupport}">cliquez ici</a>
</li>
</ul>Grâce à l’attribut data-src, la fonction populate() puise les données dans l’ilot XML. Dans notre exemple voici à quoi ressemblera le résultat :
| L’application EOL a été créée par la société Medsharing. Pour contacter le support technique vous disposez de 3 possibilités : Par téléphone : 01.48.75.39.14Par courrier électronique : support@medsharing.frVia la page Support de notre site : cliquez ici |
Le code nécessaire pour lancer la fonction populate() est également standard :
<script language="javascript" src="/assets/jquery/3.5.1/jquery.min.js"></script>
<script language="javascript" src="/assets/javascript/populate.js"></script>
<script>
// code préalable au peuplement
populate();
// code après peuplement
</script>Note : il s’agit de l’utilisation la plus simple. La fonction populate() peut également être lancée sur l’évènement onload de <body> ou être intégrée dans une autre fonction comme $(document).ready() de Jquery.
L’attribut data-src et les «variables» #
La fonction populate() parcourt la page HTML pour y effectuer des remplacements, des déplacements, des effacement et des copies. Il suffit d’ajouter quelques attributs dans les balises HTML pour indiquer à la fonction qu’il y a un traitement à effectuer sur un bloc. L’attribut data-src (utilisé dans notre exemple) est le plus courant : Il permet à populate() d’explorer le contenu du bloc et de remplacer les textes entre accolades par les données extraites dans l’ilot XML.
La syntaxe des chaines se trouvant entre accolades est similaire à celle qu’on utilise dans la plupart des langages objet. Dans le premier paragraphe de notre page-exemple {application.nom} désigne le nom de l’application, puis {application.editeur.raisonSociale} désigne la raison sociale de l’éditeur de l’application.
Contenu de data-src #
Rappel du code (identique à celui se trouvant en page 2)
<p data-src="/">
L'application {application.nomCourt} a été créée
par la société <b>{application.editeur.raisonSociale}</b>
Pour contacter le support technique vous disposez de 3 possibilités :
</p>
<ul data-src="/application.editeur">
<li>Par téléphone : {tel} </li>
<li>Par courrier électronique :
<a href="mailto:{eMail}">{eMail}</a>
</li>
<li>Via la page Support de notre site :
<a href="{lienSupport}">cliquez ici</a>
</li>
</ul>Le premier paragraphe de notre code HTML est informé qu’il faut chercher les données à partir de la racine de l’ilot (data-src= »/ »>). Ensuite, nous informons la balise <ul> que ses données se trouvent toutes dans le nœud « application.editeur« . Il est donc inutile de le répéter dans les accolades, populate() va chercher {tel}, {eMail} et {lienSupport} dans le nœud spécifié.
Ceci-dit cette syntaxe aurait été donné le même résultat :
<ul data-src="/">
<li> Par téléphone : {application.editeur.tel} </li>
<li> Par courrier électronique :
<a href="mailto:{application.editeur.eMail}">
{application.editeur.eMail}
</a>
</li>
<li> Via la page Support de notre site :
<a href="{application.editeur.lienSupport}">cliquez ici</a>
</li>
</ul>Elle est juste plus longue à écrire et plus pénible à lire.
Le nœud parent « ../ » #
Reprenons l’exemple précédent :
<ul data-src="/application.editeur">
<li>Par téléphone : {tel} </li>
<li>Par courrier électronique :
<a href="mailto:{eMail}">{eMail}</a>
</li>
<li>Via la page Support de notre site :
<a href="{lienSupport}">cliquez ici</a>
</li>
</ul>Supposons que nous souhaitions afficher comme première possibilité :
- Par le numéro du support dédié à EOL : 01.48.75.39.14
La variable contenant « EOL » s’intitule nomCourt, on serait donc tenté d’écrire ceci :
<li> Par le numéro du support dédié à {nomCourt} : {tel} </li>Or nomCourt ne se trouve pas dans le nœud « application.editeur« , mais au niveau du dessus (c’est le nom court de l’application, pas de l’éditeur). Une solution possible serait de donner à data-src la valeur « application« , puis d’utiliser « editeur. » Pour toutes les variables concernant l’éditeur :
<ul data-src="/application">
<li> Par le numéro du support dédié à {nomCourt} : {editeur.tel} </li>
<li>Par courrier électronique :
<a href="mailto:{editeur.eMail}">{editeur.eMail}</a>
</li>
<li>Via la page Support de notre site :
<a href="{editeur.lienSupport}">cliquez ici</a>
</li>
</ul>Or la plupart des données de ce bloc concernent l’éditeur. Seul le nom court fait exception. Il est donc préférable de redonner à data-src la valeur « application.editeur« , et de faire appel à la variable nomCourt en remontant d’un niveau grâce à « ../ » :
<ul data-src="/application.editeur">
<li> Par le numéro du support dédié à {../nomCourt} : {tel} </li>
<li>Par courrier électronique :
<a href="mailto:{eMail}">{eMail}</a>
</li>
<li>Via la page Support de notre site :
<a href="{lienSupport}">cliquez ici</a>
</li>
</ul>Il n’est pas possible de remonter de plusieurs niveaux avec une syntaxe du type « ../../../ ». C’est un limite volontaire, car cela deviendrait vite illisible et contreproductif. Seul le nœud du parent direct est accessible grâce à « ../ ».
Hiérarchie des data-src imbriqués #
Ajoutons une adresse au niveau de l’éditeur :
<application>
<nomCourt>EOL</nomCourt>
<nomComplet>Etudes ONLINE</nomCourt>
<editeur>
<raisonSociale>Medsharing</raisonSociale>
<tel>01.48.75.39.14</tel>
<eMail>support@medsharing.fr</eMail>
<lienSupport>https://www.medsharing.fr/eol/support</lienSupport>
<adresse>
<rue1>64 boulevard Victor Hugo</rue1>
<rue2>Immeuble Fantine</rue2>
<codePostal>75016</codePostal>
<ville>Paris</ville>
</adresse>
</editeur>
</application>Nous souhaitons ajouter ceci à notre page :
| Medsharing vous remercie pour votre achat. Pour mieux nous connaître, venez nous rencontrer dans nos bureaux à Paris à l’adresse suivante : – 64 boulevard Victor Hugo, Immeuble Fantine |
Le code le plus optimisé est celui-ci :
<div data-src="/application.editeur">
<p>{raisonSociale} vous remercie pour votre achat.</p>
<p data-src="adresse">
Pour mieux nous connaître, venez nous rencontrer
dans nos bureaux à {ville} à l'adresse suivante :
- {rue1}, {rue2}
</p>
</div>Le premier paragraphe va puiser ses données dans « application.editeur« . Le deuxième paragraphe est imbriqué dans le bloc <div> et désigne un data-src sans passer par la racine (sans utilise le slash). Ceci signifie que le chemin exploré sera application.editeur.adresse.
En cas de doute, nous pourrions repartir de la racine en écrivant :
<p data-src="/application.editeur.adresse">Mais ce serait dommage de se priver de l’avantage des imbrications hiérarchiques lorsque c’est possible.
Les ilots XML #
L’ilot XML peut être construit à la volée, puis évoluer en cours de route. Il n’y a pas d’obligation de respecter un schéma précis sauf si l’équipe back-end le précise. En effet, il peut arriver parfois que pour des raisons liées aux langages ou aux base de données côté serveur (cf. sérialisation XML), le schéma soit différent de celui attendu, tout en désignant les mêmes données. Par exemple :
<application nomCourt="EOL" nomComplet="Etudes ONLINE">
<editeur raisonSociale="Medsharing" Tel="01.48.75.39.14"
eMail=support@medsharing.fr
lienSupport=" https://www.medsharing.fr/eol/support">
<adresse rue1="64 boulevard Victor Hugo" rue2="Immeuble Fantine"
codePostal="64 boulevard Victor Hugo" ville="Paris">
</adresse>
</editeur>
</application>Que les données soient placées dans les attributs ou entre les balises ouvrantes/fermantes, la syntaxe qui permet de les exploiter dans la section <body> est la même.
En revanche, il peut arriver que les développeurs côté serveur décident de changer quelques noms d’attributs ou de balises. Dans cas, il faudra apporter quelques aménagements dans les data-src et/ou dans le contenu des accolades.
Pour des raisons historiques, et parfois par commodité, cette syntaxe pourrait être trouvée
sur certaines pages :
<application nomComplet="Etudes On-Line" nomCourt="EOL">
<editeur>
<champ nom="raisonSociale" valeur="Medsharing"></champ>
<champ nom="Tel" valeur="01.48.75.39.14"></champ>
<champ nom="eMail" valeur="support@medsharing.fr"></champ>
<champ nom="lienSupport" valeur="https://www.medsharing.fr/eol/support"></champ>
</editeur>
</application>La fonction populate() sait explorer ces différentes syntaxe (même si on les utilise dans le même document).
