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

Polymer est une plateforme de développement de Google qui propose une nouvelle approche du développement d’application web. A travers une série de tuto j’essaye de partager avec vous mon apprentissage de ce nouveau framework.

Dans ce tutoriel 4 qui sera en deux parties je vais dans le premier développer une page contact.html dans mon sous répertoire page. Celle ci affichera la liste des contacts contenu dans un fichier json. Vous retrouverez la définition du fichier json sur Wikipedia. Le résultat ici.

Exemple de mon fichier json

[code]

{"Nom":"Gnakouri","Prenom":"Danon","Tel":"0662585441"},

{"Nom":"Vendrell","Prenom":"Yannick","Tel":"0765582912"},

{"Nom":"Hernandez","Prenom":"Cyril","Tel":"0865582912"}

[/code]

Comme toujours avec polymer c’est le choix de la librairie utilisée qui est importante, pour notre exemple se sera “bower_components/core-ajax/core-ajax.html”.

Dans ma Webapp (de mon précédent article de la série). je rajoute le menu Contact qui pointe sur ma page page/contact.html.

[code lang=”html”]

<sampler-scaffold label="Tuto II Lien Menu Page">

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

</sampler-scaffold>

[/code]

Dans ma page contac.html j’intègre la balise <core-ajax /> avec dans son attribut url le lien de mon fichier json. Je crée également une div avec un id=”affiche” dans laquelle je vais injecter mon html.

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

<core-ajax auto url="listcontact.php"
handleAs="json"
></core-ajax>

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

Le composant core-ajax crée dans le DOM de notre page un objet que nous avons plus qu’a parser en javascript pour afficher le contenu dans notre DIV. Le code complet de la page contact.html

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

<core-ajax auto url="listcontact.php"
handleAs="json"
></core-ajax>

<div id="affiche"></div>
<script>
// Wait for ‘polymer-ready’. Ensures the element is upgraded.
window.addEventListener(‘polymer-ready’, function(e) {
var ajax = document.querySelector(‘core-ajax’);
var shtmlinjecte="<table width=’100%’><tr><td><b>Nom</b></td><td><b>Prenom</b></td><td><b>Tel</b></td></tr>";
// Respond to events it fires.
ajax.addEventListener(‘core-response’, function(e) {
// console.log(this.response);
for (var i =0; i<this.response.length;i++ ) {

shtmlinjecte+="<tr><td>"+this.response[i].Nom+"</td><td>"+this.response[i].Prenom+"</td><td>"+this.response[i].Tel+"</td></tr>";
};

document.getElementById(‘affiche’).innerHTML = shtmlinjecte;

});

});
</script>
</body>
</html>
[/code]

vous ne direz que cette approche et un peu rustique mais elle permet de bien comprendre (en tous les cas je le pense) le fonctionnement des composants Polymer. Dans la partie II de se tuto j’utiliserais de nouveau component Polymer pour afficher les données contenu dans un fichier json sans javascript visible.

Vous pouvez retrouver la série de ces tutos ici