• 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 3 Action du menu vers une page



Capture

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>

<head>
<title>TUTO II Lien menu page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!– [START imports] –>
<script src="bower_components/platform/platform.js">
</script>

<link rel="import"
href="bower_components/core-item/core-item.html">

<link rel="import"
href="bower_components/sampler-scaffold/sampler-scaffold.html">
<!– [END imports] –>
<style shim-shadowdom>
/* [START styles] */
body {
font-family: sans-serif;
}
#navheader {
background-color: #56BA89;
}
.content {
padding: 20px;
}
/* [END styles] */
/* secret demo-only styles */
core-scaffold /deep/ #drawer {
width: 140px;
}
core-scaffold /deep/ #main {
left: 140px;
}
</style>
[/code]

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 :

  • 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 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
  • 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
  • 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
  • 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
  • Udacity – 4 nouveaux modules pour ses cours de dev sour AndroidUdacity – 4 nouveaux modules pour ses cours de dev sour 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
  • Deux Bouquins pour bien commencer le développement d’application AndroidDeux Bouquins pour bien commencer le développement d’application Android
  • 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
  • Gagnez le Sony Ericsson X10 avec vos applications AndroidGagnez le Sony Ericsson X10 avec vos applications Android
  • Material Design – Un peu plus de doc pour les développeursMaterial Design – Un peu plus de doc pour les développeurs
  • Material Design – Utilisable sur site web grâce à PolymerMaterial Design – Utilisable sur site web grâce à Polymer
  • Recherche vocale – 6 lignes de code pour interagir avec vos AppsRecherche vocale – 6 lignes de code pour interagir avec vos Apps
  • Créer son propre menu de lancement comme la home avec SlidingDrawerCréer son propre menu de lancement comme la home avec SlidingDrawer
  • Windows 3.1 sur un terminal AndroidWindows 3.1 sur un terminal Android
  • Utiliser du code HTML dans ses applications androidUtiliser du code HTML dans ses applications android
  • Tuto développement – créer votre propre carrousel avec developpez.comTuto développement – créer votre propre carrousel avec developpez.com
  • Sony Ericsson Xperia Play – Vidéos de tuto pour les développeurs [en anglais]Sony Ericsson Xperia Play – Vidéos de tuto pour les développeurs [en anglais]
  • 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)
  • TUTO – Comment installer Android sur un iPhone 2GTUTO – Comment installer Android sur un iPhone 2G

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)


SoulCraft 2 - Les anges sont de retour sur Google PlayLG G3 - Une vidéo sur l'histoire de son design (en anglais)
  • 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).

Gnakouri Danon

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

7 juillet 2014 Actualitéandroid, Application, Developpement, framework, tuto, tuto 3, tuto polyme, tuto polymer, web application, web components, Windows 7461

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.