• 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 2 ma première WebApp



polymer

Le projet Polymer développé par Google a pour objectif de standardiser et faciliter la réalisation d’applications web responsive. Dans un précedent Tuto (important à lire pour comprendre la suite) j’ai mis en place mon environnement de travail qui va me permettre de m’essayer à ce nouveau framework du géant d’internet.

Dans ce Tuto n°2 je vais réaliser ma première WebApp avec Polymer. je vais développer un logiciel web avec la barre de menu sur le coté gauche, la barre de titre et de notifications en haut et le contenu central contenant le texte Hello word. Ci dessous le résultat obtenu en vidéo.

[jwplayer mediaid=”129827″]

Avant d’aller plus loin il va falloir mettre en place un accès à notre répertoire projet_I via une adresse web locale, pour cela il faut:

  • Lancer le serveur Wamp
  • A l’adresse http://localhost/home vous créez un site virtuel projet_I qui pointe sur le répertoire du même nom.
  • Ensuite vous accédez à vos développements via l’adresse http://localhost/projet_I/

 

Le développement avec Polymer commence par le choix des bonnes librairies à implémenter, ensuite avec quelques lignes de codes (ouais ouais c’est ça ouais) vous obtenez facilement une interface responsive.

Autre bon point de cet outil c’est l’accès à la documentation, il vous suffit de saisir l’adresse web du répertoire où se trouve la librairie et vous avez au format html la documentation.

Par Exemple pour savoir à quoi sert la librairie core-scaffold.html il faut entrer l’adresse suivant dans votre navigateur (sa dépendra du choix du nom de votre site virtuel)  http://localhost/projet_I/bower_components/core-scaffold/

Capturepolyne3

Pour notre première application j’aurais besoin des librairies

  • core-scaffold.html
  • core-drawer-panel.html
  • core-header-panel.html
  • core-item.html
  • core-menu.html
  • core-toolbar.html

 

Dans le fichier tuto1.html je rajoute les appels au librairies dans la balise <head> .

[code lang=”html”] <!DOCTYPE html>
<html>
<title>TUTO I Hello Word</title>
<head>
<script src="bower_components/platform/platform.js">
</script>
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
</head>
[/code]

La librairie javascript platform.js est obligatoire. Ensuite dans la balise body c’est un jeu d’encapsulation des balises du framework

[code lang=”html”] <body unresolved>
<!– [START html] –>
<core-scaffold>

<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu </span>
</core-toolbar>
<core-menu>
<core-item label="Etape I"></core-item>
<core-item label="Etape 2"></core-item>
</core-menu>
</core-header-panel>

<span tool>Tuto Developpement Polymer</span>

<div class="content">
Hello Word
</div>
</core-scaffold>
<!– [END html] –>
</body>
[/code]

  • la balise  core-scaffold pour l’ensemble de la web app.
  • la balise core-header-panel pour le menu.
  • la balise core-toolbar pour le titre du menu.
  • la balise core-menu pour encapsuler les menus.
  • la balise core-item pour chaque ligne du menu.
  • Une div avec une class content pour le contenu

Comme pour un fichier html on peut appliquer le style qu’on veut sur l’ensemble des balises.

Le code en entier.

[code lang=”html”]

<!DOCTYPE html>
<html>
<title>TUTO I Hello Word</title>
<head>
<!– [START imports] –>
<script
src="bower_components/platform/platform.js">
</script>
<link rel="import"
href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import"
href="bower_components/core-menu/core-menu.html">
<link rel="import"
href="bower_components/core-item/core-item.html">
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import"
href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import"
href="bower_components/core-scaffold/core-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>
</head>
<body unresolved>
<!– [START html] –>
<core-scaffold>

<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu </span>
</core-toolbar>
<core-menu>
<core-item label="Etape I"></core-item>
<core-item label="Etape 2"></core-item>
</core-menu>
</core-header-panel>

<span tool>Tuto Developpement Polymer</span>

<div class="content">
Hello Word
</div>
</core-scaffold>
<!– [END html] –>
</body>
</html>
[/code]

J’ai été agréablement surpris par la réalisation de cette première application tout a bien fonctionné du premier coup. Ça a été rapide et simple en espérant que la suite sera pareil.Vous pouvez retrouver la série de ces tutos ici.

 

Juil 2, 2014Gnakouri Danon

Ces articles pourraient vous intéresser :

  • 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 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 4 Polymer et fichier json part IIDéveloppez avec la plate forme Polymer de Google – TUTO 4 Polymer et fichier json part II
  • 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
  • Intégrer les pub de Greystripe.com dans vos applications androidIntégrer les pub de Greystripe.com dans vos 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
  • 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
  • Créer son propre menu de lancement comme la home avec SlidingDrawerCréer son propre menu de lancement comme la home avec SlidingDrawer
  • 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)
  • Développement-Utiliser la liste de ses contacts dans ses applications AndroidDéveloppement-Utiliser la liste de ses contacts dans ses applications Android
  • Développez votre propre réveil (Alarme) avec votre android phoneDéveloppez votre propre réveil (Alarme) avec votre android phone
  • Deux Bouquins pour bien commencer le développement d’application AndroidDeux Bouquins pour bien commencer le développement d’application Android
  • Développez une application pour android étape 19 (Ajout de sous menu)Développez une application pour android étape 19 (Ajout de sous menu)
  • 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évelopper la fonction shake (secouer) dans vos applications AndroidDévelopper la fonction shake (secouer) dans vos applications Android
  • Udacity – 4 nouveaux modules pour ses cours de dev sour AndroidUdacity – 4 nouveaux modules pour ses cours de dev sour Android
  • Recherche vocale – 6 lignes de code pour interagir avec vos AppsRecherche vocale – 6 lignes de code pour interagir avec vos Apps
  • Tuto développement – créer votre propre carrousel avec developpez.comTuto développement – créer votre propre carrousel avec developpez.com
  • Développer vos applications Android en PHPDévelopper vos applications Android en PHP

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)


LG dépose G3 Lite, G3 Vigor, G3 Vista et G3 BeatTV Mine - L'application TV 2.0 en cours de financement
  • KrakenRose

    C’est le meilleur tuto sur Polymer que j’ai pu trouver (que ce soit en anglais ou en français). Merci beaucoup, et vivement la suite !

  • momo momo

    sa ne marche pas pour moi c’est normal ?

Gnakouri Danon

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

2 juillet 2014 Actualité, Developpement, Tuto développementandroid, Application, Developpement, framework, tuto, tuto polymer, web application, web components, Windows 71,086

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.