Débuter avec le polymère

Structure des éléments de base

Nous avons l’élément très basique suivant my-element enregistré sous src/my-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>
  • Le <lien> inclut la bibliothèque Polymer en utilisant une importation HTML.
  • Le <dom-module> est le wrapper DOM local pour l’élément (dans ce cas, my-element).
  • Le <template> est la définition réelle du DOM local.
  • Le <style> à l’intérieur du <template> vous permet de définir des styles limités à cet élément et à son DOM local et n’affectera rien d’autre dans le document.
  • Le <content> contiendra tout ce que vous placerez dans votre élément.
  • La pseudo-classe :host correspond à l’élément personnalisé (my-element).
  • L’appel Polymer enregistre l’élément.
  • La propriété is est le nom de l’élément (elle doit correspondre à l’id de <dom-module>)

Vous pouvez l’importer dans votre application en utilisant :

<link rel="import" href="src/my-element.html">

Et utilisez-le comme tag :

<my-element>Content</my-element>

Configurer votre première application polymère à partir d’un modèle

Préparez-vous à créer votre propre application Web progressive géniale avec Polymer !

Avant de pouvoir commencer à installer Polymer, vous avez besoin des éléments suivants :

  • Node.js - consultez la [Documentation StackOverflow Installing Node.js][1]

  • Bower - vous pouvez installer Bower en utilisant le Node Package Manager installé avec Node.js :

    npm install -g bower
    

Installation de l’interface de ligne de commande Polymer

Le Polymer CLI vous fournit tous les outils nécessaires pour les projets Polymer :

npm install -g polymer-cli

Initialiser votre application à partir d’un modèle d’application

Utilisez polymer init pour initialiser votre application à partir d’un [modèle d’application][2].

Un modèle sympa est le --app-drawer-template. Utilisons ça :

polymer init app-drawer-template

Servez votre application

Aucun bâtiment n’est nécessaire pour servir votre première application polymère géniale. Il suffit de le “servir” :

polymer serve --open

Cela ouvrira l’application dans votre navigateur par défaut sur http://localhost:8080.

[1] : https://www.wikiod.com/fr/node-js/installation-de-nodejs [2] : https://www.polymer-project.org/1.0/toolbox/templates

Bonjour le monde

Cet exemple crée un élément Polymer nommé x-foo, dont le modèle est lié à une propriété de chaîne, nommée “message”. Le code HTML de l’élément est importé dans le document principal, ce qui permet l’utilisation des balises <x-foo> dans <body>.

x-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>

index.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>

Voir la démo dans CodePen

Utilisation d’éléments du catalogue de polymères

Polymer fournit de nombreux éléments bien construits que vous pouvez utiliser dans votre application.

Parcourez-les dans leur [Catalogue d’éléments][1].

Passons en revue le flux de travail d’utilisation d’un élément en incluant paper-input ([Documentation][2])

Télécharger l’élément

Pour télécharger un élément, il y a deux façons :

Tonnelle

Le moyen le plus pratique consiste à utiliser la ligne de commande à l’aide de la commande bower install :

bower install --save PolymerElements/paper-input

Remarque : --save ajoute l’élément en tant que dépendance au bower.json de votre application.

Fichier zip

L’autre façon est d’ajouter l’élément sélectionné (paper-input dans ce cas) à votre collection (dans le catalogue de polymères) en utilisant “Ajouter à la collection” dans la navigation et de télécharger votre collection en utilisant l’icône étoile dans le coin supérieur droit .

Cela générera un fichier .zip contenant l’élément et toutes ses dépendances. Vous pouvez ensuite copier le dossier bower_components à l’intérieur du .zip/components dans le répertoire racine de votre application.

Importez l’élément dans votre application

Pour importer l’élément que vous venez d’installer, importez le fichier .html correspondant :

<link rel="import" href="bower_components/paper-input/paper-input.html">

Utiliser l’élément

Vous pouvez maintenant utiliser paper-input dans le document dans lequel vous l’avez importé :

<paper-input></paper-input>

[1] : https://elements.polymer-project.org [2] : https://elements.polymer-project.org/elements/paper-input