Fondations des WC - Les templates

Dans cette article, nous allons nous intéresser aux fondations des composants web. Cela permettra de comprendre à la fois leur raison d’être et aussi comment ils sont construits.

Nous utiliserons des exemples simples et n'utiliserons pas de polyfill. Pour tester les bouts de code de cet article, le navigateur Google Chrome est le plus approprié.

Pour rappel, les spécifications des Web Components concernent :

  1. Les Templates : Permettent la réutilisation de fragments de code à l'aide de la balise <template>
  2. Le Shadow DOM : Permet l'encapsulation de sous-arbres DOM dans un élément hôte donnée.
  3. Les Custom Elements : Permettent la création et l'enregistrement de nouveaux éléments HTML
  4. Les Imports : Permettent l'importation de contenus dans un document HTML

Les Templates

Pourquoi les templates ?

Le concept de templates n'est pas nouveau, il est très utilisé par la plupart des frameworks, à la fois coté client et coté serveur.

Les templates permettent de réutiliser une partie du code sans avoir à la régénérer de manière impérative à chaque fois qu'on en a besoin.

Par exemple, une boite de dialogue est à la base une structure HTML. Au besoin, cette structure est personnalisée à l'aide de Javascript, clonée puis affichée. Voici un exemple simple de structure d'une boite de dialogue

HTML

  1. <div class="outer" style="display: none">
  2.     <div class="inner">
  3.         <div class="header"><!-- le contenu de l’entête sera injecté ici --></div>
  4.         <div class="message"><!-- le contenu du message sera injecté ici --></div>
  5.     </div>
  6. </div>

Dans cet exemple, on a utilisé l'attribut style="display:none" pour masquer la structure. Il suffit de positionner cet attribut à block pour afficher la boite de dialogue.

Javascript

  1. <script>
  2.    function afficherDialogue(type, message){
  3.       document.querySelector('.header').innerHTML = "<h3>" + type + "</h3>";
  4.       document.querySelector('.message').innerHTML = "<p>" + message + "</p>";
  5.       document.querySelector('.outer').style.display = "block";
  6.    }
  7. </script>

Avec des styles CSS, on pourrait arranger l'apparence de la boite de dialogue. Les arguments type de la fonction pourrait avoir comme valeurs possibles error, warning ou info et message le message à afficher.

D'autres approches sont possibles pour résoudre le même problème. Par exemple l'utilisation de la balise <script> pour embarquer la structure de code HTML réutilisable.

La balise <template>

La balise template permet d'embarquer une structure HTML dans une page web de sous la forme de d'un fragment DOM inerte. Cela veut dire que le contenu de la structure n'aura aucun effet sur la page, jusqu'à ce qu'on le clone et on l'insert dans la structure DOM du document.

La balise <template> apporte une approche uniforme pour la résolution de ce genre de problèmes.

Comment utiliser la balise <template> ?

Création

Il suffit de d'entourer la structure de code réutilisable par une balise <template>

HTML

  1. <div id="container"><div id="container"><!-- espace réservé pour utilisation des clones du template --></div>
  2. <template id="tmpl">
  3.     <div class="barre">
  4.            <div></div>
  5.     </div>
  6. </template>

Utilisation

Javascript

  1. // tmplContent contiendra le fragment DOM du contenu du template.
  2. var tmplContent = document.querySelector('#tmpl').content;
  3. var barre = tmplContent.querySelector( '.barre > div' );
  4. // A il suffit de personnaliser ce contenu, de le cloner et enfin l'insérer dans le DOM du document.
  5. // Ici, je vais créer 10 clones.
  6. for ( var i=0; i<10; i++) {
  7.     // Personnalisation (Il s'afit d'un fragment DOM, d'où l'utilisation de querySelector())
  8.     barre.style.height = (i * 40) + 'px';
  9.     barre.setAttribute('title', i);
  10.     // clonage  avec la méthode importNode()
  11.     var clone = document.importNode( tmplContent, true );
  12.     // Insertion dans l'arbre DOM du document
  13.     document.querySelector( '#container' ).appendChild( clone );
  14. }

Avec les styles CSS suivants :

CSS

  1. #container {
  2.         padding: 6px;
  3.         background: black;
  4.     }
  5.     #container .barre {
  6.         display: inline-block;
  7.         padding: 2px;
  8.         margin: 4px 2px;
  9.         border: 1px solid #ccc;
  10.         background: #999;
  11.     }
  12.     #container .barre > div {
  13.         width: 40px;
  14.         height: 40px;
  15.         border: 1px dashed #222;
  16.     }

On obtient :

Aperçu :

Conclusion

Au final, l'apport de la balise <template> est juste l'uniformisation de l'utilisation des fragments DOM dans un document HTML. Avant, chaque développeur utilisait sa propre méthode pour résoudre ce problème. Avec la balise <template>, le code deviendra plus cohérent et compréhensible.

Commentaires

I know this web site provides quality depending content and additional

data, is there any other site which provides such data in quality?

Check out my weblog; geek toys