AccueilActualitésDéveloppementDécouvrez une nouvelle façon d’intégrer avec Polymer et les web-components Développement Découvrez une nouvelle façon d’intégrer avec Polymer et les web-components Publié le 29/01/2015 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest Aujourd'hui je vous propose de découvrir les secrets du shadow-dom et des web-components avec Polymer.js. Polymer et les web-components Connaissez-vous les web-components (ou customs elements) ? Ce sont des objets issus d'une spécification permettant de créer ses propres éléments HTML, et de les manipuler en utilisant l'API Javascript standard. Cette spécification permettra d'accélérer grandement l'intégration et de limiter le travail répétitif. Pour en savoir plus je vous propose la lecture de l'article Des ressources pour mieux comprendre les web-components Polymer est une library de Google vous permettant de créer dès maintenant des web-componants fonctionnant sur tous les navigateurs jusqu'à IE8, de manière assez simple. Notre premier exemple Pour comprendre comment cela fonctionne, décortiquons l'exemple suivant : <!-- Include Polymer --> <script src="http://polymer-project.org/polymer.min.js"></script> <!-- Define the element --> <polymer-element name="polymer-lettering"> <template> <template repeat="{{ letter, i in letters }}"> <span class="char{{i}}">{{ letter }}</span> </template> </template> <script> Polymer('polymer-lettering', { ready: function() { this.letters = this.trim(this.innerHTML).split(''); }, trim: function(str) { return str.replace(/^[^S]+|[^S]+$/gm,''); }, letters: [] }); </script> </polymer-element> Ce web-component a pour but de découper le texte qui lui est donné lettre par lettre, pour ensuite pouvoir le manipuler en CSS. Il est composé d'une partie HTML, la template, qui permet (un peu comme rivets par exemple) de définir comment nos données Javascript doivent êtres affichées. En dessous nous pouvons retrouver une partie "<script>", qui fournit le Javascript nécessaire à notre composant. Notez bien la première ligne : Polymer('polymer-lettering', { , qui permet de déclarer le composant. Nous avons ensuite une fonction trime qui supprime les espaces vides, et notre événement à lancer à la création de l'element, et qui va découper le contenu du composant lettre par lettre. Maintenant que notre composant est crée, il nous reste à l'afficher ! Pour cela rien de plus simple : <!-- Include Polymer --> <!-- Rock 'n roll high school --> <polymer-lettering> hello </polymer-lettering> Une fois ajoute un peu de CSS, voila ce que l'on obtient (n'hésitez pas à changer d'onglet pour voir le HTML et le CSS !) See the Pen Polymer Lettering by Benjamin SANCHEZ (@B_Sanchez) on CodePen. Exemples un peu plus complexes L'exemple suivant est un peu plus intéressant : il permet de simplifier énormément l'utilisation de google maps, les mettant à la portée d'un simple intégrateur n'ayant pas la moindre connaissance en Javascript. See the Pen YPWBNx by Alec McCormick (@Sommaht) on CodePen. Vous pourrez voir en allant dans le HTML que si nous oublions la déclaration du composant (qui peut être faîte a l'avance par exemple), la déclaration de la carte se fait grace à un simple <google-map lat="-34.397" lng="150.644" zoom="8">, et que la déclaration de marqueurs est tout aussi simple. Enfin, un des gros avantages des web-componants est qu'ils peuvent être importés comme un nouveau type de ressource : <link rel="import" href="google-map.html">. Libre à vous de vous créer votre propre library d’éléments réutilisables, que vous n'aurez plus qu'à personnaliser en CSS pour chaque projet. Mon dernier exemple utilise l'import de paper-element, la library material design de Google. See the Pen Polymer CodePen starter by Addy Osmani (@addyosmani) on CodePen. By Benjamin Sanchez Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.