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

本文是使用jQuery Mobile和Rails开发一款问卷或调查应用程序的教程系列的第一个部分。该系列将介绍如何开发一款与移动设备兼容的Web应用程序，好让用户以一种类似向导的方式回答一系列问题。

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

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

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

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

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

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

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

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

railsnew.

确保你已经安装了***版本的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。

bundleinstall

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

railsgeneratejquery:install
railsgeneratetypus

默认情况下，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的简略方法，即直接从命令行，使用下列命令来做到这一点：

railsgenerateresourcequestionquestion:stringposition:integer
railsgenerateresourcechoicechoice:stringquestion_id:integer
railsgenerateresourceanswerquestion_id:integerchoice_id:integer
rakedb:migrate

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

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

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

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

/app/models/choice.rb
classChoice<ActiveRecord::Base
belongs_to:question
end
/app/models/answer.rb
classAnswer<ActiveRecord::Base
belongs_to:question
belongs_to:choice
end

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

railsgeneratecontrolleradmin/answers
railsgeneratecontrolleradmin/choices
railsgeneratecontrolleradmin/questions

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

/app/controllers/admin/answers_controller.rb
replace:
classAdmin::AnswersController<ApplicationController
with:
classAdmin::AnswersController<Admin::ResourcesController
/app/controllers/admin/choices_controller.rb
replace:
classAdmin::ChoicesController<ApplicationController
with:
classAdmin::ChoicesController<Admin::ResourcesController
/app/controllers/admin/questions_controller.rb
replace:
classAdmin::QuestionsController<ApplicationController
with:
classAdmin::QuestionsController<Admin::ResourcesController

差不多完成了!现在我们要为Typus配置文件添加一些配置语句。要是config/typus目录下有其他任何yaml文件，我们可以删除，因为它们没有必要。我们运行生成器语句时，Typus可能会生成示例配置文件。我们不妨创建一个名为typus.yml的文件，位于config/typus目录下。

首先，我们添加Choice模型的配置语句：

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'
0

不妨逐一解释：

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'
1

通过短短几行配置，Typus就能为我们创建许多后端功能。首先，我们将指定允许编辑的字段。Field(字段)定义的default(默认)部分将允许我们设定哪些字段会在列表中显示。在本例中，我们允许管理员可以在create和update表单中设定同样这组字段。这在字段定义的form(表单)部分进行了指定。

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'
2

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

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'
3

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

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'
4

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

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'
5

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

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

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

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'
6

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

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'
7