Installer Polymer
Installer avec Bower
Bower est un outil qui permet de gérer les dépendances de votre projet. Il vous suffit de lui renseigner les dépendances nécessaires et Bower s’occupe de les installer et de les mettre à jour, pratique non ?
Pour installer Bower, je vous invite à lire la documentation officielle.
Lancer cette commande à la racine de votre projet afin de générer le fichier bower.json :
bower init
Une fois le fichier généré, installez Polymer :
bower install --save Polymer/polymer
Si vous jetez un coup d’œil à votre fichier bower.json, Polymer s’est ajouté dans les dépendances de votre projet 😉 Nous sommes maintenant prêts pour découvrir ce nouveau framework !
Autres méthodes d’installation
Si vous ne souhaitez pas installer Polymer avec Bower, je vous invite à lire la documentation officielle. Vous pouvez l’installer à partir d’un fichier ZIP ou en utilisant GIT.
Créer votre premier élément Polymer
Mise en place de l’élément
À la racine de votre projet, créer le répertoire elements/ qui rassemblera tous vos éléments Polymer. Créer votre premier élément Polymer my-elements.html dans ce répertoire.
Pour ce faire, vous devez :
- charger le fichier polymer.html
- déclarer votre élément
<link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="my-element" noscript> <template> <span>Hello World ! I'm <b>my-element</b>.</span> </template> </polymer-element>
Créer un fichier index.html à la racine de votre projet, importez webcomponents.min.js ainsi que my-element.html et déclarer my-element.
<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="elements/my-element.html"> </head> <body> <my-element></my-element> </body> </html>
Lancez votre application à partir d’un serveur web. Vous devriez voir “Hello World ! I’m my-element.” dans votre navigateur.
Félicitations, vous avez créé votre premier élément Polymer ! 😉
Les features de Polymer
Nous allons maintenant améliorer notre élément.
Cet élément va demander à l’utilisateur quel est son nom et quelle est sa couleur préférée. Sa description sera alors mise à jour en fonction des choix entrés par l’utilisateur.
Nous allons définir deux proprités : owner et color. Les propriétés sont accessibles via les doubles accolades {{}}.
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<p>Hello my name is <b>{{owner}}</b> and my favourite color is <span style="color:{{color}}">{{color}}</span></p>
</template>
<script>
Polymer({
color: "purple",
owner: "Edwige"
});
</script>
</polymer-element>
Si vous lancez votre application, votre navigateur affichera ‘Hello my name is Edwige and my favourite color is purple‘. Pour le moment les données sont statiques et je vais vous montrer comment les rendre dynamiques.
Ajoutez deux input, un pour le nom et un autre pour la couleur.
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<p>Hello my name is <b>{{owner}}</b> and my favourite color is <span style="color:{{color}}">{{color}}</span></p>
<p>Update your profile : </p>
<input id="nameInput" value="{{owner}}" placeholder="Your name here...">
<input id="colorInput" value="{{color}}" placeholder="Your color here...">
</template>
<script>
Polymer({
color: "purple",
owner: "Edwige"
});
</script>
</polymer-element>
Lancez votre application. Vous pouvez maintenant modifier en temps réel votre nom et votre couleur préférée ! Sympa non ? 😛
Rendez-vous sur Plunker pour visualiser le code source.