• Home
  • Youzik
  • Papystreaming
  • Darknet
  • Libertyland
  • Cacaoweb
  • GG maps
  • Yggtorrent
  • Zone téléchargement

Grimag

  • Accueil
  • Catégories
    • Smartphone
    • High Tech
    • Business
    • Web
    • Appli Jeux Vidéo
    • Shopping
  • Android c’est quoi ?
  • Nous Contacter
  • Nos comparatifs
    • Drone avec caméra
    • Clavier d’ordinateur
    • Onduleur
    • GPS
    • Répéteur WiFi

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.

Capture

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>

<div id="affiche"></div>

</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

Juil 15, 2014Gnakouri Danon

Ces articles pourraient vous intéresser :

  • Développez avec la plate forme Polymer de Google – TUTO 3 Action du menu vers une page
  • Développez avec la plate forme Polymer de Google – TUTO 4 Polymer et fichier json part IIDéveloppez avec la plate forme Polymer de Google – TUTO 4 Polymer et fichier json part II
  • Développez avec la plate forme Polymer de Google – TUTO 1 Votre environnement de travailDéveloppez avec la plate forme Polymer de Google – TUTO 1 Votre environnement de travail
  • Développez avec la plate forme Polymer de Google – TUTO 2 ma première WebAppDéveloppez avec la plate forme Polymer de Google – TUTO 2 ma première WebApp
  • Développement d’une application Android autour de la cuisine  Etape 1 – Installation Android StudioDéveloppement d’une application Android autour de la cuisine Etape 1 – Installation Android Studio
  • Google travaille sur un Framework Android (performant et sans java) basé sur DartGoogle travaille sur un Framework Android (performant et sans java) basé sur Dart
  • Udacity – 4 nouveaux modules pour ses cours de dev sour AndroidUdacity – 4 nouveaux modules pour ses cours de dev sour Android
  • Deux Bouquins pour bien commencer le développement d’application AndroidDeux Bouquins pour bien commencer le développement d’application Android
  • Développez votre propre boussoleDéveloppez votre propre boussole
  • Intégrer les pub de Greystripe.com dans vos applications androidIntégrer les pub de Greystripe.com dans vos applications android
  • Intégrer des pub Admob dans ses applications AndroidIntégrer des pub Admob dans ses applications Android
  • Utiliser la camera dans vos applications androidUtiliser la camera dans vos applications android
  • material.io – Les développeurs d’applications Android vont être ravismaterial.io – Les développeurs d’applications Android vont être ravis
  • Optimiser vos applications Android pour ChromebooksOptimiser vos applications Android pour Chromebooks
  • Convertir facilement vos applications Android vers des applications Iphone avec J2ObjCConvertir facilement vos applications Android vers des applications Iphone avec J2ObjC
  • Microsoft va faciliter le portage d’applications Android que Windows 10Microsoft va faciliter le portage d’applications Android que Windows 10
  • Mise à jour des API Android avec une nouvelle librairie 22.1Mise à jour des API Android avec une nouvelle librairie 22.1
  • Playslist Youtube de Tutoriels pour le developpement AndroidPlayslist Youtube de Tutoriels pour le developpement Android
  • Material Design – Quelques nouveautésMaterial Design – Quelques nouveautés
  • Google publie des exemples de codes pour vos apps multi-deviceGoogle publie des exemples de codes pour vos apps multi-device
  • Google paye son Ebook – The Secrets to App Success on Google PlayGoogle paye son Ebook – The Secrets to App Success on Google Play
  • Material Design – Un peu plus de doc pour les développeursMaterial Design – Un peu plus de doc pour les développeurs
  • Recherche vocale – 6 lignes de code pour interagir avec vos AppsRecherche vocale – 6 lignes de code pour interagir avec vos Apps
  • Material Design – Google publie une cheklist pour les développeursMaterial Design – Google publie une cheklist pour les développeurs

Partager :

  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Google+(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Reddit(ouvre dans une nouvelle fenêtre)
  • Plus
  • Cliquez pour envoyer par e-mail à un ami(ouvre dans une nouvelle fenêtre)
  • Cliquer pour imprimer(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Pinterest(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Pocket(ouvre dans une nouvelle fenêtre)


PS4 DualShock 4 - Une attache pour jouer sur votre terminal AndroidSony simplifie le déblocage des bootloader de ses Xperia
Gnakouri Danon

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

15 juillet 2014 Actualité, Developpement, Tuto développementandroid, Application, Developpement, framework, tuto, tuto 3, tuto polyme, tuto polymer, web application, web components, Windows 7560

2021 © Android-France
loading Annuler
L'article n'a pas été envoyé - Vérifiez vos adresses e-mail !
La vérification e-mail a échoué, veuillez réessayer
Impossible de partager les articles de votre blog par e-mail.