Les templates
Le principe de templates a été introduit la première fois dans « Web Forms 2 » et sera appliqué à HTML5. L’idée est d’éviter les répétitions inutiles de code. Prenez l’exemple d’un formulaire de commandes de produits. Vous allez donc afficher à l’utilisateur une série de lignes qui contiendront toutes la même chose:
-
Un
inputde typetextpour la référence du produit. -
Un
inputde typenumber(rappelez vous qu’on parle de HTML5
) pour la quantité. -
Un
inputde typecheckboxpour indiquer si le produit doit être emballé dans un papier cadeau.
Si on prend cet exemple avec 4 lignes de produits, ça donnerait:
<body> <form> <table> <thead> <tr> <th>Référence</th> <th>Quantité</th> <th>Papier cadeau</th> </tr> </thead> <tbody> <tr> <td> <input type="text" name="ligne0.ref" value=""/></td> <td> <input type="number" name="ligne0.qte" value="1"/></td> <td> <input type="checkbox" name="ligne0.cadeau" value="1"/></td> </tr> <tr> <td> <input type="text" name="ligne1.ref" value=""/></td> <td> <input type="number" name="ligne1.qte" value="1"/></td> <td> <input type="checkbox" name="ligne1.cadeau" value="1"/></td> </tr> <tr> <td> <input type="text" name="ligne2.ref" value=""/></td> <td> <input type="number" name="ligne2.qte" value="1"/></td> <td> <input type="checkbox" name="ligne2.cadeau" value="1"/></td> </tr> <tr> <td> <input type="text" name="ligne3.ref" value=""/></td> <td> <input type="number" name="ligne3.qte" value="1"/></td> <td> <input type="checkbox" name="ligne3.cadeau" value="1"/></td> </tr> </tbody> </table></form> </body> |
Bref, un code un peu lourd … Sans compter que si on a écrit le document « à la main », c’est très souvent la source d’erreur. Encore pire: si l’utilisateur souhaite commander 5 produit, on doit générer un nouveau document (soit en passant par une application coté serveur soit par un javascript plutôt lourd). En gros, ce n’est pas l’idéal.
Les templates viennent au secours des auteurs face à ce problème. Ainsi, il suffit de prendre un élément, de lui préciser qu’il devra être répéter et lui dire combien de fois il devra être répété. Voici ce que devient l’exemple ci-dessus:
<body> <form> <table> <thead> <tr> <th>Refference</th> <th>Quantité</th> <th>Papier cadeau</th> </tr> </thead> <tbody> <tr id="elt" repeat="template" repeat-start="4"> <td> <input type="text" name="ligne[elt].ref" value=""/></td> <td> <input type="number" name="ligne[elt].qte" value="1"/></td> <td> <input type="checkbox" name="ligne[elt].cadeau" value="1"/></td> </tr> </tbody> </table></form> </body> |
Pour répéter un élément et ses enfants (ici le tr), il suffit donc de lui ajouter un attribut repeat avec pour valeur template. L’attribut repeat-start indique le nombre d’occurrence à répéter. A l’intérieur de l’élément répété, il est possible de récupérer le nombre de l’itération courante (0 pour la première itération, 1 pour la seconde, …) de cette façon: [id_du_conteneur].
Le gain en terme de simplification et d’allègement du code est indéniable. Mais les templates vont un peu plus loin. En effet, il est possible d’ajouter et de supprimer des occurrences de façon dynamique (coté client). Si on souhaite proposer à l’utilisateur d’ajouter une nouvelle occurrence avec un button, c’est très simple:
<button type="add" template="elt">Ajouter une ligne</button> |
Bref, d’un point de vue sémantique, pratique et en terme de quantité de code, les templates représentent une très bonne chose. Là où les choses deviennent très pointues, c’est que les données encadrées par les templates peuvent provenir de sources de données (via datatemplate). A quoi ça sert ? Et bien imaginez que votre source de donnée soit dynamique (un script PHP coté serveur par exemple), vous pouvez générer le contenu de votre page dynamiquement. Au revoir donc xmlHttpRequest !
Ping : Quel sera l’impact de HTML5 sur la vidéo en ligne ? | Webd