Your SlideShare is downloading. ×
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery mobile / PhoneGap : contenus dynamiques client-side

8,405

Published on

Présentation effectuée le 24 mai 2012 à l'occasion de la Creative week Adobe live à Paris. …

Présentation effectuée le 24 mai 2012 à l'occasion de la Creative week Adobe live à Paris.

Problématiques abordées :
- Comment générer du contenu HTML dynamiquement côté client (sans PHP !) ?
- Quelles sont les techniques disponibles, les bonnes pratiques, les pièges à éviter ?

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,405
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
196
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery mobile / PhoneGap Contenus dynamiques client-side
  • 2. Nicolas GansFormateur Flash / AS3 / AIR / jQuery / jQuery mobile / PhoneGap www.regart.net @nicolasgans
  • 3. Introduction
  • 4. Présentation• Problématique abordée :• Comment générer du contenu HTML dynamiquement côté client (sans PHP !) ?• Quelles sont les techniques disponibles, les bonnes pratiques, les pièges à éviter ?
  • 5. Présentation de jQuery• jQuery : une librairie JS = du code JS prêt à l’emploi qui simplifie un certain nombre d’opérations complexes.• Utilisé massivement par les développeurs web = devenu un « standard » de facto.AVANTAGES :• Facilité d’usage : syntaxe simplifiée et synthétique• Compatibilité et « fallback » entre tous les navigateurs• Grosse communauté : plugins et mise à jour• Projets annexes : jQuery UI, jQueryMobile
  • 6. jQuery mobile• jQuery mobile : framework qui s’appuie sur JQ et qui permet de créer facilement des interfaces pour les sites ou web apps mobiles. JQM fournit des composants, un layout, une architecture et des outils pour les designers et les codeurs.• Typiquement, les pages peuvent être crées en pur HTML, JQM appliquera automatiquement les styles adéquats et les fonctionnalités nécessaires à l’affichage de l’interface et des pages.• Mais on peut évidemment utiliser JS/JQ pour ajouter des effets et fonctionnalités avancées !
  • 7. Plate-formessupportées• JQM supporte une multitude de plate-formes mobiles. De plus il gère automatiquement les différences de fonctionnalités entre navigateurs et plate-forme.• Notion de « fallback » : sur des navigateurs anciens, le contenu s’affichera toujours, avec moins de fonctionnalités que sur des navigateurs « modernes ».• Notion d’amélioration progressive (« progressive enhancement ») : JQM commence par générer une version basique de la page, puis ajoute des effets et des fonctionnalités en fonction du navigateur.
  • 8. Plate-formes supportées• Apple iOS (iPhone, iPodtouch and iPad)• Android• Symbian, S60 et UIQ (utilisé sur un nb TRES important de Smartphones)• Windows Phone 7 et Windows Mobile• BlackBerry OS• Palm WebOS• Amazon Kindleet Fire• Les navigateurs de bureau comme Chrome, FF, Safari, IE et OperaPour une liste complète, voir http://jquerymobile.com/gbs/
  • 9. Qu’est-ce qu’une web app ?• Une web appest une app qui s’exécute côté serveur et dans le navigateur. L’app pourra s’exécuter sur n’importe quel poste muni d’un navigateur.• Exemples de web apps : Gmail, Google Docs,ThemeRoller...AVANTAGES :• Ecrire une fois le code, l’exécuter partout : les web apps sont cross-platform.• Faciles à créer : les langages utilisés (HTML, JS, CSS, PHP...) sont faciles à maîtriser et très répandus.• Faciles à maintenir : le code est centralisé sur le serveur, donc MAJ simplifiées et transparentes.
  • 10. Qu’est-ce qu’une web app ?INCONVÉNIENTS :• Capacités limitées comparé à du natif• Exécution plus lente• Besoin d’une connexion internet pour fonctionner (à nuancer)NOTE :• même si JQM a été plutôt pensé pour faire des web apps, il peut aussi être utilisé pour faire des sites mobiles.
  • 11. Web app VS native app• Avec JQM, on peut aussi créer des app natives, qui s’exécuteront en dehors du navigateur et pourront être distribuées via l’App Store ou l’AndroidMarket.• Il faudra alors utiliser des outils comme PhoneGap ou Titanium pour encapsuler nos apps écrites en HTML/JS/CSS dans une application mobile native (Webview ou UIWebview).• Cette approche permet également d’accéder aux fonctionnalités natives du device (accéléromètre, caméra...).
  • 12. Architecture de lapplication
  • 13. Page dans JQM• Page JQM = "écran".• Page JQM ≠ page HTML• Page composée de plusieurs sections : header, content et footer.• Attribut data-role :<div data-role="page" id="home"><div data-role="header">…</div><div data-role="content">…</div><div data-role="footer">…</div> index_01.html</div>
  • 14. Architecture multipage VS pagesséparées• Multipage : un document HTML unique contient toutes les pages JQM.
  • 15. Architecture multipage VS pagesséparées• Pages séparées : chaque page JQM est placée dans un document HTML propre.Les pages sont chargées automatiquement en AJAX parJQM.
  • 16. Quelle architecture choisir ?• Multipage : – Un seul doc HTML = plus facile à maintenir (inclusion JS et CSS). – Idéal pour les contenus très dynamiques : squelette vide que lon va remplir dynamiquement. – Complexe pour les contenus statiques et si BEAUCOUP de pages.• Pages séparées : – Plus difficile à maintenir. – Recommandé pour les contenus statiques.
  • 17. ExempleChargement JSON et générationdunelistview et de pages
  • 18. App Paris Culture
  • 19. Génération de pages : serveur ou client ?• On peut utiliser PHP pour générer les pages côté serveur (index.php, products.php…).• POUR : – Adapté pour app / site dans le navigateur. – Moins gourmand pour le client. – Contenu adapté en fonction de la plate-forme.
  • 20. Génération de pages : serveur ou client ?• CONTRE : – Native apps : pas de serveur apache en local = la page qui lance lappli doit être en HTML. – Native apps : problèmes de crossdomain. – Offline ? AÏE ! – Bande passante… – Certains contenus peuvent être en XML (flux RSS) ou JSON…
  • 21. Génération de pages : serveur ou client ?• Rendu client-side : pour XML/JSON.• POUR : – Adapté pour native apps. – Plus léger en bande passante (données brutes). – Mise en cache plus simple.• CONTRE : – Plus gourmand pour le client.
  • 22. Question de timing :A quel moment générer ?• Les pages JQM ont un "cycle de vie" : depuis leur initialisation jusquà leur affichage.• Nombreux événements liés aux pages : "pageinit", "pagebeforecreate", "pagecreate", "pagebefor eshow"…• Lequel choisir pour injecter notre contenu ?• Réponse : "pageinit" ! Equivalent du ready() de JQ
  • 23. JSON est ton ami• JSON : JavaScript Object Notation. Format de donnéestextuel, générique, dérivé de la notation des objetsECMAScript.• Deux types délémentsstructurels : – Ensemble de paires nom/valeur (Object) – Listesordonnées de valeurs (Array) musees.json• Facile àutiliser, surtout avec JS et JQ !
  • 24. JSON est ton ami• Chargement JSON avec jQuery : main.js• Simple, non ?
  • 25. Génération du HTML• Une fois les data chargées, on génère le HTML attendu sous forme dune chaine de caractère :• Ho wait ? On va devoir concaténer comme ça tout le temps ?
  • 26. Templating avec Mustache.js• Mustache.js = librairie de templating qui permet de simplifier la génération de contenus HTML dynamiques client-side. Voir http://bit.ly/tPdsgo• On utilise la double accolade {{propriété}} pour insérer nos données dans un template :
  • 27. Injection du HTML dans la page• Partie la plus facile : méthodes append(),appendTo() et html() de jQuery.Exemple :• Problème : le HTML apparaît "brut", il na pas été "amélioré" par JQM…
  • 28. Stylisation du contenu injecté• Si l’on crée/modifie dynamiquement le contenu d’éléments de type listviews ou form, JQM ne stylise pas automatiquement les modifications apportées.• Pour appliquer une stylisation à un élément modifié, il faudra faire un « refresh » sur l’élement modifié : – Listview : element.listview(refresh) – Select menu (non-actif) : element.selectmenu(refresh) – Checkbox ou radio button : element.checkboxradio(refresh) – Slider et flip toggle : element.slider(refresh) – Button : element.button(refresh)
  • 29. Méthode ‘refresh’Uncaught cannot call methods on listview prior to initialization; attempted to call method refresh• Erreurlevéesi on appelle la méthode refresh() AVANT la diffusion de l’événement ‘pageinit’ (page jamaisappelée).• SOLUTION : – Attendre le ‘pageinit’. – Appeler la méthode ‘page()’ sur l’élément page qui va recevoir le contenu > force l’initialisation.
  • 30. Forcer le changement de page• Interception du click sur un bouton pour gérer soi-même le changement de page.• Méthode $.mobile.changePage(page, options);
  • 31. Modifier une page existante• ‘pageinit’ n’est diffusé qu’une fois à l’appel de la page : pas utilisable pour des changements récurrents.• ‘pagebeforeshow’ : diffusé avant chaque affichage de la page = pratique pour modifier une page en coulisse, puis l’afficher.
  • 32. Tips et conclusion
  • 33. TIPS !• Si app native charge du contenusurvotreserveur : utiliser URLs absolues !• Chargement AJAX inter-domaine (crossdomain) : Le chargement AJAX sur un serveur distant estinterdit. Les solutions existent (JSONP, proxy...).• PhoneGap : whitelistiOS = domainesautorisés pour l’application.• Gestion des hash dans la barred’adresse : voir data-url.
  • 34. MERCI ;)www.regart.net@nicolasgans
  • 35. Une (toute) dernière chose
  • 36. PhoneGapbuild

×