jQuery mobile / PhoneGap   Contenus dynamiques client-side
Nicolas GansFormateur Flash / AS3 / AIR / jQuery /    jQuery mobile / PhoneGap           www.regart.net           @nicolas...
Introduction
Présentation• Problématique abordée :• Comment générer du contenu HTML dynamiquement  côté client (sans PHP !) ?• Quelles ...
Présentation de jQuery• jQuery : une librairie JS = du code JS prêt à l’emploi qui  simplifie un certain nombre d’opératio...
jQuery mobile• jQuery mobile : framework qui s’appuie sur JQ et qui  permet de créer facilement des interfaces pour les si...
Plate-formessupportées• JQM supporte une multitude de plate-formes mobiles.  De plus il gère automatiquement les différenc...
Plate-formes supportées• Apple iOS (iPhone, iPodtouch and iPad)• Android• Symbian, S60 et UIQ (utilisé sur un nb TRES impo...
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écu...
Qu’est-ce qu’une web app ?INCONVÉNIENTS :• Capacités limitées comparé à du natif• Exécution plus lente• Besoin d’une conne...
Web app VS native app• Avec JQM, on peut aussi créer des app natives, qui  s’exécuteront en dehors du navigateur et pourro...
Architecture de lapplication
Page dans JQM• Page JQM = "écran".• Page JQM ≠ page HTML• Page composée de plusieurs sections : header, content  et footer...
Architecture multipage VS pagesséparées• Multipage :  un document HTML  unique contient toutes les  pages JQM.
Architecture multipage VS pagesséparées• Pages séparées : chaque page JQM est placée dans  un document HTML propre.Les pag...
Quelle architecture choisir ?• Multipage :   – Un seul doc HTML = plus facile à maintenir (inclusion JS et     CSS).   – I...
ExempleChargement JSON et générationdunelistview              et de pages
App Paris Culture
Génération de pages : serveur ou client ?• On peut utiliser PHP pour générer les pages côté serveur  (index.php, products....
Génération de pages : serveur ou client ?• CONTRE :  – Native apps : pas de serveur apache en local = la page qui lance   ...
Génération de pages : serveur ou client ?• Rendu client-side : pour XML/JSON.• POUR :   – Adapté pour native apps.   – Plu...
Question de timing :A quel moment générer ?• Les pages JQM ont un "cycle de vie" : depuis leur  initialisation jusquà leur...
JSON est ton ami• JSON : JavaScript Object Notation. Format de  donnéestextuel, générique, dérivé de la notation des  obje...
JSON est ton ami• Chargement JSON avec jQuery :                                  main.js• Simple, non ?
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 ...
Templating avec Mustache.js• Mustache.js = librairie de templating qui permet de  simplifier la génération de contenus HTM...
Injection du HTML dans la page• Partie la plus facile : méthodes append(),appendTo() et  html() de jQuery.Exemple :• Probl...
Stylisation du contenu injecté• Si l’on crée/modifie dynamiquement le contenu  d’éléments de type listviews ou form, JQM n...
Méthode ‘refresh’Uncaught cannot call methods on listview prior  to initialization; attempted to call method  refresh• Err...
Forcer le changement de page• Interception du click sur un bouton pour gérer soi-même  le changement de page.• Méthode $.m...
Modifier une page existante• ‘pageinit’ n’est diffusé qu’une fois à l’appel de la page :  pas utilisable pour des changeme...
Tips et conclusion
TIPS !• Si app native charge du contenusurvotreserveur : utiliser  URLs absolues !• Chargement AJAX inter-domaine (crossdo...
MERCI ;)www.regart.net@nicolasgans
Une (toute) dernière chose
PhoneGapbuild
Upcoming SlideShare
Loading in...5
×

jQuery mobile / PhoneGap : contenus dynamiques client-side

8,688

Published on

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,688
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
212
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery mobile / PhoneGap : contenus dynamiques client-side

  1. 1. jQuery mobile / PhoneGap Contenus dynamiques client-side
  2. 2. Nicolas GansFormateur Flash / AS3 / AIR / jQuery / jQuery mobile / PhoneGap www.regart.net @nicolasgans
  3. 3. Introduction
  4. 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. 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. 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. 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. 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. 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. 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. 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. 12. Architecture de lapplication
  13. 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. 14. Architecture multipage VS pagesséparées• Multipage : un document HTML unique contient toutes les pages JQM.
  15. 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. 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. 17. ExempleChargement JSON et générationdunelistview et de pages
  18. 18. App Paris Culture
  19. 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. 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. 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. 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. 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. 24. JSON est ton ami• Chargement JSON avec jQuery : main.js• Simple, non ?
  25. 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. 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. 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. 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. 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. 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. 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. 32. Tips et conclusion
  33. 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. 34. MERCI ;)www.regart.net@nicolasgans
  35. 35. Une (toute) dernière chose
  36. 36. PhoneGapbuild
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×