Développez avec la plate forme Polymer de Google - TUTO 3 Action du menu vers une page

La plate forme de développement Polymer de Google est annoncée par le géant d’internet comme l’outil ultime pour développer rapidement des applications web responsives. J’ai donc décidé de m’essayer à ce nouveau framework et de partager mon expérience.

Dans ce tuto N°3 le but est de mettre une action sur mes menus, sur un clique j’appelle une page précise. Ci-dessous le résultat ou cliquez sur le lien.

[jwplayer mediaid=”130059″]

Pour réalisation cette fonctionnalité le projet Polymer propose la librairie sampler-scaffold.html. Cette librairie est plutôt un regroupement d’autres librairies permettant de réaliser en quelques lignes une web app standard avec une amination sur les pages appelées qui slident du bas vers le haut.

Je crée un répertoire page dans lequel je met 2 pages page1.html et page2.html

code page1.html

[code lang=”html”] <html>
<head>
</head>
<body>
<h2 align="center">Page 1</h2>
</body>
</html>
[/code]

Code page2.html

[code lang=”html”] <html>
<head>
</head>
<body>
<h2 align="center">Page 1</h2>
</body>
</html>
[/code]

Dans l’entête de notre fichier Tuto3.html j’appelle les librairies platform.js,core-item.html et sampler-scaffold.html et aussi les meta pour la prise en compte du mobile

[code lang=”html”] <!DOCTYPE html>
<html>

Et en 4 lignes je réalise une application web responsive avec un menu sur le coté, une barre en haut et des pages qui s’affichent avec une amination slide.

[code lang=”html”] <body unresolved>
<sampler-scaffold label="Tuto II Lien Menu Page">

<core-item label="Page 1" url="page/page1.html" ></core-item>
<core-item label="Page 2" url="page/page2.html" ></core-item>

</sampler-scaffold>

</body>
</html>
[/code]

Encore un fois ça a été simple rapide et aucun bug rencontré, mais bon vous me direz rien de vraiment méchant encore.Vous pouvezretrouver la série de ces tutos ici.

Juil 7, 2014Gnakouri Danon

Ces articles pourraient vous intéresser :

Eric LEMOUSSU

Sympa!

Par contre quand je teste le résultat sur mon Nexus 5 j’ai la version web et pas la version mobile…
- Gnakouri Danon
  
  corrigé il faut rajouter ces meta dans l’entete
  - Eric LEMOUSSU
    
    Nickel.
    Pour chipoter : il manquerait juste la gestion des gestures (swype droite pour déployer le menu, swype gauche pour le fermer).

Développez avec la plate forme Polymer de Google – TUTO 3 Action du menu vers une page

Ces articles pourraient vous intéresser :

Partager :

Gnakouri Danon