[[34725]]

【51CTO譯文】jQuery Mobile含有幾項直接可以使用的實用特性，用于讓我們開發(fā)的Web應(yīng)用程序可以在眾多移動設(shè)備上運行。在大多數(shù)情況下，jQuery Mobile隨帶的基本模板和CSS主題足以滿足需要。然而，由于所有模板是用CSS來創(chuàng)建的，所以我們很容易定制我們網(wǎng)站的外觀感覺。

[[34726]]

51CTO提供這個應(yīng)用CSS原文件的下載地址，大家把應(yīng)用下載下來對照應(yīng)用進行分析

開發(fā)移動Web應(yīng)用程序時，jQuery Mobile是一種理想的框架，這有諸多理由，包括如下：

1、由于該框架建立在jQuery上，因而對于在網(wǎng)上用過jQuery的人來說比較容易上手。

2、它目前與許多主要的平臺兼容，包括iOS、Android、BlackBerry、Palm WebOS、諾基亞/Symbian和Windows Mobile等。

3、包含的庫壓縮后大小約為12k;就其提供的功能而言非常輕便。

至于后端，我們會使用隨帶幾個gem的Rails 3，包括Typus。

先不妨創(chuàng)建一個新的rails應(yīng)用程序：

rails new . 

確保你已經(jīng)安裝了***版本的rails gem。如果你在開發(fā)的應(yīng)用程序要求使用Rails 2，建議你了解和安裝RVM(Ruby版本管理器)。這樣可以避免可能由gem版本問題引起的許多頭痛問題。

接下來，我們把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' 

正如你所見，我們將使用Rails 3.0.7，因為它是截至截稿時***的穩(wěn)定版Rails。我們還將安裝jquery-rails這個gem，覆蓋Rails隨帶的默認的Prototype JavaScript庫。由于jQueryMobile顯然需要jQuery基本庫，因而我們其實沒有理由將包含的Prototype庫留下來。

至于admin部分，我們會安裝Typus gem和acts_as_list。只要稍加配置，Typus就會提供整個后端，用于管理我們?yōu)檫@次調(diào)查創(chuàng)建的問題。Acts as list可與Typus無縫地協(xié)同運行，讓我們很容易控制問題的順序。

現(xiàn)在我們可以運行捆綁工具(bundler)，安裝我們的gem。

bundle install 

jQuery gem和Typus gem都有生成器，其作用是實際上讓gem自行安裝。在app目錄下時，可通過運行下列命令來做到這一點：

rails generate jquery:install 
 
rails generate typus 

默認情況下，Typus不隨帶任何一種認證門(authentication gate)。由于這幾乎如同長驅(qū)直入數(shù)據(jù)庫，我們的***步是應(yīng)該確保其安全。確保安全的最簡單方法就是，添加基本HTTP認證。這顯然不是特別安全，但是就我們這個教程而言，已足夠安全。為了實現(xiàn)這一步，我們需要往config/initializers/typus.rb文件添加下列幾行：

config.admin_title = "survey" 
 
config.authentication = :http_basic 
 
config.username = "admin" 
 
config.password = "pass" 

當(dāng)用戶訪問/admin URL時，這會提示用戶輸入用戶名和密碼。

鑒于我們的應(yīng)用程序已完全設(shè)置好，就可以開始生成資源和數(shù)據(jù)庫模式。我們可以使用Rails的簡略方法，即直接從命令行，使用下列命令來做到這一點：

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ù)庫中有3個表。一個表存放我們向用戶提出的問題。每個問題會有多個選項，每個答案將是一條記錄，存儲了問題和選項的ID組合。由于選項只屬于一個問題，答案表中的question_id字段其實沒有必要。我們把它放在這里作為簡易的訪問器，用于簡化查詢，比如獲取某個問題的答案數(shù)量。問題表中的position字段讓我們可以指定問題在調(diào)查中出現(xiàn)的順序。

為了給我們的模型添加這些關(guān)系，我們將按下列方法來進行改動：

/app/models/question.rb 
 
class Question < ActiveRecord::Base 
 
acts_as_list 
 
has_many :choices 
 
end 

你從上面可以看到，我們給該模型添加了acts_as_list插件，那樣我們就能改變每一個問題在調(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ù)庫表已生成，我們需要為Typus創(chuàng)建存放在admin文件夾下的一些控制器。為此，我們運行下列命令：

rails generate controller admin/answers 
 
rails generate controller admin/choices 
 
rails generate controller admin/questions 

接下來，我們需要更改每一個控制器文件里面的頭幾行，讓控制器從ResourcesController繼承過來，而不是從基本ApplicationController繼承過來。在Typus中，一旦我們從ResourcesController繼承過來，就直接獲得了一些強大的CRUD(創(chuàng)建、讀取、更新和刪除)功能，沒必要進一步編寫任何代碼。下面是必要的替換操作：

/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)在我們要為Typus配置文件添加一些配置語句。要是config/typus目錄下有其他任何yaml文件，我們可以刪除，因為它們沒有必要。我們運行生成器語句時，Typus可能會生成示例配置文件。我們不妨創(chuàng)建一個名為typus.yml的文件，位于config/typus目錄下。

首先，我們添加Choice模型的配置語句：

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 

不妨逐一解釋：

Choice: 
 
fields: 
 
default: choice, question_id, question 
 
form: choice, question_id, question 

通過短短幾行配置，Typus就能為我們創(chuàng)建許多后端功能。首先，我們將指定允許編輯的字段。Field(字段)定義的default(默認)部分將允許我們設(shè)定哪些字段會在列表中顯示。在本例中，我們允許管理員可以在create和update表單中設(shè)定同樣這組字段。這在字段定義的form(表單)部分進行了指定。

order_by: 

默認情況下，我們的選項將按照創(chuàng)建選項的順序來排序，所以根本不需要為order_by指定什么。

relationships: question 

每個選項屬于一個問題，所以我們可以定義問題與選項模型的關(guān)系。Typus會自動設(shè)計我們的表單，以說明數(shù)據(jù)記錄彼此之間有著怎樣的關(guān)系。

filters: created_at, question 

只要在filter(過濾器)定義中列出字段及/或關(guān)系，就可以在typus中定義過濾器。根據(jù)字段類型，typus會在后端創(chuàng)建過濾器功能。以created_at為例，這將是指定日期的一組下拉框。至于question，這將是列出存儲在數(shù)據(jù)庫中所有問題的下拉框。

search: 
 
application: survey 

就這個模型而言，search(搜索)定義對我們沒什么用處，因為我們不可能搜索任何選項。不過我們要是在這里指定了字段， typus會提供一個搜索框，那樣我們就能按照搜索詞語，過濾存儲在數(shù)據(jù)庫中的記錄。這里的application(應(yīng)用程序)定義是應(yīng)用程序的名稱，我們稱之為“survey”。

***一個清理步驟是，我們刪除文件public/index.html，它會阻止我們的默認路由。

現(xiàn)在我們可以開啟服務(wù)器了：

rails s 

用瀏覽器訪問下列URL，即可測試我們新創(chuàng)建的admin：

http://localhost:3000/admin