JQuery Mobile : tutoriel (1.0)

Avril 2012

Voici un petit tutoriel pour vous expliquer comment débuter avec JQuery Mobile. Ce tutoriel est assez ancien (2012) et concerne jQuery Mobile en version 1.0. Si vous soulez quelque chose de plus actualité, merci de me le signaler via Twitter.

Comme vous pouvez vous en rendre compte, ce tutoriel est très long et complet. Prenez votre temps pour assimiler les concepts évoqués et construisez votre propre site mobile en même temps pour faciliter l'apprentissage de jquery Mobile.

Introduction

JQuery Mobile est un ensemble de fonctions et de logiciels ("framework" en anglais) qui vont vous permettre d'afficher correction un site Internet sur un Smartphone (Android, iPhone, Blackberry). Ce framework va donc nous permettre de mettre en place un beau site Internet optimisé pour les mobiles avec des témoins de chargements de pages, des transitions entre les pages, etc.

Pour faire simple nous n'allons voir que quelques éléments de ce JQuery Mobile, mais sachez qu'il est possible de construire de vraies applications mobiles parfaitement utilisables sur un grand nombre de téléphones avec ce framework.

*Avertissement* : il s'agit d'un tutoriel destiné avant tout aux personnes qui savent déjà programmer (en CSS et HTML au moins). Je vais donc entrer directement dans le vif du sujet. Vous pouvez naturellement en suite échanger avec moi via les commentaires si vous avez des questions.

Il y a un début à tout

Nous allons commencer par créer un fichier nommé index.html. Ce fichier va contenir la structure de la page et sera notre outil de travail. Pour mener à bien les modifications, je vous recommande l'utilisation d'un bon éditeur de texte comme VIM (pour les plus courageux d'entre vous) ou NetBeans qui est un vrai IDE de développement web une fois bien configuré.

Contenu du fichier HTML :


<!DOCTYPE html> 
<html> 
        <head> 
        <title>My Page</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

        <div data-role="header">
                <h1>My Title</h1>
        </div><!-- /header -->

        <div data-role="content">       
                <p>Hello world</p>              
        </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Comme vous le voyez, on utilise directement les fichiers JS et CSS disponibles sur le CDN de JQuery. Bien sûr, vous pouvez aussi mettre une copie de ces fichiers sur votre propre serveur si vous préférez travailler ainsi. A chaque étape, vous devrez ouvrir le fichier dans votre navigateur pour afficher le résultat :

Première page en JQuery Mobile

Le "template" JQuery Mobile est structuré en page. Il est possible d'insérer plusieurs page dans un même fichier et de les lier ensemble via des liens du type #page1, #page2, etc.

De même, chaque page est struturée avec une entête ("header"), un contenu ("content") et - éventuellement - un pied de page ("footer").

Les listes avec filtre

La première étape est très simple, mais nous allons maintenant modifier un peu ce fichier pour lui demander d'afficher une liste d'éléments ainsi qu'un champ au dessus de la liste pour effectuer un filtre :


<!DOCTYPE html> 
<html> 
    <head> 
        <title>My Page</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head> 
    <body> 

        <div data-role="page">

            <div data-role="header">
                <h1>My Title</h1>
            </div><!-- /header -->

            <div data-role="content">
                <p>Super Framework ?</p>
                <ul data-role="listview" data-inset="true" data-filter="true">
                    <li><a href="#">JQuery</a></li>
                    <li><a href="#">JQuery Mobile</a></li>
                    <li><a href="#">Mootools</a></li>
                    <li><a href="#">Symfony</a></li>
                    <li><a href="#">Code Igniter</a></li>
                </ul>           
            </div><!-- /content -->

        </div><!-- /page -->

    </body>
</html>

N'hésitez pas à modifier cette liste pour vous tester les capacités de JQuery Mobile.

Ajouter un bouton à votre page JQuery Mobile

La liste c'est bien, mais vous n'avez peut être pas besoin de tout l'arsenal (liste d'élement, filtre, etc.) et un simple bouton peut aussi bien faire l'affaire.

Voici le code à ajouter où vous voulez pour mettre un bouton sur votre page :


<a href="#" data-role="button" data-icon="">Bouton</a>

Vous allez me dire : "Ok c'est pas mal mais il y a l'attribut data-icon qui est vide" et vous aurez raison ! "data-icon" permet d'indiquer à JQuery Mobile le style d'icone à associé à votre bouton. Les styles suivants sont possibles :

arrow-l : flêche gauche
arrow-r : flêche droite
arrow-u : flêche haute
arrow-d : flêche basse
delete : croix
plus : plus
minus : moins
check : valide
gear : roue crantée
refresh : rafraîchir
forward : en avant (flêche courbe)
back : en arrière (flêche courbe)
grid : grille
star : étoile
alert : alerte (point d'exclamation style "panneau de signalisation)
info : "i" dans un cercle
home : maison
search : recherche

Comme vous le constatez, les icônes disponibles seront très utiles pour renseigner l'utilisateur sur le but du bouton.

Vous devrez aussi jouer sur la position du bouton avec l'attribut "data-iconpos" dont voici les valeurs possibles :

left : à gauche du texte (position par défaut si non renseigné)
right : à droite du texte
top : au dessus du texte
bottom : en dessous du texte

Enfin, vous pouvez aussi créer des boutons avec un icône et sans texte en utilisant l'attribut data-iconpos="notext".

Les liens entre les pages

Dans l'exemple précédent, nous avons vu comme créer une page simple, ajouter une liste façon "application mobile" et ajouter un bouton à notre page. Mais maintenant il faut apprendre à lier les pages ensemble !

Par défaut, JQuery Mobile utilise Ajax pour gérer les liens entre les pages. Ainsi un simple lien réalisé à l'aide la balise HTML "a" sera bien pris en compte. Dans la plupart des cas, cela ne devrait donc pas poser de problèmes majeurs.

Comme d'habitude, on va partir de notre fichier principal qui a donc un lien (sous forme d'un bouton) vers une page nommée dans cette exemple jquery.php :


<!DOCTYPE html> 
<html> 
    <head> 
        <title>My Page</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head> 
    <body> 

        <div data-role="page">

            <div data-role="header">
                <h1>My Title</h1>
            </div><!-- /header -->

            <div data-role="content">
                <p>Lien vers une autre page</p>
                <a href="jquery.php" data-role="button" data-icon="info">JQuery</a>
            </div><!-- /content -->

        </div><!-- /page -->

    </body>
</html>

Et voici le contenu de la page jquery.php (il n'y a pas de contenu php dans cette page, mais pas de panique, c'est juste pour l'exemple) :


<!DOCTYPE html> 
<html> 
    <head> 
        <title>JQuery</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head> 
    <body> 

        <div data-role="page">

            <div data-role="header">
                <h1>JQuery</h1>
            </div><!-- /header -->

            <div data-role="content">
                <p>JQuery Mobile marche super bien !</p>
            </div><!-- /content -->

        </div><!-- /page -->

    </body>
</html>

Maintenant, en ouvrant la page principale et en cliquant sur le lien qui mène à la page jquery.php, vous verrez une belle transition prise en charge automatiquement par JQuery Mobile !

JQuery Mobile et les liens entre les pages

Si vous voulez faire un lien vers un site extérieur à votre domaine, vous devrez utiliser l'attribut rel="external" lors de la construction de votre lien. Si, par contre, vous voulez rester sur votre site mais désactiver les transitions ajax, vous devrez utiliser l'attribut data-ajax="false".

Il y a quelques petites subtilités à prendre en compte parfois suivant les liens que vous voulez faire (pour un lien vers un répertoire pensez à bien mettre le "/" à la fin de l'URL), mais généralement ça se passe très bien.

Utiliser les transitions JQuery Mobile

Une transition est une animation entre deux pages Internet. Comme vous l'avez vu précédemment, JQuery Mobile gère seul les liens entre les pages et indique une transition par défaut. Cette transition par défaut se nomme "slide".

Mais il est aussi possible de définir une transition parmi celles prédéfinies. Pour ce faire, il faut renseigner l'attribut data-transition sur un lien.

Les transitions possibles sont :

slide : la nouvelle page recouvre l'ancienne en arrivant par la droite
pop : la nouvelle page recouvre l'ancienne petite à petit en zoomant
slideup : la nouvelle page recouvre l'ancienne an arrivant par le bas
fade : al nouvelle page recouvre l'ancienne avec un fondu
slidedown : la nouvelle page recouvre l'ancienne en arrivant par le haut
flip : la page actuelle se "retourne" pour afficher la nouvelle

Les effets derrière chaque transition sont assez difficiles à décrire, c'est pourquoi je vous conseille de les tester une par une pour bien voir leur effet.

Une fois les transitions entre vos pages en place, vous aurez surement envie de faire des transitions "à l'envers" (comme pour la navigation des pages iPhone).

Pour cela il faut utiliser l'attribut data-direction="reverse" sur votre bouton.

La mise en cache des pages

JQuery Mobile permet de mettre en cache les pages qui seront réutilisées le plus souvent. L'intérêt dans une situation mobile est de ne pas obliger le navigateur à charger systématiquement les éléments à chaque fois.

Vous pouvez donc demander à jQuery Mobile de conserver une page en cache grâce à l'attribut data-dom-cache comme présenté ci-dessous :


<div data-role="page" data-dom-cache="true">

Le préchargement de pages

Toujours en situation de mobilité il peut être intéressant de pré-charger les pages qui pourraient être lues par un utilisateur du site. Ainsi, dans le cadre d'une application présentant un album photo, il peut être utile de pré-charger la page contenant la photo précédente ainsi que la page contenant la photo suivante. Ceci toujours dans un soucis de fluidité de l'application mobile (ou du site mobile).

Pour précharger la page liée à un bouton jQuery Mobile on utilise l'attribut data-prefetch :


<a href="jquery.php" data-role="button" data-icon="info" data-prefetch>JQuery</a>

Et voilà, la page pointée par le lien sera pré-chargée et, lors du clic de l'utilisateur, la transition vers cette page se fera dans les meilleurs conditions possibles.

Les toolbars JQuery Mobile

Les Toolbars dans JQuery Mobile sont des sortes de barres d'outils, situées en haut et en bas de la page. On parle de header et footer. Il est possible de paramétrer leur position de deux façons : une fixe et une plein écran.

La position fixe se paramètre ainsi :


<div data-role="header" data-position="fixed">

Pour la position plein écran il faut remplacer la valeur fixed par fullscreen.

Les différences sont les suivantes :

fixed : la barre est positionnée automatiquement et tout le temps en haut (ou en bas si mise dans un "footer") de l'écran,
fullscreen : même comportement que pour le mode fixed sauf qu'elle recouvre les éléments de la page et qu'elle peut être cachée lorsqu'on clique sur la page.

On utilisera donc le mode "plein écran" pour une immersion maximale de l'utilisateur (une gallerie photos par exemple).

Intégrer une navbar JQuery Mobile dans le footer

Il peut parfois être utile de proposer toujours les même boutons à vos utilisateurs. Généralement on place ces boutons en bas de la page. Le plus simple avec JQuery Mobile est d'utiliser une navbar et de la placer dans le "footer" comme ceci :



<div data-role="footer">            
    <div data-role="navbar">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

Et maintenant un petit tour du côté des thèmes et des couleurs pour vos sites Internet développés en jQuery Mobile.

Thèmes et couleurs pour jQuery Mobile

Dans jQuery Mobile chaque « mise en page » est construite autour d'un framework CSS spécial couplé aux fonctions Javascripts.

Le framework inclus des propriétés CSS3 (comme les arrondis, ombres et dégradés) qu'on appelle « themes » mais aussi des couleurs nommés « swatches ».

De même, un ensemble d'icônes est associé à ces éléments pour assurer une cohérence de l'ensemble.

La position, forme et les dimensions de chaque élément sont donc séparées des couleurs.

Sélectionner la bonne couleur

Il est possible d'affecter à chaque élément jQuery Mobile une « couleur » (« swatches ») et un « thème ».

Un « thème » jQuery Mobile peut donc être composé de plusieurs couleurs. C'est d'ailleurs le cas du thème par défaut que nous allons voir tout de suite.

Le thème par défaut de jQuery Mobile peut être utilisé avec 5 couleurs différentes. Ces couleurs portent les noms « a », « b », « c », « d » et « e ».

Pour indiquer quelle couleur utiliser, il suffit d'utiliser l'attribut « data-theme » sur l'élément de votre choix. Ainsi on utilisera data-theme="a" pour choisir la première couleur, data-theme="b" la seconde et ainsi de suite.

Modifier les couleurs

Si vous souhaitez modifier les couleurs deux solutions s'offrent à vous :

Éditer le fichier CSS pour modifier un « swatch » et renseigner vos couleurs,
Utiliser l'outil en ligne nommé « Theme Roller ».

Tout d'abord, les experts apprécieront le fichier CSS fourni par jQuery Mobile qui est bien commenté (dans sa forme non compressée). Il est donc facile de s'y retrouver et changer les couleurs directement dans le fichier ne devrait pas poser de problème majeur.

Ceci-dit, il est toujours plus agréable de pouvoir visualiser ses modifications en direct. C'est là que le « Theme Roller » s'avère intéressant.

Grâce à cet outil, vous pouvez modifier les couleurs de chaque élément en faisant un « glisser / déposer » et admirer le résultat juste après.

Theme Roller jQuery Mobile

Une fois votre travail terminé, il est possible de télécharger et d'utiliser le fichier CSS généré.

Maintenant que nous avons vu comment modifier les couleurs, nous allons nous intéresser au style à proprement parler. C’est-à-dire à la forme et à la position des éléments de votre page gérée par jQuery Mobile.

Si vous souhaitez modifier les ombres, arrondis et autres fantaisies, vous devrez modifier le fichier CSS. Je vous recommande de télécharger la version non compressée du fichier.

Vous trouverez le début des définitions du thème à partir de la ligne 717 (environ). Vous verrez dans le fichier le commentaire /* Structure */ qui indique que vous êtes au bon endroit.

Il va vous falloir un bon outil de développement (genre Chrome ou Firefox équipé de l'extension Firebug) car il y a plus de 1000 lignes de définitions CSS pourle thème par défaut de jQuery Mobile.

Vous pouvez aussi utiliser le « Theme Roller » puisque cet outil peut vous aider à paramétrer les ombres, arrondis et autres choses. Seulement, il n'est pas possible de tout régler avec ce logiciel. Il est donc préférable de l'utiliser pour dégrossir le travail avant de passer à l'édition manuelle.

Le multi-page dans jQuery Mobile

La notion de page dans jQuery Mobile permet de créer plusieurs pages par fichier. Ainsi dans un même fichier source HTML (ou Php, Perl, Python, etc) il est possible d'avoir plusieurs "écrans" mobiles.

Voici un exemple présentant deux pages dans un même fichier. Dans chacune des pages, on trouve un bouton qui mène à l'autre page :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Test jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />        
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>     
    <div data-role="page" data-theme="a" id="page1">
        <div data-role="header" data-position="fixed">
            <h1>Page 1</h1>
        </div>

        <div data-role="content">
            <p>Contenu de la page 1...</p>
            <a href="#page2" data-role="button" data-icon="">Page 2</a>
        </div>
    </div>

    <div data-role="page" data-theme="a" id="page2">
        <div data-role="header" data-position="fixed">
            <h1>Page 2</h1>
        </div>

        <div data-role="content">
            <p>Contenu de la page 2...</p>
            <a href="#page1" data-role="button" data-icon="">Page 2</a>
        </div>
    </div>
   </body>
</html>

Ce fonctionnement est très intéressant lorsqu'il s'agit d'enchaîner plusieurs écrans à la thématique similaire sans pour autant charger complètement un nouveau fichier sur le mobile.

C'est même de cette façon qu'il faut fonctionner avec jQuery Mobile pour obtenir une expérience utilisateur satisfaisante.

Par contre, si on met trop de pages dans un même fichier, il se peut que le temps de chargement de ces pages soit important. Ce qui peut entraîner une gêne pour l'utilisateur.

Les évènements jQuery Mobile

Un évènement (ou event) dans jQuery Mobile permet de déclancer une action à un certain moment. Typiquement on utilise souvent un évènement lors de l'affichage d'une page (au sens jQuery qui peut contenir plusieurs pages dans un même fichier).

Nous allons voir comment déclencher un évènement lorsqu'une page se charge via cette exemple de script Javascript :


<script type="text/javascript">
     $('div[data-role="page"]').live('pagecreate', function (event, ui) {
        console.log("init d'un page");
    });
</script>

Il est aussi possible de faire la même chose pour une page en particulier en l'identifiant grâce à son identifiant (attribut "id").

Voici la liste des évènements qu'il est possible d'utiliser :

tap : un clic que la page
taphold : un clic maintenu sur la page
swipe : un clic maintenu avec mouvement
swipeleft : un clic maintenu avec mouvement à gauche
swiperight : un clic maintenu avec mouvement à droite
vmouseover : un mouseover virtuel pour jouer avec cet évènement
vmousedown : idem pour le mousedown
vmouseup : idem pour le mouseup
vclick : idem pour le click
vmousecancel : idem pour le mouse cancel
orientationchange : changement d'orientation du smartphone (passage du mode portrait au mode paysage)
scrollstart : lorsqu'on commence à scroller
scrollstop : lorsque le scrolle s'arrête
pagebeforeload : avant le chargement d'une page
pageload : au chargement d'une page
pageloadfailed : si le chargement d'une page a échoué
pagebeforechange : avant un changement de page
pagechange : lors du changement de page
pagebeforeshow : avant l'affichage d'une page
pageshow : à l'affichage d'une page
pagehide : lorsqu'une page est cachée
pagebeforecreate : avant la création d'une page
pagecreate : à la création d'une page
pageinit : à l'initialisation d'une page
pageremove : à la suppression d'une page
updatelayout : à la mise à jour du layout

Identifier un smartphone Android

Cette astuce ne se limite pas à jQuery Mobile mais elle peut être très utile si on veut alléger la navigation sur le site pour les utilisateurs utilisant un smartphone Android.

En effet, comme le souligne les auteurs de jQuery Mobile, le navigateur d'Android a beaucoup de mal avec les transitions (en règle général). Il peut donc être intéressant de les désactiver. Voici comment désactiver les transitions jQuery Mobile pour les utilisateurs d'Android :


    var usera = navigator.userAgent.toLowerCase();
                    var isAndroid = usera.indexOf("android") > -1;
                    if(isAndroid) {
                        $.mobile.maxTransitionWidth = 1;
                    }

Indiquer une transition par défaut

Dans la dernière version de jQuery Mobile, la transition par défaut utilisée est le "fade". Vous pouvez remplacer celle-ci grâce à cette instruction :



     $.mobile.defaultPageTransition = "slide";

Comme vous l'avez constaté, on a utilisé la transition "slide" qui correspond plus à ce qu'on attend d'un site mobile. Seulement, le navigateur du système Android ne gère pas très bien ce genre de choses (en tout cas chez jQuery Mobile), utilisez donc les transitions sans en abuser.

jQuery Mobile et Google Maps v3

Si jQuery Mobile est un formidable outil pour construire un site compatible avec les smartphones (mais pas seulement), il peut devenir une vraie galère lorsqu'il s'agit de l'intégrer avec un autre outil utilisant Javascript.

Nous allons faire simple et travailler sur un fichier jQuery Mobile multi-page contenant deux pages.

Voici le code utilisé comme base de travail :



<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile et Google Maps V3</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    </head>
    <body>
        <div data-role="page" data-theme="a" id="accueil">
            <div data-role="header">
                <h1>jQuery Mobile</h1>
            </div>

            <div data-role="content">
                <p>IntÃ©gration avec Google Maps.</p>
                <div data-role="controlgroup" data-type="horizontal"> 
                    <a href="#accueil" data-role="button" data-icon="refresh" data-transition="flip">1</a>
                    <a href="#carte" data-role="button" data-icon="refresh" data-transition="flip">2</a>
                </div>
            </div>
        </div>
        
        <div data-role="page" data-theme="a" id="carte">
            <div data-role="header">
                <h1>jQuery Mobile : Carte</h1>
            </div>

            <div data-role="content">
                <p>La carte Google Maps</p>
                <div data-role="controlgroup" data-type="horizontal"> 
                    <a href="#accueil" data-role="button" data-icon="refresh" data-transition="flip">1</a>
                    <a href="#carte" data-role="button" data-icon="refresh" data-transition="flip">2</a>
                </div>
            </div>
        </div>

    </body>
</html>

Comme vous le voyez, il n'y a rien de bien compliqué. On a deux boutons permettant de passer d'une page à l'autre à l'aide de la transition "flip" (cette transition fonctionne très bien sur iPhone mais peut poser des soucis sur Android). Les scripts et le CSS de base de jQuery Mobile ont été importés et vous pouvez vérifier que tout fonctionne dans votre navigateur (cf. capture ci-dessous).

Intégration de Google Maps V3

Vous aurez peut être constaté qu'il est assez difficile d'utiliser Google Maps dans jQuery Mobile sans avoir recourt à un plugin particulier.

Pourtant, avec un peu de réflexion il est possible d'obtenir quelque chose qui fonctionne bien.

Voici les modifications que nous effectuons sur le fichier vu précédement :


       
<!DOCTYPE html>
        <html>
            <head>
                <title>jQuery Mobile et Google Maps V3</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
                <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
                <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
                <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=VOTRE-CLE-API-GOOGLE-MAPS&sensor=true"></script>
            </head>
            <body>
                <div data-role="page" data-theme="a" id="accueil">
                    <div data-role="header">
                        <h1>jQuery Mobile</h1>
                    </div>

                    <div data-role="content">
                        <p>IntÃ©gration avec Google Maps.</p>
                        <div data-role="controlgroup" data-type="horizontal"> 
                            <a href="#accueil" data-role="button" data-icon="refresh" data-transition="flip">1</a>
                            <a href="#carte" data-role="button" data-icon="refresh" data-transition="flip">2</a>
                        </div>
                    </div>
                </div>

                <div data-role="page" data-theme="a" id="carte">
                    <div data-role="header">
                        <h1>jQuery Mobile : Carte</h1>
                    </div>

                    <div data-role="content">
                        <p>La carte Google Maps</p>
                        <div data-role="controlgroup" data-type="horizontal"> 
                            <a href="#accueil" data-role="button" data-icon="refresh" data-transition="flip">1</a>
                            <a href="#carte" data-role="button" data-icon="refresh" data-transition="flip">2</a>
                        </div>
                        <div id="map" style="width:100%; height:250px;">
                </div>
                    </div>
                </div>

                <script type="text/javascript">
                    function initialize() {
                        console.log("init carte google");          
                        var myOptions = {
                            center: new google.maps.LatLng(46.32, 5.04),
                            zoom: 8,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        map = new google.maps.Map(document.getElementById("map"),myOptions);
                    }
                    
                    $('#carte').live('pageshow',function(event, ui){
                        initialize();
                    });
                </script>
            </body>
        </html>

Je pense que ce fichier mérite quelques explications...

Tout d'abord, il faut bien penser à insérer le script de Google Maps V3 ainsi que renseigner votre clé API.

Un nouveau DIV a été ajouté sur le deuxième page pour afficher correctement la carte. Notez bien que les dimensions sont notées en "dur" dans le div. Pour une raison indéterminée, il semble que cela fonctionne très bien comme cela. L'autre solution qui consiste à créer un fichier CSS ou à mettre le style dans une balise STYLE ne semble pas fonctionner.

Ensuite une fonction d'initilisation a été créer pour lancer Google Maps. (function initialize())

Il s'agit de la fonction qui permet d'afficher la carte.

Pour finir, on demande à jQuery Mobile d'afficher la carte uniquement lorsqu'on en a besoin. C'est à dire qu'on lance l'initilisation au moment où on affiche la page qui contient le DIV de la carte Google :



    $('#carte').live('pageshow',function(event, ui){
          initialize();
    });

jQuery Mobile et Facebook

Cette solution n'est pas optimale du tout. En effet, il s'agit de faire fonctionner l'initialisation du SDK Facebook dans sa plus simple expression. Par exemple : le chargement de la bibliothèque de fonctions Javascript pour Facebook est faite de façon synchrone (alors qu'il est recommandé de la faire de façon asynchrone)...

Mais je vais quand même fournir quelques explications pour que vous puissiez y voir plus clair.

Voici la page de code jQuery Mobile qui permet d'initier la connexion de l'utilisateur à Facebook :



<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile et Facebook SDK Javascript</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script src="http://connect.facebook.net/fr_FR/all.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    </head>
    <body>
        <div data-role="page" data-theme="a" id="accueil">
            <div data-role="header">
                <h1>jQuery Mobile</h1>
            </div>

            <div data-role="content">
                <p>IntÃ©gration avec le SDK Facebook.</p>
                
                <div id="fb-root"></div>
                
            </div>
        </div>

        <script type="text/javascript">
            
            function FBConnecte() {
                FB.login(function(response) {
                    if (response.authResponse) {
                        console.log("Le login a fonctionnÃ©");
                        connexionFacebook();
                    } else {
                        console.log("Le login a Ã©chouÃ© ou l'utilisateur a annulÃ© son login");
                    }
                });
            }
            
            function connexionFacebook() {
                FB.getLoginStatus(function(response) {
                    if (response.status === 'connected') {
                        console.log("On est connectÃ©");
                        var uid = response.authResponse.userID;
                        var accessToken = response.authResponse.accessToken;
                        
                    } else  {
                        console.log("On est pas connectÃ©");
                        FBConnecte();
                    }
                }); 
            }
            
            $('div[data-role="page"]').live('pageshow', function (event, ui) {
                FB.init({appId: 'MON-ID-D-APP-FACEBOOK', status: true, cookie: true, xfbml: true});
                connexionFacebook();
            });
            
        </script>

    </body>
</html>

Tout d'abord vous pourrez remarquer qu'on utilise l'événement jQuery Mobile 'pageshow' pour lancer la connexion Facebook lorsque la page apparaît. Si vous utilisez du multi-page Query Mobile, il faudra peut-être adapté cette instruction en conséquence.

Une fois le FB.init() terminé (n'oubliez pas d'y mettre votre App ID Facebook), on initie la connexion proprement dite.

On commence donc par obtenir le statut de l'utilisateur (FB.getLoginStatus) pour déterminer s'il est déjà connecté ou non. S'il est connecté on récupère simplement quelques variables qui pourront être utiles par la suite. Sinon, on va le connecter grâce à la fonction FBConnecte().

Le login est très simple puisqu'on se contente d'appeler FB.login(). De la même manière que précédemment, on vérifie la réponse. Si le login a fonctionné on le redirige vers connexionFacebook() pour faire les traitements nécessaires. Sinon, on peut afficher un message d'erreur.

Les développeurs web les plus aguéris pourront remarquer que ce code n'est pas franchement optimal. D'ailleurs, on peut faire beaucoup mieux avec les fonctions de chargement Ajax de jQuery par exemple ! Mais ce serait beaucoup moins simple à mettre en oeuvre.

Fin du tutoriel sur jQuery Mobile

Je ne vous avais pas menti, il y a de quoi faire dans ce tuto !

Si vous souhaitez voir un nouveau tutoriel sur une technologie web, n'hésitez pas à m'envoyer un tweet. Il s'agit encore du meilleur moyen pour me contacter.

Pour les autres : j'espère vous avoir un peu aidé.

Pour d'autres articles, cliquez ICI.