Share
jQuery Mobile est un framework Web mobile relativement nouveau, dont la première version a été publiée en octobre 2010. Le framework dispose de nombreuses fonctionnalités intéressantes pour le développement d'applications mobiles basées sur le Web. Dans ce tutoriel, nous allons nous concentrer sur quelques éléments de base de jQuery Mobile: structure de page, formulaires et soumission de formulaire Ajax. Le tutoriel est basé sur la version 1.0 alpha release 2 du framework jQuery Mobile.
Dans le cadre de ce tutoriel, nous allons écrire une petite application B2C. Une société d’expédition de colis dispose sur son site Web d’un formulaire permettant aux clients de saisir des informations sur les colis perdus ou endommagés au cours de l’expédition. À l'aide d'un appareil portatif (par exemple, un téléphone activé sur le Web), un client entre dans le formulaire les informations relatives à sa réclamation: le numéro d'expédition du reçu d'origine, son nom / adresse et une description de la perte / du dommage. Lorsque le client soumet le formulaire, le site Web répond avec un identifiant de réclamation pour un suivi ultérieur. Le scénario est présenté dans le diagramme ci-dessous:
La structure jQuery Mobile prend en charge une variété de navigateurs, notamment les périphériques iOS, Android, Blackberry OS 6 et webOS (pour une matrice de support, voir http://jquerymobile.com/gbs/). L'application de ce didacticiel a été testée sur un appareil Android 2.2 et un appareil iOS 4.1..
Avant d’entrer dans les détails techniques, parlons des principales considérations à la base de la conception de l’application..
Bien entendu, une application typique de la vie réelle posera des problèmes de conception supplémentaires ou différents. Pour les besoins de ce tutoriel, notre portée sera limitée aux considérations ci-dessus..
La plupart des discussions dans cette section ont été empruntées à la documentation de http://jquerymobile.com. Voir la référence d'origine pour plus de détails.
jQuery Mobile est un système d'interface utilisateur construit sur le célèbre framework JavaScript jQuery. Il se compose d'éléments d'interface utilisateur et de structures de programmation fournissant des fonctionnalités cohérentes sur une grande variété de navigateurs Web mobiles et de bureau. Les principes de "Progressive Enhancement" et de "Graceful Degradation" sont à l'origine de sa conception. La fonctionnalité principale de la structure prend en charge un large éventail de plates-formes, tandis que les nouvelles plates-formes bénéficient de fonctionnalités améliorées..
jQuery Mobile a une empreinte relativement petite. Étant donné que la configuration de base d'une page jQuery Mobile se fait uniquement par balisage, il est possible de réaliser des cycles de développement rapides, en particulier si votre application n'a pas besoin de fonctions de programmation complexes. Bien que construit sur le noyau de jQuery, le système de thématisation de jQuery Mobile est basé sur un nouveau cadre CSS qui vise à séparer la couleur et la texture des styles structurels qui définissent des éléments tels que le remplissage et les dimensions. Une API de gestion d'événements gère les méthodes de saisie utilisateur basées sur le focus, la souris et le curseur de manière unifiée.
jQuery Mobile est livré avec de nombreux éléments d'interface utilisateur tels que des barres d'outils d'en-tête et de pied de page, des boutons avec des icônes, des éléments de formulaire (y compris des curseurs tactiles et des commutateurs à bascule) et des listes. Des styles HTML de base, des grilles à deux ou trois colonnes et des éléments réductibles sont également fournis..
À compter de la version jQuery Mobile 1.0 alpha 2, les bibliothèques de feuilles de style et JavaScript suivantes doivent être incluses dans vos pages HTML. Vous pouvez les référencer comme ci-dessous ou les servir à partir de votre propre serveur:
Laissez-nous vous présenter la structure de base d'une page dans jQuery Mobile. Une page dans jQuery Mobile Framework peut être une page unique ou une "page" interne interne liée dans une page. Une page 'conteneur' inclura une ou plusieurs pages de 'contenu'. La limite d'une page de conteneur est définie comme suit:
…
Observez que la valeur de la data-role attribut est page. D'autre part, la limite d'une page de contenu est définie comme suit:
…
Observez que la valeur de la data-role attribut est contenu.
Une page de contenu peut avoir un en-tête et un pied de page associés. Par exemple, une page conteneur contenant plusieurs pages de contenu peut avoir la structure suivante:
…………………
Lorsqu'une page de conteneur est chargée, toutes les pages de contenu de celle-ci sont visibles. Dans notre application, nous n'avons besoin d'afficher qu'un contenu à la fois. Par conséquent, nous devons contrôler par programme le contenu à afficher en fonction du contexte..
Pour masquer un élément, utilisez l’API jQuery Mobile. cacher() une fonction:
Accentsconagua
$ ('# hdrMain'). hide (); va cacher l'en-tête avec identifiant hdrMain. Ici, nous avons utilisé le sélecteur d’ID jQuery en passant identifiant de l'élément que nous aimerions sélectionner précédé de # signe. Inversement, le spectacle() fonction montre un élément caché:
$ ('# hdrMain'). show (); le Notre application de démonstration consiste en une seule page html, Les transitions de contenu sont illustrées dans le diagramme ci-dessous: Observations supplémentaires sur la liste de codes ci-dessus: Notre formulaire de réclamation comprend les champs suivants: À titre d’exemple, examinons le champ de texte correspondant au numéro d’expédition: Nous avons utilisé un Comme nous le verrons plus tard, cette convention de dénomination spéciale nous aidera à détecter les champs manquants lors de la soumission du formulaire.. Un autre élément de forme notable est le La page de formulaire affichée sur un téléphone Android 2.2 est présentée ci-dessous. L'utilisateur fera défiler la page pour accéder aux éléments du formulaire: Le même formulaire apparaît sur un iPod touch sous iOS 4.1: Nous allons référencer divers éléments dans la page html tout au long de notre code. Il est logique de définir ces références une seule fois et de les réutiliser au besoin. Pour cette raison, nous déclarons des variables utilisées globalement ainsi que des constantes dans Les affectations de ces variables sont effectuées dans jQuery Voyons maintenant les fonctions de sélection de contenu qui seront appelées par les gestionnaires d'événements.. Pour masquer et afficher le contenu principal et son en-tête / pied de page, nous utilisons le Pour masquer et afficher le contenu de la transition, nous utilisons le Pour masquer et afficher le contenu du dialogue, nous utilisons le Enfin, pour masquer et afficher le contenu de la confirmation et son en-tête / pied de page, nous utilisons le Lorsque la page est chargée, seul le contenu principal doit être affiché. Pour cette raison, d'autres pages de contenu sont masquées: Nous verrons comment lier ces fonctions de sélection de contenu aux gestionnaires d'événements ci-dessous.. Lorsqu'un utilisateur appuie sur le bouton d'envoi, nous devons valider les données du formulaire avant de le soumettre. Pour que les choses restent simples, nous ne ferons que vérifier si tous les champs obligatoires ont été fournis. Si la validation du formulaire est réussie, nous affichons le contenu de la transition, qui consiste en une image spinner avec un court texte informant l'utilisateur que le formulaire est en cours d'envoi. Si la validation échoue, nous affichons le contenu de la boîte de dialogue qui consiste en un avertissement et un bouton OK pour fermer la boîte de dialogue.. Les étiquettes des éléments de formulaire avec des données manquantes seront surlignées en rouge. À cette fin, nous ajoutons une nouvelle classe de style nommée manquante et étendons jQuery Mobile. Vous trouverez ci-dessous le gestionnaire d'événements pour la soumission de formulaire. En notation jQuery typique, l’identifiant pour Nous avons défini un drapeau d'erreur sur le Une fois que toutes les étiquettes précédemment sélectionnées ont été réinitialisées, nous revisitons les De plus, l'indicateur d'erreur est défini sur true et la boîte de dialogue d'erreur s'affiche. La figure ci-dessous montre la boîte de dialogue d'erreur de notre téléphone Android 2.2: Une fois que l'utilisateur a appuyé sur le bouton OK, la page de formulaire est affichée avec les champs manquants mis en surbrillance, comme illustré ci-dessous. Sur cette image, l'orientation de l'écran du téléphone est horizontale. Notez que chaque étiquette et son champ de texte apparenté sont affichés sur une seule ligne, contrairement à l'orientation verticale de la figure 3, où l'étiquette est au-dessus du champ de texte.. D'autre part, si la validation réussit, nous montrons le contenu de la transition et soumettons le formulaire comme indiqué ci-dessous.. La soumission de formulaire utilise jQuery Mobile Notez que le La fonction en ligne permettant de traiter la réponse est exécutée uniquement lorsque le serveur renvoie sa réponse. Pour plus de simplicité, l’application serveur traitant les données de formulaire, Lorsque la réponse du serveur est reçue, le code du gestionnaire d'événements est exécuté. La première étape consiste à renseigner le Ensuite, nous masquons le contenu de la transition et affichons le contenu de la confirmation contenant le Une nouvelle demande a été créée en fonction des données que vous avez soumises.. Votre numéro de confirmation est: La page de confirmation affichée sur notre téléphone Android 2.2 est présentée ci-dessous (l'orientation du téléphone est horizontale): La même page de confirmation s’affiche comme suit sur un iPod touch (l’orientation est verticale): Le code source du tutoriel a une structure de dossier simple. Toutes les ressources sont stockées dans un dossier nommé Dans ce didacticiel, nous avons introduit les concepts de base du framework jQuery Mobile en mettant l’accent sur la structure de la page, le style de base, les éléments de formulaire et la soumission de formulaire Ajax. Un exemple d’application de traitement des demandes de remboursement a été introduit pour démontrer ces concepts. Nous avons fourni des captures d'écran de différentes pages de l'application exécutée sur un téléphone Android 2.2 et sur un iPod touch avec iOS 4.1. Quelques observations et remarques finales sont données ci-dessous:cacher() et spectacle() fonctions s’appliquent à des éléments de nombreux types différents, en particulier, ( Mots clés). Dans ce tutoriel, nous allons utiliser cacher() et spectacle() de nombreuses fonctions pour n’afficher que le contexte pertinent pour l’utilisateur de l’application. Plus de détails sont donnés ci-dessous.
Étape 1: Structure de la page de l'application de démonstration
index.html, qui consiste en une page de conteneur comme indiqué ci-dessous:
thème de données attribut nous permet de choisir parmi les styles disponibles dans le framework jQuery Mobile: a, b, c, d, e, chacun fournissant un ensemble cohérent de couleurs pour différents éléments de la page. Pour notre application, nous avons choisi la couleur correspondant à b. data-nobackbtn = "true".Éléments de formulaire
contribution Champs de type texte: Numéro d'expédition, Prénom, Nom, Email, Téléphone, Adresse, Ville et Code postal. Tous sont obligatoires sauf Téléphone.sélectionner élément pour Etat. Ceci est un champ obligatoire.zone de texte élément permettant à l’utilisateur de saisir les informations relatives à l’envoi manquant ou endommagé. Ceci est un champ obligatoire.
étiquette avec un pour attribut dont la valeur est la même que la identifiant du contribution élément le étiquette est attaché à. De plus, nous avons emballé le étiquette et contribution dans un div avec data-role attribut évalué comme champcontain. Le cadre jQuery Mobile utilisera le champcontain valeur d'attribut pour un style spécial. De plus, regardez name = "shipNo_r". Pour cette application particulière, nous avons décidé de définir la valeur du prénom attribut de tout élément de formulaire requis correspondant à la valeur du identifiant attribut ajouté par _r. Si l'élément n'est pas requis, la valeur de prénom attribut sera le même que la valeur de la identifiant attribut. Par exemple, étant donné que Téléphone n'est pas un champ obligatoire, il est défini comme suit:
sélectionner élément. Semblable à ce qui précède, la valeur de la pour attribut est le même que l'id du sélectionner élément le étiquette est attaché à. Également étiquette et sélectionner sont enveloppés dans un div avec le data-role attribuer la valeur en tant que champcontain. Avec la longue liste d'options que nous avons dans cette application, l'infrastructure de jQuery Mobile ouvrira la liste dans une nouvelle page lorsque l'utilisateur se concentrera sur le sélectionner élément.
Étape 2: Définitions de variables
tête section de la page:
$ (document) .ready () fonction à l’aide des sélecteurs d’identité, comme indiqué ci-dessous. (Rappelons que jQuery $ (document) .ready () La fonction est appelée lorsque toute la hiérarchie DOM de la page est chargée. Cette fonction est le meilleur emplacement pour initialiser nos variables.) Nous définissons également inputMapVar comme une collection composée de tous contribution éléments avec _r dans leurs prénom attribut (l'appel de fonction $ ('input [name * = "_ r"]') sélectionne tous ces éléments).
Étape 3: Fonctions de sélection du contenu
hideMain () et showMain () les fonctions: fonction hideMain () hdrMainVar.hide (); contentMainVar.hide (); ftrMainVar.hide (); function showMain () hdrMainVar.show (); contentMainVar.show (); ftrMainVar.show ();
hideContentTransition () et showContentTransition () les fonctions: function hideContentTransition () contentTransitionVar.hide (); function showContentTransition () contentTransitionVar.show ();
hideContentDialog () et showContentDialog () les fonctions: fonction hideContentDialog () contentDialogVar.hide (); function showContentDialog () contentDialogVar.show ();
hideConfirmation () et showConfirmation () les fonctions: fonction hideConfirmation () hdrConfirmationVar.hide (); contentConfirmationVar.hide (); ftrConfirmationVar.hide (); function showConfirmation () hdrConfirmationVar.show (); contentConfirmationVar.show (); ftrConfirmationVar.show ();
Étape 4: Soumission du formulaire
Validation du formulaire
étiquette classe. label.missing color: # FF0000; poids de police: gras;
formulaire 1 est passé à l'appel d'objet jQuery pour gérer l'événement submit: $ ('# form1'). submit (function () var err = false; // Masquer le contenu principal hideMain (); // Réinitialiser les éléments de formulaire mis en évidence précédemment. stateLabelVar.removeClass (MISSING); whatLabelVar.removeClass (MISSING) ; inputMapVar.each (function (index) $ (this) .prev (). removeClass (MISSING);); // // Validation du formulaire inputMapVar.each (function (index) if ($ (this) .val ( ) == null || $ (this) .val () == EMPTY) $ (this) .prev (). addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true; / / Si la validation échoue, affiche le contenu du dialogue si (err == true) showContentDialog (); renvoie false; // si la validation aboutit, affiche le contenu de la transition showContentTransition (); // soumet le formulaire $ .post ("/ forms / requestProcessor.php ", form1Var.serialize (), fonction (data) confirmationVar.text (data); hideContentTransition (); showConfirmation ();); return false;); faux et masquer le contenu principal qui contient le formulaire. Nous réinitialisons ensuite les étiquettes précédemment mises en surbrillance sur chaque membre de la collection. inputMapVar. Pour ce faire, nous passons une fonction inline comme argument à chaque() qui contient simplement $ (this) .prev (). removeClass (MISSING);. Notez que ce est le sélectionné contribution élément et prev () retourne son frère précédent immédiat qui est le étiquette associé avec.Etat pour la sélection d'état et quoi pour description de la revendication ne sont pas des champs de texte. Par conséquent, les styles correspondants ont leurs styles réinitialisés séparément.contribution éléments pour vérifier si l'un d'entre eux a une valeur manquante. Si tel est le cas, nous ajoutons la classe manquante à l'étiquette associée au champ de saisie: // Validation du formulaire inputMapVar.each (fonction (index) if ($ (this) .val () == null || $ (this) .val () == EMPTY) $ (this) .prev () .addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true;
Envoi du formulaire via Ajax
poster fonction qui accepte trois arguments: $ .post ("/ forms / requestProcessor.php", form1Var.serialize (), function (data) …);
sérialiser () sur l'objet jQuery en passant l'identifiant de notre formulaire.Les données, renvoyé du serveur.poster function effectue un appel Ajax qui est asynchrone par nature. Immédiatement après avoir appelé le poster, L’exécution du programme continuera en renvoyant false à partir du soumettre fonction et utilisateur commenceront à voir le contenu de la transition.
requestProcessor.php, renvoie un identifiant de revendication codé en dur que l'utilisateur peut utiliser pour référence future. Avant d'envoyer l'identifiant de la demande requestProcessor.php, il dort 4 secondes pour émuler le temps de traitement du serveur. C’est pendant cette période que l’application affichera le contenu de la transition.
envergure tag nommé confirmation avec la valeur renvoyée par le serveur. Ceci est simplement fait avec: confirmationVar.text (data);
envergure tag nommé confirmation:
Déploiement du code source
formes. Dans ce dossier, il y a deux sous-dossiers, css et img. le css dossier contient couleurs.css, qui a le label.missing classe, et img magasins wait.gif, l'image de spinner. le index.html et requestProcessor.php les fichiers sont directement sous la formes dossier. Lors de nos tests, nous avons utilisé un serveur Web Apache avec la version 2.2.11 exécutant PHP version 5.3.0. Si vous placez le formes dossier directement sous le DocumentRoot du serveur Web, vous pouvez accéder à l'application via http: // [votre_nom_hôte] / dossier / index.html.
Conclusion
