Bine ați venit în partea a II-a a seriei de tutorial despre crearea unei aplicații web cu chestionar sau sondaj cu jQuery Mobile și Ruby on Rails. În această parte a tutorialului vom crea o interfață web prietenoasă mobilă cu jQuery Mobile, astfel încât sondajul nostru să poată fi realizat cu ușurință pe orice smartphone compatibil HTML5. Acest lucru se poate face foarte usor deoarece jQuery Mobile vine cu template-uri predefinite CSS care arata excelent in browserele mobile, pe langa faptul ca este o biblioteca de javascript excelenta care ajuta dezvoltatorii sa creeze experiente asemanatoare cu aplicatiile pentru site-urile mobile.

Înainte de a începe, am inclus o sarcină rake bonus în cadrul exemplului de cod pentru această parte a tutorialului care generează câteva întrebări. Pentru a rula acest lucru, pur și simplu executați acest lucru în linia de comandă din directorul aplicației Rails:

 rake setup: sondaj

Sursa acestei sarcini este localizată la lib / tasks / setup.rake

Vom începe prin generarea unei acțiuni de spectacol pentru controlorul nostru de întrebări app / controlere / questions_controller.rb.

 def arată @question = Question.find (params [: id]) @choices = @ question.choices final

Acțiunea noastră de spectacol aici este foarte simplă. Încărcăm o întrebare din baza de date prin ID-ul său. Stocăm opțiunile pentru întrebarea într-o variabilă de instanță pentru accesul ulterior în opinia noastră. Veți observa că, din moment ce stabilim o relație has_many între întrebări și alegeri, "automagically" obținem metoda convenabilă de a putea prelua toate opțiunile pentru o întrebare prin apelarea "@ question.choices". Implicit, Rails va încărca punctul nostru de vedere din fișierul show.html.erb pe care îl vom crea ulterior.

Apoi, permiteți crearea acțiunii "răspuns" în cadrul controlorului nostru de întrebări, care va răspunde la întrebarea unui utilizator și îl va păstra în baza de date.

 Definiți răspunsul @choice = Choice.find (: first:: conditions => : id => params [: id]) @answer = Answer.create (: question_id => @ choice.question_id,: choice_id => @choice .id) dacă Question.last == @ choice.question render: action => "multumesc" altceva întrebare = Question.find (: prima:: conditions =>  ) redirect_to question_path (: id => question.id) sfârșitul final

Așa cum am explicat mai devreme când am creat tabelul pentru a stoca răspunsurile, răspunsul este pur și simplu combinația ID-ului unei întrebări și a unui ID de alegere. Deoarece nu avem conceptul de utilizator în acest sistem, pur și simplu vom stoca răspunsuri și vom examina rezultatele en masse mai târziu. Să-l distrugem:

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

În codul de mai sus, găsim alegerea în baza de date prin ID-ul său. Apoi creăm un obiect de răspuns care este compus din question_id și ID-ul obținut de la obiectul de alegere.

 dacă întrebarea === choice.question render: action => "thankyou" altceva întrebare = Question.find (: prima,: conditions => : position => (q.position + 1) redirect_to question_path id => question.id) sfârșit

După ce un utilizator răspunde la o întrebare, avem o decizie care va determina ce trebuie să se arate utilizatorului. Dacă utilizatorul a răspuns la ultima întrebare pe care am stocat-o în baza de date (pe care o putem recupera cu "Question.last"), vom face viziunea noastră "vă mulțumim pentru completarea sondajului". Dacă nu este ultima întrebare, vom găsi întrebarea cu o "poziție" a poziției curente a întrebării plus 1. Apoi vom redirecționa spre acțiunea spectacolului pentru această întrebare cu metoda RESTful helper question_path. Pentru mai multe informații despre crearea controlorilor RESTful rails, faceți o căutare Google pentru "RESTful Rails 3" și citiți câteva dintre articolele pe care le-au postat.

În lumea RESTful, nu există nici un fel de acțiune ca răspuns, așa că trebuie să adăugăm acest lucru în fișierul nostru config / routes.rb.

Pur și simplu înlocuiți această linie:

 resurse: întrebări

cu asta:

 resurse: întrebările nu fac colectare: răspunde sfârșitul final

În prezent, dacă un utilizator atinge adresa URL rădăcină a serverului nostru, va primi o eroare. Pentru a preveni acest lucru vom adăuga această opțiune rădăcină și în fișierul nostru de configurare / routes.rb:

 root: la => "întrebări # index"

Această linie va direcționa cererea URL-ului rădăcină la acțiunea index a controlorului întrebării. Deși nu am definit o acțiune index reală, Rails implicit va încărca fișierul index.html.erb drept vizualizare. Vom crea acest fișier mai târziu.

Acum, când funcționează Rails-ul nostru, vom începe să creăm opiniile care vor face uz de cadrul jQuery Mobile. Vom începe prin crearea unui aspect global pentru șablonul nostru la aplicația / views / layouts / application.html.erb.

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

În secțiunea cap, veți observa că încărcăm două fișiere specifice jQuery Mobile de pe site-ul jQuery: 1 fișier CSS și 1 fișier JS. Acest lucru este bine pentru modul de dezvoltare, dar dacă ar fi să împingem acest lucru în modul de producție, am vrea să aducem aceste fișiere în aplicația noastră local.

În secțiunea corp a șablonului nostru, creăm DIV de nivel înalt care va conține toate funcționalitățile pentru site-ul nostru mobil:

 
 <%= yield %> 

Există câteva lucruri de subliniat în acest DIV. În primul rând, vom folosi unul dintre temele jQuery Mobile pre-definite pentru acest site. Tema pe care am ales-o se numește "Tema B." Prin plasarea atributului data-theme = "b" în DIV-ul nostru de nivel superior, atribuim acel element pentru a moșteni stilurile pentru Tema B. Pentru a vedea toate opțiunile tematice implicite pentru jQuery Mobile, puteți vizita următorul URL: http : //jquerymobile.com/demos/1.0a4.1/#docs/api/themes.html

Elementele de nivel superior ale tuturor aplicațiilor mobile jQuery se numesc "pagini". Pentru a defini o pagină, setăm atributul date-rol = „pagina“ pe un element. În aplicația noastră, vom defini o singură pagină și apoi vom încărca toate paginile următoare prin apelurile Ajax. Cu toate acestea, dacă am avea un site în esență static, am putea defini mai multe elemente din date-rol = „pagina“ dintr-o dată. Am putut apoi crea legături simple care să navigheze aceste "pagini" și să efectueze tranziții frumoase între ele. Pagina principală când browserul încarcă site-ul ar trebui să aibă o stare "activă". În acest caz, deoarece afișăm doar un singur element de pagină, acest lucru nu este atât de important. Cu toate acestea, pentru scopuri ilustrative atribuim clasei "Page-ui-activ" pentru a indica că acest DIV este cel care trebuie afișat atunci când browserul încarcă site-ul.

Următorul pas este acela de a crea vederile noastre. Vom începe cu afișarea noastră index.html.erb:

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

Anatomia unei pagini jQuery Mobile este destul de simplă. Fiecare pagină conține 3 secțiuni principale: antetul, conținutul și subsolul. Fișierele CSS și javascript sunt proiectate astfel încât, cu un cod HTML foarte simplu, puteți crea o experiență dinamică, asemănătoare nativului, în interiorul unui site mobil. Pentru headerul nostru, pur și simplu specificând date-rol = „antet“ atribut, am creat o bară de antet frumos, cu un background de gradient care este specific tematic. Vom trece mai multe opțiuni în acest sens mai târziu.

În secțiunea noastră de conținut, am adăugat un link HTML standard cu ajutorul metodei ajutorului Rails din LINK_TO. Am adăugat date-rol = „buton“ atribut pentru a transforma acea legătură obișnuită într-un buton stilizat. Adresa URL a linkului este o cale către prima întrebare din baza noastră de date definită de al doilea parametru pe care îl transmitem către LINK_TO metodă.

Partea interesantă despre crearea site-urilor cu jQuery Mobile este că încearcă să imite implicit comportamentul aplicațiilor native. În loc de acest link care redirecționează browserul spre o pagină nouă, cum ar fi un site tipic, biblioteca jQuery Mobile îl va transforma într-o legătură Ajax care va trage conținutul de pe server și îl va afișa într-un element "pagină" nou creat. Odată ce este încărcat, se numește o funcție de apel invers care va afișa o animație de tranziție pe noua pagină. Implicit, această nouă pagină va "aluneca" din stânga. Din nou, jQuery Mobile a realizat acest obiectiv, permițând dezvoltatorului să creeze această experiență nativă, fără marcare specială sau funcționalitate avansată de javascript.

În cele din urmă, vom crea un element de subsol date-rol = „subsol“ să îmbrățișăm partea de jos a secțiunii noastre de conținut.

Apoi, vom crea vizualizarea show.html.erb pentru a afișa întrebarea noastră de sondaj către utilizator:

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

Formatul acestei viziuni este aproape identic, după cum puteți vedea. În interiorul elementului nostru de conținut veți observa că avem o etichetă de listă neordonată cu rolul de date al "listview".

Când o listă neordonată este setată la acest rol de date, ea devine un fel de element de navigare cu săgeți drepte în mod implicit. Aceasta este o paradigmă destul de comună în aplicațiile mobile, deoarece poate fi utilizată atât pentru meniurile imbricate, cât și pentru un fel de prezentare de diapozitive, în care fiecare ecran este o carte diferită într-un coș.

În lista noastră neordonată veți observa că elementul de listă are un atribut de date-temă specificat:

Aceasta ilustrează modul în care motorul motoarelor jQuery Mobile ne permite să modificăm orice element și să îi atribuim o nouă temă. În acest caz, combinația elementului-element al temei B, dar a temei C, arată foarte bine.

În interiorul elementului de listă vom folosi metoda ajutorului Rails pentru a crea din nou un link care va răspunde în mod eficient la întrebarea pe care o afișăm. Este interesant de reținut că nu facem niciun apel special Javascript sau Ajax aici cu acest link. Implicit, o etichetă de ancorare simplă va încărca URL-ul specificat în atributul href într-un nou element "pagină" prin intermediul Ajax și apoi va fi afișat utilizatorului.

În cele din urmă, vom crea o viziune care are un mesaj de mulțumire odată ce utilizatorul a finalizat ancheta. Acest fișier este localizat aici: app / views / questions / thankyou.html.erb.

 
 Acasă 
Mulțumesc!
 
 
 
 Vă mulțumim că ați răspuns la sondaj! Să aveți o zi bună! :) 
 

Această viziune este foarte asemănătoare cu celelalte, cu o singură excepție. Linkul din elementul "header" are un atribut rel = "extern" care blochează efectiv jQuery Mobile de la schimbarea link-ului standard într-un încărcător Ajax. Punând rel = "extern" în interiorul unei etichete de ancorare va obliga legătura să se comporte în mod normal și va redirecționa complet browser-ul atunci când se dă clic pe el.

Este posibil să fiți înștiințat în capturile de ecran că, atunci când un utilizator răspunde la o întrebare, acesta este prezentat imediat cu următoarea întrebare. Implicit, jQuery Mobile plasează un buton înapoi în elementul "antet" care îmbrățișează partea stângă a ecranului. jQuery Mobile are o metodă sofisticată de determinare a căii sau a istoricului utilizatorului prin intermediul aplicației. Apăsarea butonului înapoi va muta utilizatorul înapoi la o nouă "pagină" din aplicația încărcată dinamic prin apelul Ajax.

Prin plasarea acestui link în elementul "antet", acesta creează o suprascriere a caracteristicilor interesante. Legăturile care sunt plasate în partea stângă a etichetei de titlu h1 vor înlocui butonul din spate. Deoarece suntem la sfârșitul sondajului pe acest ecran, nu vrem ca utilizatorul să călătorească înapoi prin întrebări din nou. Acest link de domiciliu va redirecționa complet browserul spre pagina de pornire, astfel încât utilizatorul să poată răspunde din nou la întrebările anchetei.

Îi încurajez pe toți să ia o privire la link-ul de demo-uri și documentații de pe site-ul jQuery Mobile pentru informații despre conceptele acoperite aici: jQuery Mobile Documentation

Și acolo avem! Sper că vă bucurați de această serie de tutori despre realizarea unei aplicații web mobile cu Ruby on Rails și jQuery Mobile.