Polymer – Le super framework !

Polymer

Le framework de Google

Dossier de présentation du framework : son histoire, son but, ses fonctions, sa mise en pratique et son utilisation.

Montgomery Chrissy

 

   Polymer, qu’est-ce que c’est ?

 

Créée en 2013 et développée par les contributeurs de GitHub ainsi que les développeurs de Google, Polymer est une librairie open-source JavaScript qui permets de construire des applications web et des composants web. Les principes du design moderne sont implémentés séparément (autre projet distinct) en utilisant les principes du design Google’s Material Design. De nombreux services Google et sites utilisent aujourd’hui Polymer, c’est le cas par exemple de Youtube, Youtube Gaming, Google Earth ou encore Google Play Music.

Avec Polymer, les développeurs peuvent, simplement, ajouter de l’HTML personnalisé sur une page web. C’est comme utiliser les balises HTML que vous connaissez déjà.

 

 

Code de la page d’accueil de YouTube où l’on peut voir un lien Polymer faire son apparition.

 

 

Sur Google Play Music, les éléments Polymer sont définis dans le head.

                    

 

 

Que peut-on faire avec Polymer ?

 

La librairie Polymer fournit un ensemble de fonctionnalités pour la création d’éléments personnalisés. Ces fonctionnalités ont été conçues pour faciliter et accélérer la création personnalisée des éléments qui vont fonctionner comme des éléments DOM standards.

 

Petit rappel : Document Object Model (DOM) est une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web

 

 

 

 

La structure d’un document HTML avec les éléments, attributs et textes.

 

Similaires aux éléments DOM standards, les éléments Polymer peuvent donc être :

  • Instanciés en utilisant un constructeur ou document.createElement.
  • Configurés à l’aide d’attributs et de propriétés.
  • Remplis de DOM interne dans chaque instance.
  • Réceptifs aux changements de propriétés et attributs.
  • Stylisés avec des valeurs par défaut internes ou externes.
  • Réceptifs aux méthodes qui qui manipulent leur état interne.

                    Intégrer Polymer à son code :

Pour intégrer Polymer, créer des éléments, les importer et les utiliser dans son code il faut les disposer dans le head de l’html comme cela :

Pour utiliser Polymer ensuite nous avons deux solutions, soit l’installer à partir du site officiel qui présente chaque à étape à suivre ou alors déclarer une classe et ajouter des événements ainsi que des propriétés. Dans tous les cas, les manœuvres sont indiquées sur le site.

 

                  Le concept des éléments personnalisés :

 

Les éléments personnalisés fournissent un modèle de composant pour le Web. Les éléments détiennent :

 

  • Un mécanisme pour associer une classe avec un nom d’élément personnalisé.
  • Un ensemble de rappels invoqué lorsqu’une instance, de l’élément personnalisé, change d’état. Par exemple : ajouté ou supprimé du document.
  • Un rappel qui est invoqué à chaque fois qu’un ensemble d’attributs spécifiés changent sur l’instance.

Ces fonctionnalités permettent donc de construire un élément avec sa propre API publique qui réagit aux changements d’état.

Pour définir un élément personnalisé, vous devez créer une classe ES6 et l’associer avec un nom personnalisé d’élément.

 

Exemple de définition d’une classe PersoElement :

 

                  

 

On peut utiliser maintenant cet élément personnalisé. Pour cela, plusieurs options s’offrent à nous.

 

L’utiliser comme un élément standard :

 

                                                                       

 

 

Faire appel à createElement :

 

                   

 

Créer l’élément avec new :

 

                                                      

 

                                       

       

 

 

 

 

La classe de l’élément défini son comportement et son API publique. La classe doit étendre (extend) HTMLElement ou l’une de ses sous-classes (par exemple un

autre élément personnalisé).

/ ! \ Il faut faire attention aux noms des éléments personnalisés. Par spécification les noms doivent commencer par une lettre minuscule et contenir un dash (-). Une courte liste de noms d’éléments interdits est disponible sur internet (ils correspondent aux noms déjà existants).

Il faut aussi savoir que Polymer fournit un ensemble de fonctionnalités en plus de la spécification d’élément personnalisé de base, pour ajouter ces fonctionnalités à l’élément il faut étendre la classe d’élément de base de Polymer (Polymer.Element).

 

 

 

 

 

 

                  Créer une application avec Polymer :

 

Après l’installation de Polymer, nous pouvons grâce à la console créer un nouveau projet d’application qui contient tous les dossiers nécessaires à la création d’une nouvelle application.

C’est ici que nous allons pouvoir créer nos pages avec Polymer. Je vais donc commencer par créer une page ‘new-el.html’ pour créer mon premier élément personnalisé.

Après avoir, bien évidemment importé la librairie nous allons déclarer un élément ainsi que son style à l’aide des balises dom-module, template et style.

Le dom-module contiendra notre ID, alors que le template contiendra le style de notre élément. C’est à cet endroit que l’on va mettre le CSS que l’on veut.

 

Sur cet exemple, j’ai bien évidemment pris un élément simple (une balise d’écriture h1) mais nous pouvons pousser la chose beaucoup plus loin et créer des éléments plus « complexes ».

Mais la création de cet élément n’est pas encore finie, il faut encore deux étapes à mon élément. Le premier va être la création de sa classe, puisqu’il faut bien que l’élément soit étendu à Polymer et qu’il soit retourné. Ce qui nous donne ce code-là :

 

 

Toutes ses étapes sont importantes et il ne faut pas les négliger. Enfin, il ne nous reste plus qu’à enregistrer l’élément.  Il suffit d’une ligne mais cette ligne est vraiment importante, elle permet en fait de l’enregistrer et de permettre au navigateur de l’afficher correctement. Si cette ligne est faussée ou absente nous aurons aucun élément.

 

 

Nous avons maintenant un élément personnalisé mais j’ai besoin de l’ajouter maintenant qu’il est créé. Pour cela je vais devoir aller dans un fichier un peu plus technique. Il faut que j’aille dans le dossier my-app.html pour intégrer mon élément dans les iron-pages. Je peux maintenant insérer ma nouvelle page en utilsant my-new-view.

 

 

L’élément est maintenant créé et affiché. Avec Polymer et ses fichiers nous pouvons faire bien évidemment autre chose comme par exemple un menu !

 

Pour faire mon menu je vais rester dans le fichier précédent, c’est-à-dire my-app.html, sauf que cette fois-ci je vais aller voir du côté d’une autre balise. Cette balise, c’est la balise app-drawer. Nous avons déjà, comme on peut le voir, un menu mais il nous faut rajouter l’élément personnalisé que l’on a créé juste avant.

 

Dans cette partie, je dois entrer dans le répertoire pour faire la commande :

bower install --save PolymerElements/paper-checkbox.

 

Effectivement, cela me permettra d’importer ma checkbox. Je l’intègre ainsi dans mon index pour l’utiliser.

On a plus qu’à intégrer l’élement dans l’html. Comme tout à l’heure, dans le template.

 

 

 

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *