像专业人员一样开发 Ajax 应用程序,第 2 部分: 使用 Scriptaculous JavaScript 库和 script.aculo.us

您正在构建 Web 应用程序吗?这个应用程序是像 cragislist,还是更像 flickr?如果答案是前者,那么您可以跳过本文了。如果是后者,本文正适合您。在这个包含三部分的系列文章的第 2 部分中,学习如何用 Scriptaculous JavaScript 库增强 Web 应用程序。

Michael Galpin, 软件架构师, eBay

Michael Galpin 从 90 年代末就开始开发 Web 应用程序。他获得了 California Institute of Technology 的数学学位,是加利福尼亚州圣何塞市 eBay 公司的架构师。



2008 年 7 月 28 日

本文是包含三部分的系列文章的第 2 部分,这个系列讨论可以用来创建 Ajax 应用程序的流行的 JavaScript 库。在 第 1 部分 中,学习了如何用 Prototype 库创建一个用来管理歌曲的 Web 应用程序。在本文中,将使用 Scriptaculous 库构建一个用来管理照片的 Web 应用程序。

本文使用的是 Scriptaculous 的最新版本 1.8.1(参见 参考资料 中的链接)。Scriptaculous 使用 Prototype 1.6 库。您必须熟悉 JavaScript、HTML 和 CSS。本文演示 Scriptaculous 在 Ajax 方面的应用。在后端,结合使用 Ruby on Rails 2.0 和 MySQL 5.0.4(参见 参考资料)。只需稍微调整,就可以改用其他后端技术。

developerWorks Ajax 资源中心
查阅 Ajax 资源中心,是一站式站点,包含关于开发 Ajax 应用程序的免费工具、代码和信息。活动 Ajax 社区论坛 由 Ajax 专家 Jack Herrington 主持,您可以在这里向其他开发人员寻求帮助。

Scriptaculous 简介

Scriptaculous JavaScript 库是目前最流行的库之一。它用来在基于 HTML 的 Web 站点中添加丰富的交互功能。它提供了许多视觉效果和行为,帮助开发人员在 Web 应用程序中添加交互功能。Scriptaculous 是在 Prototype 库的基础上构建的。

图 1. Scriptaculous 和 Prototype 的关系
Scriptaculous 和 Prototype 的关系

如果您阅读了第 1 部分,应该已经见过 Prototype 提供的 Ajax 抽象示例。Scriptaculous 并不自行创建相似的功能,而是使用 Prototype 并在其上添加效果和行为。Scriptaculous 提供拖放元素等大量控件。还提供可以与控件结合使用的非常出色的视觉效果。


拖放控件

最有用、视觉上最吸引人的 Scriptaculous 特性之一是拖放。拖放特性在桌面应用程序中非常常见,但是在 Web 应用程序不常见。在 Web 应用程序中添加这种特性可以提供丰富的用户体验。这个任务看起来很困难,但是 Scriptaculous 大大简化了它。为了演示这个特性,我们将构建一个示例应用程序,通过分析它了解使用 Scriptaculous 的好处。

示例应用程序:照片管理器

我们将创建一个用来管理照片的应用程序作为示例应用程序。我们的应用程序允许通过拖放操作在照片集中添加或删除照片。在后端,我们将使用 Ruby on Rails 和 MySQL。Ruby on Rails 实际上默认包含 Scriptaculous 并提供 API,可以在应用程序中自动使用 Scriptaculous。我们并不从 Rails 使用这些特性;我们只使用 Rails 提供数据服务后端。

照片管理器后端

我们不打算花费太多时间讨论后端,对后端的认识只需足以理解前端操作的意义就够了。本文的 下载 部分提供所有代码。首先,我们使用 rails pix 创建一个 Rails 应用程序。接下来,需要按照 Rails 命名约定创建一个称为 pix_development 的数据库。需要修改 config/database.yml 文件,根据这个数据库修改配置参数(主机、名称、密码)。

下一步是最重要的步骤:为应用程序创建 scaffold。在一般情况下,创建 scaffold 仅仅是开发的基础;但是,在这个示例应用程序中,我们将用它创建一个 REST 式的接口,可以使用 Ajax 调用这个接口。命令如下:ruby script/generate scaffold photo thumb :string caption :string inSet :boolean。这会创建一个模型,其中包含一个 thumb 字段(用于缩略图)、一个 caption 和一个 Boolean(表示照片是否在照片集中)。注意,命令 rake db:migrate 将在数据库中创建我们需要的表。scaffold 生成命令还为应用程序创建一个控制器。我们需要修改这个控制器,为 Rails 自动创建的 REST 式服务提供 JSON 版本。修改后的控制器见清单 1:

清单 1. 照片 Web 控制器
class PhotosController < ApplicationController
  # GET /photos
  # GET /photos.xml
  protect_from_forgery :only => [:create]
  def index
    @photos = Photo.find(:all)

    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :xml => @photos }
      format.json { render :json => @photos }
    end
  end

  # GET /photos/1
  # GET /photos/1.xml
  def show
    @photo = Photo.find(params[:id])

    respond_to do |format|
      format.html # show.html.erb
      format.xml  { render :xml => @photo }
      format.json { render :json => @photo }
    end
  end

  # GET /photos/new
  # GET /photos/new.xml
  def new
    @photo = Photo.new

    respond_to do |format|
      format.html # new.html.erb
      format.xml  { render :xml => @photo }
      format.json  { render :json => @photo }
    end
  end

  # GET /photos/1/edit
  def edit
    @photo = Photo.find(params[:id])
  end

  # POST /photos
  # POST /photos.xml
  def create
    @photo = Photo.new(params[:photo])

    respond_to do |format|
      if @photo.save
        flash[:notice] = 'Photo was successfully created.'
        format.html { redirect_to(@photo) }
        format.xml  { render :xml => @photo, :status => :created, 
		                                       :location => @photo }
        format.json  { render :json => @photo, :status => :created, 
		                                       :location => @photo }
      else
        format.html { render :action => "new" }
        format.xml  { render :xml => @photo.errors, :status => 
		                                        :unprocessable_entity }
        format.json  { render :json => @photo.errors, :status => 
		                                        :unprocessable_entity }
      end
    end
  end

  # PUT /photos/1
  # PUT /photos/1.xml
  def update
    @photo = Photo.find(params[:id])

    respond_to do |format|
      if @photo.update_attributes(params[:photo])
        flash[:notice] = 'Photo was successfully updated.'
        format.html { redirect_to(@photo) }
        format.xml  { head :ok }
        format.json  { head :ok }
      else
        format.html { render :action => "edit" }
        format.xml  { render :xml => @photo.errors, :status => 
		                                       :unprocessable_entity }
        format.json  { render :json => @photo.errors, :status => 
		                                       :unprocessable_entity }
      end
    end
  end

  # DELETE /photos/1
  # DELETE /photos/1.xml
  def destroy
    @photo = Photo.find(params[:id])
    @photo.destroy

    respond_to do |format|
      format.html { redirect_to(photos_url) }
      format.xml  { head :ok }
      format.json  { head :ok }
    end
  end
end

请注意这里的几个元素。首先,protect_from_forgery 命令允许以 Web 服务的形式访问所有操作,但是创建操作除外。接下来,注意 respond_to do |format| 块,我们在其中添加了 format.json { render :json ... }。这会用 RoR 内置的 JSON 支持响应以 .json 结尾的 URL。所以,/photos.json 将用序列化为 JSON 的数据调用索引方法。正如在本系列的 第一篇文章 中看到的,这是一种向 Prototype 传递数据的非常方便的方法。我们已经看到了后端上的数据形式以及提供数据的方式。现在看看前端以及如何在前端使用 Scriptaculous。

照片管理器前端

为了理解前端,我们来看看代码并研究它的工作方式。这个前端是一个简单的 HTML 页面,见清单 2:

清单 2. organize.html Web 页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Photo Organizer</title>
     <script type="text/javascript" src="javascripts/prototype.js"></script>
     <script type="text/javascript" src="javascripts/effects.js"></script>
     <script type="text/javascript" src="javascripts/dragdrop.js"></script>
     <script type="text/javascript" src="javascripts/builder.js"></script>
     <script type="text/javascript" src="javascripts/organizer.js"></script>
     <script type="text/javascript" src="javascripts/organize_page.js"></script>
     <link rel="stylesheet" href="stylesheets/organizer.css"/>
</head>
<body onLoad="initPage()">
     <div id="pageTitle">Organize Your Photos</div>
     <div id="allPics">
          <span id="setPics"></span>
          <span id="availablePics"></span>
     </div>
          <div id="trash">&nbsp;</div>     
</body>
</html>

这看起来非常简单,对吗?注意,我们装载了几个 JavaScript 文件。因为 Scriptaculous 要使用 Prototype(我们自己也要使用它),所以必须装载 prototype.js。然后,使用属于 Scriptaculous 的三个库:effects.js、dragdrop.js 和 builder.js。Scriptaculous 是模块化的,所以可以只使用需要的特性。但是,dragdrop.js 依赖于 effects.js,所以只要使用拖放特性,就必须同时包含这两个文件。当然,在这两个 JavaScript 文件中,我们最感兴趣的代码是与这个应用程序相关的代码。当装载页面时,它调用 organize_page.js 中的 initPage 函数,见清单 3:

清单 3. 页面初始化 JavaScript
// the mode for the page
var model = {};

// page initialization
function initPage(){
     var options = {
          method : "get",
          onSuccess : initUi
     }
     new Ajax.Request("photos.json",options);
}
function initUi(xhr){
     model = new Organizer(xhr.responseJSON);
     var list = Builder.node("span", {id: "inList"});
     var list2 = Builder.node("span", {id: "outList"});
     var pix = model.pixList;
     for (var i=0; i < pix.length; i++){
          var pic = buildPicUi(pix[i]);
          if (pix[i].inSet){
               list.appendChild(pic);
          } else {
               list2.appendChild(pic);
          }
     }
     $("setPics").appendChild(list);
     $("availablePics").appendChild(list2);
     // setup drag-and-drop
     makeDraggables();
     initDropZones();
}

如果您以前使用过 Prototype,应该很熟悉第一个函数 initPage 了。它仅仅向服务器请求一个 JSON 形式的照片列表。它把 initUi 函数设置为回调函数,这个函数处理服务器返回的响应。下面看看这个函数。

initUi 函数获取服务器返回的数据,并创建一个 Organizer 对象。这个对象包含在一个单独的 JavaScript 文件中,作为应用程序的模型。您可以看看它的代码(见本文的 源代码)。目前,我们主要关注 UI 组件。我们为两组照片动态地创建视觉组件:照片集中的一组照片,照片集之外的一组照片。我们使用 Scriptaculous 的 Builder 库动态地为它们创建 DOM 元素。接下来,循环遍历模型中的照片,使用 buildPicUi 函数为它们创建视觉表示。这个函数见清单 4:

清单 4. buildPicUiJavaScript 函数
function buildPicUi(pic){
     var picId = "pic" + pic.id;
     var img = Builder.node("img", {src : "images/"+pic.thumb, alt: pic.caption});
     var picNode =  Builder.node("div",{id : picId, class: "pic"},img);
     return picNode;
}

再次使用 Builder 库创建 DOM 元素。在这里,我们在一个 div 中创建一个图像(img 标记)。现在,如果再看看 initUi 函数,会看到对另外两个函数的调用:makeDraggablesinitDropZones。这些函数见清单 5:

清单 5. 启用拖放
function makeDraggables(){
     for (var picId in model.pixMap){
          new Draggable(picId, {revert:true});
     }
}
function initDropZones(){
     Droppables.add("setPics",{onDrop: addToSet, accept: "pic"});
     Droppables.add("availablePics",{onDrop: removeFromSet, accept: "pic"});
     Droppables.add("trash",{onDrop: addToTrash, accept: "pic"});
}

这两个函数在应用程序中启用所有拖放功能。makeDraggables 函数循环遍历所有照片并为每张照片创建一个 Draggable 对象。这个函数只需要照片的 DOM ID(见清单 4 中的 buildPicUi 函数)和选项。在这里,惟一的选项是 revert = true。这表示,除非照片位于放置区,否则应该把它放回原来的位置。放置区由 initDropZones 创建。

initDropZones 获取页面上的三个区域:in-list、out-list 和底部的 “垃圾” 区。对于每个区域,它设置一个处理函数(onDrop),当对象被拖放到放置区时,会调用相应的函数。它还设置一个过滤器,用来控制可以拖放到这个区域的对象种类。在这里,所有放置区只接受 “pic” 类的对象。这个类是在清单 4 中的 buildPicUi 函数中为每个照片设置的。因此,只能把照片拖放到放置区中,而且照片只能拖放到接受它们的放置区中。每个区有不同的处理函数。我们来看看 adToTrash 处理函数,见清单 6:

清单 6. addToTrash JavaScript 函数
function addToTrash(pic){
     pic.style.left = "";
     pic.style.top = "";
     $("trash").appendChild(pic);          
     Effect.Puff(pic.id, {duration: 0.8});
     model.deletePic(pic.id);
}

这个函数做几件事。首先,它清除在拖动对象时创建的一些 CSS。然后,把这个照片添加到 “垃圾” 区中。注意这里如何使用 Prototype 的 $("trash") 表示法。接下来,使用一种称为 Puff 的 Scriptaculous 效果。这种视觉效果显示照片消失的过程,表示已经删除它。Scriptaculous 把这样的效果称为组合效果:它使用库的核心效果的组合(也可以使用许多其他效果)。最后,通过调用模型(Organizer 对象)发出 Ajax 调用,从数据库中删除这个对象。Organizer 对象见清单 7:

清单 7. Organizer
var Organizer = Class.create({
     initialize : function(pix){
          this.pixMap = {};
          this.pixList = pix;
          pix.each(function(pic){
               this.pixMap["pic"+pic.id] = pic;
          }.bind(this));
     },
     updatePic : function(picId, data){
          var photo = this.pixMap[picId];
          params = [];
          
          // Rails uses _method since browsers
          // do not properly send HTTP PUT and DELETE
          params["_method"] = "put";
          
          // Rails uses className[propertyName] for
          // request parameters to auto-bind them to
          // object properties
          $H(data).each(function(pair){
               params["photo["+pair.key+"]"] = pair.value;
          });
          var options = {
               method : "post",
               parameters : params
          };
          new Ajax.Request("photos/"+photo.id,options);
     },
     deletePic : function(picId){
          var photo = this.pixMap[picId];
          var params = {};
          params["_method"] = "delete";
          var options = {
               method : "post",
               parameters : params
          };
          new Ajax.Request("photos/"+photo.id,options);                    
     }
});

这个类有许多有意思的地方。与 Scriptaculous 一样,它大量使用了 Prototype。它使用 Prototype 创建一个类(Class.create(...))。请看一下 initialize 函数。在创建 Organizer 实例时会调用这个函数。它使用 Prototype 在 JavaScript 数组和对象中添加的 each 函数。在许多编程语言中都有相似的构造,但是在 JavaScript 中没有。在我们的示例中,它与 Prototype 的 bind 函数结合使用。这个函数是 Prototype 在 JavaScript 的 function object 中添加的。它会把当前上下文绑定到这个函数。在这里,在执行 each 函数调用的匿名函数期间,我们希望能够修改 Organizer 的 pixMap 字段。如果不进行绑定,this.pixMap 就没有意义。另外,updatePic 函数使用另一个 Prototype 语法简写方式,即 $H()。这会创建一个 Prototype 散列对象,这个对象在我们的对象中添加 each 函数等。这也是 Prototype 在 JavaScript 中添加的从其他语言借鉴的构造。最后,updatePicdeletePic 使用 Prototype 的 Ajax.Request 函数创建一个跨浏览器兼容的 Ajax 服务器请求。


运行示例

为了运行这个示例,需要启动 Rails:ruby script/server start。现在,可以在浏览器中打开这个示例,见图 2:

图 2. 照片管理器示例
照片管理器示例

在装载这个页面时,可以使用 Firebug 等工具观察异步装载数据的过程,见图 3:

图 3. Firebug 中显示的初始数据装载过程
Firebug 中显示的初始数据装载过程

在把照片从一个列表拖放到另一个列表或屏幕底部的 “垃圾” 区时,应该会看到另一个 Ajax 请求,见图 4:

图 4. 拖放所触发的 Ajax 请求
拖放所触发的 Ajax 请求

现在,我们的 Web 应用程序具备了许多与桌面应用程序相似的功能。它是使用 Scriptaculous 提供的高级控件和效果构建的,并利用 Prototype 简化了 Ajax 开发。


结束语

本文是讨论 JavaScript 库的 包含三部分的系列文章 的第 2 部分。在本文中,我们研究了 Scriptaculous JavaScript 库提供的一些控件和效果。了解 Scriptaculous 是如何在 Prototype 的基础上构建出来的,以及它如何帮助简化 Ajax 开发。我们还看到如何在 Prototype 的 Ajax 中结合使用 Scriptaculous 控件和效果,创建丰富的用户体验。但是,我们只涉及到了 Scriptaculous 的皮毛。Scriptaculous 还有可以在 Web 应用程序中使用的其他控件和效果,值得您花时间进一步研究。


下载

描述名字大小
示例代码wa-aj-ajaxpro2.zip170KB

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=324534
ArticleTitle=像专业人员一样开发 Ajax 应用程序,第 2 部分: 使用 Scriptaculous JavaScript 库和 script.aculo.us
publish-date=07282008