Polymer¶

Polymer est un framework javascript de chez Google. Il est en concurrence avec AngularJs mais devrait permettre de réaliser des applications multi-screens de façons plus simple.

Architecture / Installation¶

L’utilisation de polymer requiert l’outil bower. Bower est un gestionnaire de paquet pour application javascript. Son installation nécessite d’installer:

git
nodejs

Pour windows il suffit d’aller sur le site git et nodejs pour télécharger les executables. L’objectif est d’avoir une ligen de commande qui accepte les commandes git et npm

Pour linux on peut utiliser le gestionnaire de paquet

apt-get install npm

Maintenant on peut en ligne de commande installer bower

npm install -g bower

Warning

Sur debian, éditer la première ligne du fichier /usr/local/bin/bower

Remplacer: #!/usr/bin/env node

Par: #!/usr/bin/env nodejs

Note

bower utilise git pour récupérer les sources

Note

si vous utilisez un proxy il faut:

npm config set proxy http://AD%5Cusername:passwd@myserver:myport
npm config set https-proxy http://AD%5Cusername:passwd@myserver:myport
vi .npmrc

il faut aussi paramétrer le proxy de git

git config --global http.proxy http://user:pass@proxyhost:proxyport

pour bower le plus simple est d’utiliser la variable http_proxy

pour windows

set http_proxy=http://AD\username:passwd@myserver:myport

pour linux

export http_proxy=http://AD\username:passwd@myserver:myport

ou utiliser un fichier .bowerrc contenant

{
"proxy":"http://AD%5Cusername:passwd@myserver:myport",
"https-proxy":"http://AD%5Cusername:passwd@myserver:myport",
"strict-ssl": false
}

On peut maintenant utiliser bower pour récuperer des paquets.

bower install knacss
bower install knacss#2.9.1
bower update knacss

Toutes ces actions récupère le module knacss, avec une version spécifque, une mise à jour dans le dossier bower_components.

Dans un premier temps le serveur web sera un serveur Apache avec une configuration très basique: son seul rôle est de distribué des fichiers

html
css
font
js

Le fichier de configuration su site web ressemble à

# conf/site-available/test1.conf
<VirtualHost *:80>
    ServerName mytest.fr
            ServerAlias *.mytest.fr

            DocumentRoot "C:/www/test"
            <Directory "C:/www/test">
                AllowOverride None
                Options None
                Order allow,deny
                Allow from all
            </Directory>

            <IfModule dir_module>
                DirectoryIndex index.html
            </IfModule>
            ErrorDocument 404 /missing.html

            ErrorLog "C:/www/logs/error.log"
            LogLevel info
</VirtualHost>
                                                                                                                                                                                                              </VirtualHost>

Je vous laisse voir la configuration plus précise d’un serveur apache dans la note dédiée.

Dév¶

Nous allons suivre l’url https://blog.groupe-sii.com/creer-une-application-web-avec-polymer/

Nous allons d’abord créer notre structure de projet et récupérer Polymer

mkdir myappli
cd myappli
bower init
bower install --save Polymer/polymer
bower install --save PolymerElements/iron-elements
bower install --save PolymerElements/paper-elements
bower install --save PolymerElements/gold-elements

Note

Il n’est pas forcement utile d’avoir l’ensemble iron, paper et gold suivant nos projet

la définition des éléments est la suivante

Iron elements. A set of utility elements including generic UI elements (such as icons, input and layout components),
as well as non-UI elements providing features like AJAX, signaling and storage.

Paper elements. A set of UI elements that implement the material design system.

Gold elements. Form elements for ecommerce.

Neon elements. Animation-related elements.

Platinum elements. Elements for app-like features, like push notifications and offline caching.

le minimum pour écrire une application

<html>
  <head>

  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <!-- Paper elements -->
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/iron-icons/av-icons.html">
    <style is="custom-style">

    paper-button {
      display: block;
      margin-bottom: 24px;
      max-width: 530px;
      font-family: "Roboto","Noto",sans-serif;
      font-size: 14px;
      color: #4285f4;
    }

    paper-button[raised] {
      background: #4285f4;
      color: #fff;
    }



  </style>
  </head>
  <body>
  <div>
      <paper-button raised><iron-icon icon="icons:search"></iron-icon>flat button</paper-button>
      <paper-button><iron-icon icon="av:mic"></iron-icon>flat button</paper-button>
  </div>

  </body>
</html>

Nous allons maintenant intégrer angularjs dans notre application

cd myappli
bower install --save angular
bower install --save angular-route

On peut trouver l’ensemble d’une application test ici

Cette application utilise notamenent la gestion des themes élaborés sur http://www.materialpalette.com/indigo/pink

Warning

polymer n’est pas compatible avec angularjs notament sur la partie ng-model des inputs Polymer perd donc de l’intérêt comme simple module deisgn d’angular. Il faut alors le prendre comme un framework complet mais bien immature pour l’instant