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

.. code-block:: bash

    apt-get install npm


Maintenant on peut en ligne de commande installer **bower**


.. code-block:: bash

    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:
    
    .. code-block:: bash
    
        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
    
    .. code-block:: bash
    
    	git config --global http.proxy http://user:pass@proxyhost:proxyport
    	
    pour bower le plus simple est d'utiliser la variable http_proxy
    
    pour windows
    
    .. code-block:: bash
    
    	set http_proxy=http://AD\username:passwd@myserver:myport
    
    pour linux
    
    .. code-block:: bash
    
    	export http_proxy=http://AD\username:passwd@myserver:myport

	ou utiliser un fichier .bowerrc contenant
   
    .. code-block:: bash
   
    	{
      	"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.

.. code-block:: bash

    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 à

.. code-block:: apache

    # 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

.. code-block:: bash

    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

.. code-block:: html

	<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

.. code-block:: bash

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


On peut trouver l'ensemble d'une application test :download:`ici <data/polymermyappli.zip>`

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