ROR with AJAX support

ROR with AJAX support

 

 

         Ruby on Rails 和AJAX这两个炙手可热的应用，相信大家都已经不再陌生。前者完全遵循MVC、约定优于配置等思想给开发人员带来了无与伦比的生产率；后者则是RIA(Rich Internet Application)的代表技术之一。

最近笔者就如何在ROR项目当中使用AJAX来增强用户体验，尤其是如何将一些成熟的AJAX框架融入ROR当中，做了一些尝试和总结。下面分别介绍一下Prototype, script.aculo.us,EXT和Streamline在Rails框架中的应用(欢迎和我探讨交流，偶在西安一家软件公司供职。MSN:[email protected])

 

一．    Prototype

prototype.js是由Sam Stephenson写的一个javascript类库,在Rails框架中得到了内在的支持。prototype.js文件默认是在public/javascripts目录下。在Rails应用中使用Prototype的步骤如下：

在rhtml页面中导入prototype.js

<%= javascript_include_tag :defaults %>

或者

<%= javascript_include_tag :prototype%>

要将 Ajax 添加到这个应用程序中，需要以下几个步骤：

1.      配置 Rails 以使用 JavaScript。

2.      更改链接来提交 JavaScript Ajax 请求，而不是仅呈现一个 HTML 链接。

3.      指定要更新的 HTML 片断。

4.      为更新的 HTML 内容准备一个位置。

5.      构建一个控制器方法，或者一个视图来呈现 Ajax 响应。

具体的例子大家可以参考Bruce Tate的跨越边界系列和<<Ajax on Rails>>

二．script.aculo.us

script.aculo.us(http://script.aculo.us)是另一个提供对Rails框架直接支持的javascript类库。它的安装和使用也很简单，从script.aculo.us的下载页面取得以下的几个js文件：prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js 和 controls.js，同样放在public/javascripts目录下。在header中加入

<%= javascript_include_tag : prototype%>

<%= javascript_include_tag : scriptaculous %>

默认情况下，scriptaculous.js会加载该类库所有的特性。如果你在项目中并不需要多余的特性，可以在引用的时候加以限制

<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

这就是说，仅选用builder ，effects ，dragdrop ，controls ，slider 中的两个特性。

     为节省篇幅，举一个简单的UI component通过拖拽排序的简单例子

Rhtml页面：

<ul id="list">

  <% 6.times do |i| -%>

  <li id="item_<%= i+1 %>" class="expand_ticket_box">Number <%= i+1 %></li>

  <% end -%>

</ul>

<p id="list-info"></p>

<%= sortable_element 'list',

      : update => 'list-info', 

      : complete => visual_effect(:highlight, 'list'),

      :url => { :action => "order" } %>

Action：

def order

    @order = params[:list]

    render :partial => 'list'

end

 

_list.rhtml:

Updated order is:<%= @order.join(', ') %>.

 

在实际的应用中，我们可以把6.times 替换成实际的DB数据。

 

图1 排序前

  图2 鼠标拖拽排序

三.EXT

EXT(http://extjs.com)也许是目前功能最强大，最流行的javascript框架。将EXT用于ROR，的确是一件很cool的应用。

本例是一个在可排序的表格中显示上映影片的例子，其中使用了JSON来传递数据到浏览器。

在需要显示的页面页面中，我们除了导入必要的CSS以外，还必需导入prototype.js, scriptaculous.js, effects.js, ext-prototype-adapter.js, and ext-all-debug.js。我们将以上这些必须的js文件放在public/javascripts/ext目录下。

在application.rhtml页面的head中加入如下代码：

<%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>

        <%= javascript_include_tag "ext/adapter/prototype/prototype.js" %>

        <%= javascript_include_tag "ext/adapter/prototype/scriptaculous.js" %>

        <%= javascript_include_tag "ext/adapter/prototype/effects.js" %>

        <%= javascript_include_tag "ext/adapter/prototype/ext-prototype-adapter.js" %>

        <%= javascript_include_tag "ext/ext-all-debug.js" %>

在视图模板list.rhtml中，我们创建一个Div，用来显示将要生成的表格。我们给该Div赋一个id 'movies_grid' 。这个id将会在随后的js代码中使用，以初始化表格信息。

视图模板 (list.rhtml)

 

<%= javascript_include_tag "grid-paging.js" %>

<div id="movies_grid" style="border:5px solid #99bbe8; overflow:hidden; width:650px;"></div>

      

接下来，我们需要编写一些javascript代码来初始化并显示Ext表格。首先创建一个js文件grid-paging.js，在其中持有将在页面显示的数据。通过调用Ext.onReady方法，表格会在页面加载的时候初始化。先创建一个Ext.data.Store对象作为client端的 data store。在这个对象中，再创建一个Ext.data.HttpProxy通知表格从什么地方取得数据。同时，制定一个JsonReader来读取数据。最后，把remoteSort设置为true，以通知store排序会在server端进行，每次当任意一个column header被点击，一个新的数据请求就会被发往server处理。

       在store对象被创建后，接下来需要创建Ext.grid.ColumnMmodel对象以制定如何对表格进行布局处理。之后，设置ColumnModel的属性defaultSortable为true，这样每一次点击任意一个column header后都会进行排序操作。

       最后，我们以之前创建的Store和ColumnModel对象为参数，创建Ext.grid.Grid对象。接下来就是调用Store对象的load方法显示表格。

       其代码如下：

JavaScript Code (grid-paging.js)

 

 

var grid;

var ds;