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.