jQuery Mobile开发移动Web应用代码分析：Rails设置篇-jquery mobile移动应用开发实战

[[34725]]

【51CTO译文】jQuery Mobile含有几项直接可以使用的实用特性，用于让我们开发的Web应用程序可以在众多移动设备上运行。在大多数情况下，jQuery Mobile随带的基本模板和CSS主题足以满足需要。然而，由于所有模板是用CSS来创建的，所以我们很容易定制我们网站的外观感觉。

[[34726]]

51CTO提供这个应用CSS原文件的下载地址，大家把应用下载下来对照应用进行分析

开发移动Web应用程序时，jQuery Mobile是一种理想的框架，这有诸多理由，包括如下：

1、由于该框架建立在jQuery上，因而对于在网上用过jQuery的人来说比较容易上手。

2、它目前与许多主要的平台兼容，包括iOS、Android、BlackBerry、Palm WebOS、诺基亚/Symbian和Windows Mobile等。

3、包含的库压缩后大小约为12k;就其提供的功能而言非常轻便。

至于后端，我们会使用随带几个gem的Rails 3，包括Typus。

先不妨创建一个新的rails应用程序：

rails new .

确保你已经安装了***版本的rails gem。如果你在开发的应用程序要求使用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，因为它是截至截稿时***的稳定版Rails。我们还将安装jquery-rails这个gem，覆盖Rails随带的默认的Prototype JavaScript库。由于jQueryMobile显然需要jQuery基本库，因而我们其实没有理由将包含的Prototype库留下来。

至于admin部分，我们会安装Typus gem和acts_as_list。只要稍加配置，Typus就会提供整个后端，用于管理我们为这次调查创建的问题。Acts as list可与Typus无缝地协同运行，让我们很容易控制问题的顺序。

现在我们可以运行捆绑工具(bundler)，安装我们的gem。

bundle install

jQuery gem和Typus gem都有生成器，其作用是实际上让gem自行安装。在app目录下时，可通过运行下列命令来做到这一点：

rails generate jquery:install 
 
rails generate typus

默认情况下，Typus不随带任何一种认证门(authentication gate)。由于这几乎如同长驱直入数据库，我们的***步是应该确保其安全。确保安全的最简单方法就是，添加基本HTTP认证。这显然不是特别安全，但是就我们这个教程而言，已足够安全。为了实现这一步，我们需要往config/initializers/typus.rb文件添加下列几行：

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

当用户访问/admin URL时，这会提示用户输入用户名和密码。

鉴于我们的应用程序已完全设置好，就可以开始生成资源和数据库模式。我们可以使用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

现在数据库中有3个表。一个表存放我们向用户提出的问题。每个问题会有多个选项，每个答案将是一条记录，存储了问题和选项的ID组合。由于选项只属于一个问题，答案表中的question_id字段其实没有必要。我们把它放在这里作为简易的访问器，用于简化查询，比如获取某个问题的答案数量。问题表中的position字段让我们可以指定问题在调查中出现的顺序。

为了给我们的模型添加这些关系，我们将按下列方法来进行改动：

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

你从上面可以看到，我们给该模型添加了acts_as_list插件，那样我们就能改变每一个问题在调查中出现的顺序。

/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

好了!鉴于资源和数据库表已生成，我们需要为Typus创建存放在admin文件夹下的一些控制器。为此，我们运行下列命令：

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

接下来，我们需要更改每一个控制器文件里面的头几行，让控制器从ResourcesController继承过来，而不是从基本ApplicationController继承过来。在Typus中，一旦我们从ResourcesController继承过来，就直接获得了一些强大的CRUD(创建、读取、更新和删除)功能，没必要进一步编写任何代码。下面是必要的替换操作：

/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

差不多完成了!现在我们要为Typus配置文件添加一些配置语句。要是config/typus目录下有其他任何yaml文件，我们可以删除，因为它们没有必要。我们运行生成器语句时，Typus可能会生成示例配置文件。我们不妨创建一个名为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就能为我们创建许多后端功能。首先，我们将指定允许编辑的字段。Field(字段)定义的default(默认)部分将允许我们设定哪些字段会在列表中显示。在本例中，我们允许管理员可以在create和update表单中设定同样这组字段。这在字段定义的form(表单)部分进行了指定。

order_by:

默认情况下，我们的选项将按照创建选项的顺序来排序，所以根本不需要为order_by指定什么。

relationships: question

每个选项属于一个问题，所以我们可以定义问题与选项模型的关系。Typus会自动设计我们的表单，以说明数据记录彼此之间有着怎样的关系。

filters: created_at, question

只要在filter(过滤器)定义中列出字段及/或关系，就可以在typus中定义过滤器。根据字段类型，typus会在后端创建过滤器功能。以created_at为例，这将是指定日期的一组下拉框。至于question，这将是列出存储在数据库中所有问题的下拉框。

search: 
 
application: survey

就这个模型而言，search(搜索)定义对我们没什么用处，因为我们不可能搜索任何选项。不过我们要是在这里指定了字段， typus会提供一个搜索框，那样我们就能按照搜索词语，过滤存储在数据库中的记录。这里的application(应用程序)定义是应用程序的名称，我们称之为“survey”。

***一个清理步骤是，我们删除文件public/index.html，它会阻止我们的默认路由。

现在我们可以开启服务器了：

rails s

用浏览器访问下列URL，即可测试我们新创建的admin：

http://localhost:3000/admin