jQuery Mobile開(kāi)發(fā)移動(dòng)Web應(yīng)用代碼分析：Rails設(shè)置篇
原創(chuàng)
【51CTO譯文】jQuery Mobile含有幾項(xiàng)直接可以使用的實(shí)用特性，用于讓我們開(kāi)發(fā)的Web應(yīng)用程序可以在眾多移動(dòng)設(shè)備上運(yùn)行。在大多數(shù)情況下，jQuery Mobile隨帶的基本模板和CSS主題足以滿足需要。然而，由于所有模板是用CSS來(lái)創(chuàng)建的，所以我們很容易定制我們網(wǎng)站的外觀感覺(jué)。
51CTO提供這個(gè)應(yīng)用CSS原文件的下載地址，大家把應(yīng)用下載下來(lái)對(duì)照應(yīng)用進(jìn)行分析
開(kāi)發(fā)移動(dòng)Web應(yīng)用程序時(shí)，jQuery Mobile是一種理想的框架，這有諸多理由，包括如下：
1、由于該框架建立在jQuery上，因而對(duì)于在網(wǎng)上用過(guò)jQuery的人來(lái)說(shuō)比較容易上手。
2、它目前與許多主要的平臺(tái)兼容，包括iOS、Android、BlackBerry、Palm WebOS、諾基亞/Symbian和Windows Mobile等。
3、包含的庫(kù)壓縮后大小約為12k;就其提供的功能而言非常輕便。
至于后端，我們會(huì)使用隨帶幾個(gè)gem的Rails 3，包括Typus。
先不妨創(chuàng)建一個(gè)新的rails應(yīng)用程序：
- rails new .
確保你已經(jīng)安裝了***版本的rails gem。如果你在開(kāi)發(fā)的應(yīng)用程序要求使用Rails 2，建議你了解和安裝RVM(Ruby版本管理器)。這樣可以避免可能由gem版本問(wèn)題引起的許多頭痛問(wèn)題。
接下來(lái)，我們把gem添加到我們的Gemfile文件：
- source 'http://rubygems.org'
- gem 'rails', '3.0.7'
- gem 'sqlite3-ruby', :require => 'sqlite3'
- gem 'jquery-rails'
- # Admin
- gem 'typus', :git => 'http://github.com/fesplugas/typus.git'
- gem 'acts_as_list'
正如你所見(jiàn)，我們將使用Rails 3.0.7，因?yàn)樗墙刂两馗鍟r(shí)***的穩(wěn)定版Rails。我們還將安裝jquery-rails這個(gè)gem，覆蓋Rails隨帶的默認(rèn)的Prototype JavaScript庫(kù)。由于jQueryMobile顯然需要jQuery基本庫(kù)，因而我們其實(shí)沒(méi)有理由將包含的Prototype庫(kù)留下來(lái)。
至于admin部分，我們會(huì)安裝Typus gem和acts_as_list。只要稍加配置，Typus就會(huì)提供整個(gè)后端，用于管理我們?yōu)檫@次調(diào)查創(chuàng)建的問(wèn)題。Acts as list可與Typus無(wú)縫地協(xié)同運(yùn)行，讓我們很容易控制問(wèn)題的順序。
現(xiàn)在我們可以運(yùn)行捆綁工具(bundler)，安裝我們的gem。
- bundle install
jQuery gem和Typus gem都有生成器，其作用是實(shí)際上讓gem自行安裝。在app目錄下時(shí)，可通過(guò)運(yùn)行下列命令來(lái)做到這一點(diǎn)：
- rails generate jquery:install
- rails generate typus
默認(rèn)情況下，Typus不隨帶任何一種認(rèn)證門(mén)(authentication gate)。由于這幾乎如同長(zhǎng)驅(qū)直入數(shù)據(jù)庫(kù)，我們的***步是應(yīng)該確保其安全。確保安全的最簡(jiǎn)單方法就是，添加基本HTTP認(rèn)證。這顯然不是特別安全，但是就我們這個(gè)教程而言，已足夠安全。為了實(shí)現(xiàn)這一步，我們需要往config/initializers/typus.rb文件添加下列幾行：
- config.admin_title = "survey"
- config.authentication = :http_basic
- config.username = "admin"
- config.password = "pass"
當(dāng)用戶訪問(wèn)/admin URL時(shí)，這會(huì)提示用戶輸入用戶名和密碼。
鑒于我們的應(yīng)用程序已完全設(shè)置好，就可以開(kāi)始生成資源和數(shù)據(jù)庫(kù)模式。我們可以使用Rails的簡(jiǎn)略方法，即直接從命令行，使用下列命令來(lái)做到這一點(diǎn)：
- rails generate resource question question:string position:integer
- rails generate resource choice choice:string question_id:integer
- rails generate resource answer question_id:integer choice_id:integer
- rake db:migrate
現(xiàn)在數(shù)據(jù)庫(kù)中有3個(gè)表。一個(gè)表存放我們向用戶提出的問(wèn)題。每個(gè)問(wèn)題會(huì)有多個(gè)選項(xiàng)，每個(gè)答案將是一條記錄，存儲(chǔ)了問(wèn)題和選項(xiàng)的ID組合。由于選項(xiàng)只屬于一個(gè)問(wèn)題，答案表中的question_id字段其實(shí)沒(méi)有必要。我們把它放在這里作為簡(jiǎn)易的訪問(wèn)器，用于簡(jiǎn)化查詢，比如獲取某個(gè)問(wèn)題的答案數(shù)量。問(wèn)題表中的position字段讓我們可以指定問(wèn)題在調(diào)查中出現(xiàn)的順序。
為了給我們的模型添加這些關(guān)系，我們將按下列方法來(lái)進(jìn)行改動(dòng)：
- /app/models/question.rb
- class Question < ActiveRecord::Base
- acts_as_list
- has_many :choices
- end
你從上面可以看到，我們給該模型添加了acts_as_list插件，那樣我們就能改變每一個(gè)問(wèn)題在調(diào)查中出現(xiàn)的順序。
- /app/models/choice.rb
- class Choice < ActiveRecord::Base
- belongs_to :question
- end
- /app/models/answer.rb
- class Answer < ActiveRecord::Base
- belongs_to :question
- belongs_to :choice
- end
好了!鑒于資源和數(shù)據(jù)庫(kù)表已生成，我們需要為T(mén)ypus創(chuàng)建存放在admin文件夾下的一些控制器。為此，我們運(yùn)行下列命令：
- rails generate controller admin/answers
- rails generate controller admin/choices
- rails generate controller admin/questions
接下來(lái)，我們需要更改每一個(gè)控制器文件里面的頭幾行，讓控制器從ResourcesController繼承過(guò)來(lái)，而不是從基本ApplicationController繼承過(guò)來(lái)。在Typus中，一旦我們從ResourcesController繼承過(guò)來(lái)，就直接獲得了一些強(qiáng)大的CRUD(創(chuàng)建、讀取、更新和刪除)功能，沒(méi)必要進(jìn)一步編寫(xiě)任何代碼。下面是必要的替換操作：
- /app/controllers/admin/answers_controller.rb
- replace:
- class Admin::AnswersController < ApplicationController
- with:
- class Admin::AnswersController < Admin::ResourcesController
- /app/controllers/admin/choices_controller.rb
- replace:
- class Admin::ChoicesController < ApplicationController
- with:
- class Admin::ChoicesController < Admin::ResourcesController
- /app/controllers/admin/questions_controller.rb
- replace:
- class Admin::QuestionsController < ApplicationController
- with:
- class Admin::QuestionsController < Admin::ResourcesController
差不多完成了!現(xiàn)在我們要為T(mén)ypus配置文件添加一些配置語(yǔ)句。要是config/typus目錄下有其他任何yaml文件，我們可以刪除，因?yàn)樗鼈儧](méi)有必要。我們運(yùn)行生成器語(yǔ)句時(shí)，Typus可能會(huì)生成示例配置文件。我們不妨創(chuàng)建一個(gè)名為typus.yml的文件，位于config/typus目錄下。
首先，我們添加Choice模型的配置語(yǔ)句：
- Choice:
- fields:
- default: choice, question_id, question
- form: choice, question_id, question
- order_by:
- relationships: question
- filters: created_at, question
- search:
- application: survey
- Question:
- fields:
- default: question, position
- form: question
- order_by: position
- relationships: choices
- filters: created_at
- search: question
- application: survey
不妨逐一解釋?zhuān)?/p>
- Choice:
- fields:
- default: choice, question_id, question
- form: choice, question_id, question
通過(guò)短短幾行配置，Typus就能為我們創(chuàng)建許多后端功能。首先，我們將指定允許編輯的字段。Field(字段)定義的default(默認(rèn))部分將允許我們?cè)O(shè)定哪些字段會(huì)在列表中顯示。在本例中，我們?cè)试S管理員可以在create和update表單中設(shè)定同樣這組字段。這在字段定義的form(表單)部分進(jìn)行了指定。
- order_by:
默認(rèn)情況下，我們的選項(xiàng)將按照創(chuàng)建選項(xiàng)的順序來(lái)排序，所以根本不需要為order_by指定什么。
- relationships: question
每個(gè)選項(xiàng)屬于一個(gè)問(wèn)題，所以我們可以定義問(wèn)題與選項(xiàng)模型的關(guān)系。Typus會(huì)自動(dòng)設(shè)計(jì)我們的表單，以說(shuō)明數(shù)據(jù)記錄彼此之間有著怎樣的關(guān)系。
- filters: created_at, question
只要在filter(過(guò)濾器)定義中列出字段及/或關(guān)系，就可以在typus中定義過(guò)濾器。根據(jù)字段類(lèi)型，typus會(huì)在后端創(chuàng)建過(guò)濾器功能。以created_at為例，這將是指定日期的一組下拉框。至于question，這將是列出存儲(chǔ)在數(shù)據(jù)庫(kù)中所有問(wèn)題的下拉框。
- search:
- application: survey
就這個(gè)模型而言，search(搜索)定義對(duì)我們沒(méi)什么用處，因?yàn)槲覀儾豢赡芩阉魅魏芜x項(xiàng)。不過(guò)我們要是在這里指定了字段， typus會(huì)提供一個(gè)搜索框，那樣我們就能按照搜索詞語(yǔ)，過(guò)濾存儲(chǔ)在數(shù)據(jù)庫(kù)中的記錄。這里的application(應(yīng)用程序)定義是應(yīng)用程序的名稱(chēng)，我們稱(chēng)之為“survey”。
***一個(gè)清理步驟是，我們刪除文件public/index.html，它會(huì)阻止我們的默認(rèn)路由。
現(xiàn)在我們可以開(kāi)啟服務(wù)器了：
- rails s
用瀏覽器訪問(wèn)下列URL，即可測(cè)試我們新創(chuàng)建的admin：
- http://localhost:3000/admin
