Développez avec la plate forme Polymer de Google – TUTO 4 Polymer et fichier json part II



Le géant d’internet offre un nouveau Framework Polymer qui permet de rajouter une surcouche au HTML5 facilitant le développement de WebApp. Dans un tuto précédent j’ai créé dynamiquement une page de contact en récupérant les info dans un fichier json avec du code javascript.

Capture

Dans cette partie II je vais faire la même chose mais cette fois-ci en utilisant l’ensemble des possibilités qu’offre cet outil.  Avec Polymer nous pouvons mettre en place une architecture en template.Celle-ci permet de réaliser des bouts de code qu’ensuite nous pourrons réutiliser.

Je crée un répertoire element dans lequel je mettrais tous mes templates. Je rajoute mon premier templates mes-contacts.html

[code lang=”html”] <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">

<polymer-element name="mes-contacts" noscript>
<template>

<core-ajax url="../page/listcontact.php" handleas="json" auto="" response="{{resp}}"></core-ajax>

<table width="100%"><tr><td><b>Nom</b></td><td><b>Prenom</b></td><td><b>Tel</b></td></tr>

<template repeat="{{resp}}">
<tr><td>{{Nom}}</td><td>{{Prenom}}</td><td>{{Tel}}</td></tr>
</template>

</table>

</template>

</polymer-element>
[/code]

Ce qui est important dans ce fichier c’est la valeur de l’attribut name de la balise polymer-element, elle doit toujours avoir un “-” dans son format et être du même nom que celui du fichier sans l’extension html (mes-contacts).

Ensuite dans notre nouvelle page contact2.html il faut juste ajoute le chemin vers le fichier template et la balise dans le code.

[code lang=”html”] <html>
<head>
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../elements/mes-contacts.html">
</head>
<body>

<mes-contacts></mes-contacts>
</body>
</html>
[/code]

Polymer permet de réaliser des pages dynamiques sans avoir à ce soucier de code javascript. Le resultat en ligne ici (n’hésitez pas à utiliser la fonctionnalité  ” code source” sur l’application pour récupérer le code).

Vous pouvez retrouver la série de ces tutos à cette adresse android-france.fr/tag/tuto-polymer

Gnakouri Danon

Ces articles pourraient vous intéresser :



DEAD TRIGGER 2 - MAJ avec ajout de contenuInkCase Plus -La coque E-Ink lève 100000 dollars sur #Kickstarter
Gnakouri Danon

Co-fondateur du site Android france, senior lead developper, passionné de bière et de cigare cubain

17 juillet 2014 Actualité, Application, Developpement, Tuto développement, , , , , , , , , 506