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...
Cette formation s'adresse à un public de développeurs web (JavaScript, HTML, CSS).
Des notions de jQuery sont nécessaires.
jQuery mobile
PhoneGap
Présentation de jQuery, jQuery UI et jQuery mobile.
Notions de « fallback » et de « responsive design ».
Plateformes supportées.
Quels usages pour jQuery mobile ?
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.
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.
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.
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 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...
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()...
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.
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.
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 ».
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.
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 et palettes.
L’application ThemeRoller.
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...
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.