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

Juil 17, 2014Gnakouri Danon

Ces articles pourraient vous intéresser :

  • Développez avec la plate forme Polymer de Google – TUTO 4 Polymer et fichier json part IDéveloppez avec la plate forme Polymer de Google – TUTO 4 Polymer et fichier json part I
  • 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 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
  • Utiliser la camera dans vos applications androidUtiliser la camera dans vos applications android
  • Intégrer des pub Admob dans ses applications AndroidIntégrer des pub Admob dans ses applications Android
  • Développez votre propre boussoleDéveloppez votre propre boussole
  • Développer votre application de réalité augmentée avec l’API de WikitudeDévelopper votre application de réalité augmentée avec l’API de Wikitude
  • Intégrer les pub de Greystripe.com dans vos applications androidIntégrer les pub de Greystripe.com dans vos applications android
  • 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
  • Utiliser du code HTML dans ses applications androidUtiliser du code HTML dans ses applications android
  • Développez une application pour android étape 21 (Modifier un ingrédient avec une boite de dialogue)Développez une application pour android étape 21 (Modifier un ingrédient avec une boite de dialogue)
  • Créer son propre menu de lancement comme la home avec SlidingDrawerCréer son propre menu de lancement comme la home avec SlidingDrawer
  • Développement-Utiliser la liste de ses contacts dans ses applications AndroidDéveloppement-Utiliser la liste de ses contacts dans ses applications Android
  • Deux Bouquins pour bien commencer le développement d’application AndroidDeux Bouquins pour bien commencer le développement d’application Android
  • 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
  • Gagnez le Sony Ericsson X10 avec vos applications AndroidGagnez le Sony Ericsson X10 avec vos applications Android
  • Développez votre propre réveil (Alarme) avec votre android phoneDéveloppez votre propre réveil (Alarme) avec votre android phone
  • Développez une application pour android étape 19 (Ajout de sous menu)Développez une application pour android étape 19 (Ajout de sous menu)
  • Udacity – 4 nouveaux modules pour ses cours de dev sour AndroidUdacity – 4 nouveaux modules pour ses cours de dev sour Android
  • Développer la fonction shake (secouer) dans vos applications AndroidDévelopper la fonction shake (secouer) dans vos applications Android
  • Utiliser des onglets dans ses applications androidUtiliser des onglets dans ses applications android
  • L’Api Layar pour réaliser des applications en réalité augmentéeL’Api Layar pour réaliser des applications en réalité augmentée
  • Recherche vocale – 6 lignes de code pour interagir avec vos AppsRecherche vocale – 6 lignes de code pour interagir avec vos Apps

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)


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éveloppementandroid, Application, Developpement, framework, tuto, tuto 3, tuto polyme, tuto polymer, web application, web components524

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.