iPhone iPad Android - Création d'applications avec jQuery mobile et PhoneGap

Durée du module / 5 jours

Objectif

Ce module permet d'apprendre à développer des applications mobiles natives pour iPhone, Android, Blackberry, Windows Phone, etc... en utilisant jQuery mobile et PhoneGap.

jQuery mobile est un framework adossé à jQuery, la célèbre librairie JavaScript. jQuery mobile fournit à la fois une structure (navigations, transitions, traitement des données) et un ensemble de composants faciles à utiliser et à modifier.

En s'appuyant sur des standards (CSS3, HTML5, JavaScript), jQuery mobile garantit l'interopérabilité et la longévité de vos applications : une même application est totalement multi-plateforme et ne nécessite pas le recours aux langages "natifs" (Objective C, Java...).

Votre application jQuery mobile sera ensuite convertie en application native via PhoneGap, pour une multitude de plateformes. Enfin, PhoneGap donne accès aux fonctionnalités natives des téléphones et tablettes : accéléromètre, geolocalisation, boussole, système de fichiers...

Prérequis

Cette formation s'adresse à un public de développeurs web (JavaScript, HTML, CSS).
Des notions de jQuery sont nécessaires.

Outils

jQuery mobile 
PhoneGap

Déroulé

Introduction

Présentation de jQuery, jQuery UI et jQuery mobile.
Notions de « fallback » et de « responsive design ».
Plateformes supportées.
Quels usages pour jQuery mobile ?

Pages

Architecture d’une page dans jQuery mobile.
Eléments d’une page : page, header, content, footer.
Notion de data-role, de viewport.
Template pour page unique VS template multi-page.
Liens entre pages : AJAX, bouton retour...
Transitions entre pages : transitions par défaut, transitions personnalisées en CSS /JS.
Gérer l’enchainement des transitions avec un écouteur.

Boîtes de dialogue

Notion de boîte de dialogue.
Gérer l’ouverture et la fermeture d’une boîte de dialogue.
Transitions, historique, styles et thèmes.

Architecture de l’application

Préchargement et mise en cache des pages.
Gérer les ressources occupées par le DOM.
Notion de « hash » d’une page et son rôle dans la navigation.
Le plugin « pushState ».
La fonction $.mobile.changePage() . 
L’attribut « data-url ».
Injection dynamique de pages.

Ajout de code dans les pages

Placement et exécution du code dans la page.
L’événement « pagecreate ».
Changer de page en JavaScript.
Charger une page avec « loadPage() ».
L’événement « create ».
Distinction entre « création » et « rafraichissement » d’une page.
Scroller à une position donnée à l’intérieur d’une page avec « silentScroll() ».
Passer des paramètres entre pages.

Evénements spécifiques

Evénements spécifiques de jQuery mobile : pageInit() et pageCreate() .
Evénements tactiles : tap, taphold, swipe...
Evénements souris virtuels : vmouseover, vmousedown, vmousemove...
Détecter l’orientation de l’écran avec « orientationchange ».
Evénements liés aux pages : pagebeforeload, pageload, pagebeforechange, pagechange, pageremove...

L’objet $.mobile

Configuration de jQuery mobile : l’événement mobileinit.
L’objet $.mobile et ses options configurables.
Méthodes et propriétés utiles de l’objet $.mobile : changePage(), loadPage(), path.parseURL()...

Mise en forme du contenu

Styles HTML basiques par défaut.
Grilles de mise en page, multi-colonnage.
Contenu « dépliable » : afficher/masquer un contenu.
Effet « accordéon » sur des contenus multiples.

Composant Toolbar

Types de Toolbar : « Header  bar », « Footer bar » et « Navbar ».
Options de positionnement : « inline », « fixed » et « fullscreen ».
« Header bar » : structure, style, ajout de boutons, bouton retour...
« Footer bar » : structure, ajout de boutons, d’éléments form...
« Navbar » : structure, ajout de boutons, d’icones...
« Navbar » persistante dans le footer.

Composant Button

Bases du composant Button : options, méthodes et événements.
Ajout d’icones : l’attribut « data-icon » et les icones par défaut.
Positionnement des icones dans le bouton.
Icones personnalisées.
L’attribut « data-inline ».
Regrouper des boutons via « controlgroup ».

Eléments de formulaire

Conventions d’écriture : id et label.
Cacher, désactiver, aligner les éléments du formulaire.
Initialisation et rafraichissement des éléments.
Text inputs et Textareas.
Champ de recherche (« search input »).
Slider, flip switch.
Radio buttons, checkboxes, menus de sélection.
Soumission de formulaires.

Composant List

Types de listes : linked list, nested list, numbered list, split button list.
Options : list dividers, count bubble, vignettes, icones, inset lists.
Mise en forme du contenu d’un item de la liste.
Filtrer une liste avec un champ de recherche.

Thèmes

Thèmes et palettes.
L’application ThemeRoller.

Créer une application native avec PhoneGap

Présentation de PhoneGap : génération d’applications natives et accès aux API des devices (accéléromètre, géolocalisation...).
Plateformes et API supportées par PhoneGap.
Les plateformes en présence et leur écosystème.
Packager son application pour iOS, Android...

Accès aux fonctionnalités natives avec PhoneGap

Informations sur l’appareil avec Device.
Evénements spécifiques à PhoneGap : deviceready, pause, resume, online, offline...
Gérer les mouvements du device avec Accelerometer.
Prendre une photo avec Camera.
Lire et enregistrer du son avec Media.
Connaître une direction avec Compass (boussole).
Notifications : alert, vibreur...
Accès aux infos de positionnement avec Geolocation.
Accès au système de fichiers avec File.