Bienvenue dans la partie II de la série de didacticiels sur la création d’une application Web de questionnaire ou de sondage avec jQuery Mobile et Ruby on Rails. Dans cette partie du didacticiel, nous allons créer une interface Web conviviale pour mobile avec jQuery Mobile afin que notre enquête puisse être réalisée facilement sur tout smartphone compatible HTML5. Cela peut être fait très facilement car jQuery Mobile est livré avec des modèles CSS prédéfinis qui ont fière allure dans les navigateurs mobiles et constituent une excellente bibliothèque javascript qui aide les développeurs à créer des expériences similaires à celles des applications pour les sites Web mobiles..

Avant de commencer, j'ai inclus une tâche de rake en bonus dans l'exemple de code de cette partie du didacticiel, qui génère des exemples de questions. Pour l'exécuter, exécutez-le simplement dans la ligne de commande du répertoire de l'application Rails:

 configuration du rake: enquête

La source de cette tâche est située dans lib / tasks / setup.rake.

Nous allons commencer par générer une action show pour notre contrôleur de questions dans app / controllers / questions_controller.rb.

 def show @question = Question.find (params [: id]) @choices = @ question.choices fin

Notre action de spectacle ici est très simple. Nous chargeons une question de la base de données par son ID. Nous stockons les choix pour la question dans une variable d'instance pour un accès ultérieur à notre avis. Vous remarquerez que depuis que nous établissons une relation has_many entre les questions et les choix, nous obtenons "automatiquement" la méthode pratique permettant de récupérer tous les choix d'une question en appelant "@ question.choices". Par défaut, Rails chargera notre vue à partir du fichier show.html.erb que nous créerons plus tard..

Ensuite, créons l'action "réponse" dans notre contrôleur de questions qui prendra la réponse d'un utilisateur à une question et la stockera dans la base de données..

 def answer @choice = Choice.find (: first,: conditions => : id => params [: id]) @answer = Answer.create (: question_id => @ choice.question_id,: choice_id => @choice .id) if Question.last == @ choice.question render: action => "thankyou" sinon question = Question.find (: first,: conditions => : position => (@ choice.question.position + 1) ) redirect_to question_path (: id => question.id) end end

Comme nous l'avons expliqué précédemment lorsque nous avons créé la table pour stocker les réponses, une réponse est simplement la combinaison de l'ID d'une question et d'un ID de choix. Comme nous n'avons pas le concept d'utilisateur dans ce système, nous allons simplement stocker les réponses et regarder les résultats. en masse plus tard. Décomposons:

 @choice = Choice.find (: first,: conditions => : id => params [: id]) @answer = Answer.create (: question_id => @ choice.question_id,: choice_id => @ choice.id )

Dans le code ci-dessus, nous trouvons le choix dans la base de données par son identifiant. Nous créons ensuite un objet de réponse composé des éléments suivants: question_id et l'ID que nous obtenons de l'objet de choix.

 si Question.last == @ choice.question render: action => "thankyou" else question = Question.find (: first,: conditions => : position => (q.position + 1)) redirect_to question_path (: id => question.id) end

Une fois qu'un utilisateur a répondu à une question, nous avons une décision qui déterminera ce qu’il peut lui montrer. Si l'utilisateur a répondu à la dernière question que nous avons stockée dans la base de données (que nous pouvons récupérer avec "Question.last"), nous allons rendre notre vue "Merci d'avoir rempli le sondage". Si ce n'est pas la dernière question, nous allons trouver la question avec une "position" de la position de la question actuelle plus 1. Ensuite, nous allons passer à l'action show de cette question avec la méthode RESTful rails helper de question_path. Pour plus d'informations sur la création de contrôleurs de rails RESTful, lancez une recherche google pour "RESTful Rails 3" et lisez certains des articles que les internautes ont publiés..

Dans le monde RESTful, l'action de réponse n'existe pas, nous devons donc l'ajouter à notre fichier config / routes.rb.

Remplacez simplement cette ligne:

 ressources: questions

avec ça:

 ressources: la collection obtient-elle des questions: réponse fin fin

Actuellement, si un utilisateur frappe l'URL racine de notre serveur, il recevra une erreur. Pour éviter cela, nous allons également ajouter cette option root à notre fichier config / routes.rb:

 root: to => "questions # index"

Cette ligne dirigera la demande de l'URL racine vers l'action d'index du contrôleur de la question. Bien que nous n’ayons pas défini d’action d’indexage réelle, Rails charge par défaut le fichier index.html.erb en tant que vue. Nous allons créer ce fichier plus tard.

Maintenant que notre travail Rails est terminé, nous allons commencer à créer les vues qui utiliseront le framework jQuery Mobile. Nous allons commencer par créer une mise en page globale pour notre modèle à app / views / layouts / application.html.erb.

         <%= csrf_meta_tag %>   
 <%= yield %> 
  

Dans la section head, vous remarquerez que nous chargeons 2 fichiers spécifiques à jQuery Mobile à partir du site jQuery: 1 fichier CSS et 1 fichier JS. C'est bien pour le mode de développement, mais si nous devions mettre cela en mode de production, nous voudrions importer ces fichiers localement dans notre application..

Dans la section body de notre modèle, nous créons notre DIV de niveau supérieur qui contiendra toutes les fonctionnalités de notre site mobile:

 
 <%= yield %> 

Il y a quelques choses à souligner dans cette DIV. Premièrement, nous allons utiliser l’un des thèmes prédéfinis de jQuery Mobile pour ce site. Le thème que nous avons choisi s'appelle "Thème B." En plaçant l'attribut data-theme = "b" dans notre DIV de niveau supérieur, nous attribuons à cet élément l'héritage des styles du thème B. Pour voir toutes les options de thème par défaut de jQuery Mobile, vous pouvez visiter l'URL suivante: http : //jquerymobile.com/demos/1.0a4.1/#docs/api/themes.html

Les éléments de niveau supérieur de toutes les applications jQuery Mobile sont appelés "pages". Pour définir une page, nous définissons l'attribut data-role = "page" sur un élément. Dans notre application, nous allons définir une seule page, puis charger toutes les pages suivantes via des appels Ajax. Cependant, si nous avions un site essentiellement statique, nous pourrions définir plusieurs éléments de data-role = "page" tout à la fois. Nous pourrions ensuite créer des liens simples qui navigueraient dans ces "pages" et effectueraient de jolies transitions entre elles. Lorsque le navigateur charge le site, la page principale doit avoir un état "actif". Dans ce cas, étant donné que nous affichons un seul élément de page, ce n'est pas si important. Cependant, à des fins d'illustration, nous attribuons à la classe "ui-page-active" pour indiquer que cette DIV est celle qui doit être affichée lorsque le navigateur charge le site.

La prochaine étape consiste à créer nos vues. Nous allons commencer par notre vue index.html.erb:

 
 
Sondage
 
 
 <%= link_to "Begin Survey", question_path(Question.find(:first)), "data-role"=>"bouton"%> 
 
 
Copyright 2011
 

L'anatomie d'une page jQuery Mobile est plutôt simple. Chaque page contient 3 sections principales: l'en-tête, le contenu et le pied de page. Les fichiers CSS et javascript sont conçus de telle sorte qu'avec un code HTML très simple, vous puissiez créer une expérience dynamique de type natif au sein d'un site Web mobile. Pour notre en-tête, en spécifiant simplement le data-role = "header" attribut, nous avons créé une jolie barre d’en-tête avec un fond dégradé spécifique au thème. Nous irons dans plus d'options plus tard.

Dans notre section de contenu, nous avons ajouté un lien HTML standard avec la méthode d'assistance Rails de lié à. Nous avons ajouté le data-role = "bouton" attribuer à transformer ce lien ordinaire en un bouton stylisé. L’URL du lien est un chemin menant à la première question de notre base de données, définie par le deuxième paramètre que nous passons à la lié à méthode.

La partie intéressante de la création de sites avec jQuery Mobile est qu’il tente d’imiter le comportement des applications natives par défaut. Au lieu de ce lien redirigeant notre navigateur vers une nouvelle page, comme un site Web classique, la bibliothèque jQuery Mobile le convertira en un lien Ajax qui extraira le contenu du serveur et l'affichera dans un élément "page" nouvellement créé. Une fois qu'il est chargé, une fonction de rappel est appelée pour afficher une animation de transition sur la nouvelle page. Par défaut, cette nouvelle page "glisse" à partir de la gauche. Encore une fois, jQuery Mobile a atteint cet objectif en permettant au développeur de créer cette expérience de type natif sans balisage spécial ni fonctionnalité JavaScript avancée..

Enfin, nous allons créer un élément de bas de page de data-role = "footer" embrasser le bas de notre section de contenu.

Ensuite, nous allons créer notre vue show.html.erb pour afficher notre question d'enquête à l'utilisateur:

 
 
Sondage
 
 
 
 
<%= @question.question %>
 
 
 <% @choices.each_with_index do |c, i| %> <% i = i + 1 %> 
 <%= link_to "#i. #c.choice", answer_questions_path(:id => c.id)%> 
 <% end %> 
 
 
 
Copyright 2011
 

Le format de cette vue est presque identique, comme vous pouvez le constater. Dans notre élément "content", vous remarquerez que nous avons une balise de liste non ordonnée avec un rôle de données "listview".

Lorsqu'une liste non ordonnée est définie sur ce rôle data, elle devient une sorte d'élément de navigation avec des flèches droites par défaut. C'est un paradigme assez courant dans les applications mobiles, car il peut être utilisé à la fois pour les menus imbriqués et pour une sorte de diaporama où chaque écran est une carte différente dans une pile..

Dans notre liste non ordonnée, vous remarquerez que l'élément de liste a un attribut de thème de données spécifié:

Ceci illustre comment le moteur de thématisation de jQuery Mobile nous permet de modifier n’importe quel élément et de lui attribuer un nouveau thème. Dans ce cas, le mélange d'éléments-éléments du thème B et de l'élément de liste du thème C est vraiment intéressant.

Dans l'élément de liste, nous utilisons la méthode d'assistance Rails pour créer à nouveau un lien qui répondra effectivement à la question affichée. Il est à nouveau intéressant de noter que nous ne faisons pas ici d'appels spéciaux en Javascript ou en Ajax avec ce lien. Par défaut, une simple balise d'ancrage charge l'URL spécifiée dans l'attribut href dans un nouvel élément "page" via Ajax, puis l'affiche à l'utilisateur..

Enfin, nous allons créer une vue qui contiendra un message de remerciement une fois que l'utilisateur aura répondu au sondage. Ce fichier se trouve ici: app / views / questions / thankyou.html.erb.

 
 Accueil 
Je vous remercie!
 
 
 
 Merci d'avoir répondu à l'enquête! Bonne journée! :) 
 

Cette vue est très similaire aux autres à une exception près. Le lien à l'intérieur de l'élément "header" a un attribut rel = "external" qui empêche effectivement jQuery Mobile de modifier le lien standard en un chargeur Ajax. En mettant rel = "external" dans une balise d'ancrage oblige le lien à se comporter normalement et à rediriger complètement le navigateur lorsque l'utilisateur clique dessus.

Vous remarquerez peut-être dans les captures d'écran que lorsqu'un utilisateur répond à une question, la question suivante lui est immédiatement présentée. Par défaut, jQuery Mobile place un bouton de retour dans l'élément "en-tête" qui épouse la partie gauche de l'écran. jQuery Mobile dispose d'une méthode sophistiquée pour déterminer le chemin ou l'historique d'un utilisateur via l'application. En appuyant sur le bouton Précédent, l'utilisateur sera redirigé vers une nouvelle "page" de l'application chargée dynamiquement via l'appel Ajax..

En plaçant ce lien dans l'élément "header", cela crée un remplacement de fonctionnalité intéressant. Les liens placés à gauche de la balise de titre h1 remplaceront le bouton Précédent. Puisque nous sommes à la fin du sondage sur cet écran, nous ne voulons plus que l'utilisateur revienne en arrière dans les questions. Ce lien d'accueil redirige entièrement le navigateur vers la page de démarrage afin que l'utilisateur puisse à nouveau répondre aux questions de l'enquête..

J'encourage tout le monde à consulter les démonstrations et le lien de la documentation sur le site Web de jQuery Mobile pour obtenir des informations sur les concepts abordés ici: Documentation de jQuery Mobile

Et là nous l'avons! J'espère que vous avez apprécié ce tutoriel sur la création d'une application Web mobile avec Ruby on Rails et jQuery Mobile..