Polymer

C’est quoi un polymer?

Polymer est une librairie qui utilise les dernières technologies web permettant de créer des éléments HTML personnalisés.

Polymer est donc une grosse molécule composée de plusieurs sous-éléments personnalisés : Template, Html importé, éléments personnalisés…

Comment créer un nouvel élément?

Les éléments (<a>, <input type=”text” />, <select>….) sont les blocs de construction de HTML. Mais les applications modernes ont dépassé ces éléments intégrés, forçant les développeurs à s’appuyer sur des frameworks JavaScript pour fournir un comportement dynamique.

Par exemple, on peut créer un bouton pour une application complète, réutilisable et encapsulé qui peut fonctionner aussi sur le mobile.

Template sans le Polymer

<template id="template">
<style>input {color:orange;}</style>
<input type="Submit">
</template>
<script>
var photo=Object.create(HTMLElement.prototype, (
createdCallback:{
value:function(){
var t= document.querySelector('#template');
this.createShadowRoot().appendChild(document.importNode(t.content,true));
}});
var Monbouton= document.register('mon-bouton',{prototype:proto});</script>

Template utilisant le Polymer

1. Créer l’élément personnalisé

<polymer-element name="mon-bouton" constructor="MonBouton" noscript><template>
<style> input{background:blue;}</style>
<input type = "Submit">
</template>
</polymer-element>

2.Instancier le nouveau élément

<mon-bouton></mon-bouton>

Dans un JS :

// var monBouton = document.createElement('mon-bouton');
//var monBouton = new MonBouton();

Les attributs et les propriétés d’un élément

On peut créer un nouvel élément en utilisant les attributs suivants :

  • name : le nom d’un custom élément et c’est obligatoire comme attribut
  • attributes : servant à publier les propriétés
  • extends : utilisé pour hériter d’autres éléments
  • noscript : utilisé pour les éléments simples qui n’ont pas besoin d’appeler Polymer()
  • constructeur : le constructeur permet aux utilisateurs de créer des instances d’un élément à l’aide de l’opérateur new (par exemple var tagName = new TagName ())

Exemple:

<polymer-element name="mon-bouton" constructor="MonBouton" noscript>
<template>
<style> input{background:red;}</style>
<input type = "Submit">
</template>
</polymer-element>

On peut ajouter des propriétés et des méthodes au prototype ainsi des scripts et feuilles de styles externes.

Exemple:

<polymer-element name="mon-bouton">
<template>
<input type="text" id="in" style="color:orange;">
</template>
<script>Polymer('mon-bouton');
get length(){ return this.$.in.value.length;},
ready: function() {...}
});
</script>
</polymer-element>
*this fait réfèrence à l'élément lui-même (e.g.this.localName = "my-input")

On peut déclarer les propriétés internes ou externes de l’élément.

**Interne de l’élément **

Pour déclarer des propriétés en interne d’un élément, on utilise du data-binding.

Exemple:

<polymer-element name="mon-bouton">
<template>
<input type="submit" style="color:blue;">
</template>
<script>Polymer('my-input',{
type:'submit',
color:'blue'
});
</script>
</polymer-element>

Externe de l’élément

On doit configurer les attributs, lorsqu’on veut déclarer les propriétés externes de l’élément.

Exemple:

<polymer-element name="mon-bouton">
<template>
<input type="text" style="color:{{color}};" value="{{val}}">
<polymer-localstorage name="monBoutontStorage" value="{{val}}"></polymer-localstorage>
</template>
<script>Polymer('mon-bouton',{
type:'submit',
color:'blue'
});
</script>
</polymer-element>

API Polymer

**Polymer elements **

Les Polymer elements sont des éléments non visuels qu’on peut utiliser pour toutes les couches.

Exemple:

Layout


<div>
<polymer-flex-layout></polymer-flex-layout>
<div>Left</div>
<div flex>Main</div>
<div>Right</div>
</div>
 ---------------------------------
|-------------------------------|
||Left| Main |Right||
|-------------------------------|
---------------------------------

Vue

Services/libs

Données




Comportement et interaction

Polymer UI elements

Les Polymer UI elements sont des éléments visuels destinés surtout pour la partie présentation comme : créer un menu, gérer les pages, afficher la météo, etc.

Exemple:

<polymer-ui-weather>  
 <polymer-ui-action-icons>  
 <polymer-ui-animated-pages>  
 <polymer-ui-overlay>  
 <polymer-ui-card>  
 <polymer-ui-sidebar-menu>  
 <polymer-ui-tabs>  
 <polymer-ui-toggle-button>  
 <polymer-ui-theme-aware>

    <title>Polymer UI Weather</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- load platform -->
    <script src="../platform/platform.js"></script>
    <!-- import element-->
<link rel="import" href="polymer-ui-weather.html">
  
  <body unresolved>
   <polymer-ui-weather autoupdate></polymer-ui-weather>
  

Conclusion

Ce framework permet de concevoir vos propres éléments HTML et de créer des applications complètes, évolutives et maintenables.


Vous avez trouvé cette publication utile? Cliquer sur
Ippon
Ippon est un cabinet de conseil en technologies, créé en 2002 par un sportif de Haut Niveau et un polytechnicien, avec pour ambition de devenir leader sur les solutions Digitales, Cloud et BigData.

Ippon accompagne les entreprises dans le développement et la transformation de leur système d’information avec des applications performantes et des solutions robustes.

Ippon propose une offre de services à 360° pour répondre à l’ensemble des besoins en innovation technologique : Conseil, Design, Développement, Hébergement et Formation.

Nous avons réalisé, en 2017, un chiffre d’affaires de 31 M€ en croissance organique de 30%. Nous sommes aujourd’hui un groupe international riche de plus de 320 consultants répartis en France, aux USA, en Australie et au Maroc.
FRANCE Website LinkedIn