社区应用 最新帖子 精华区 社区服务 会员列表 统计排行 银行
  • 23840阅读
  • 29回复
maninred 离线

级别: 江湖少侠


显示用户信息 

倒序阅读   只看楼主      楼主   发表于: 2007-11-07
更多操作

NetBeans IDE 6.0 Ruby 译文

NetBeans IDE 6.0 Ruby 文档

引用

原文标题:NetBeans IDE 6.0 Ruby Documentation
原文作者:
Sun
原文地址:http://www.netbeans.org/kb/60/ruby/index.html

译者:Ruby中文社区翻译团队
译文首发:http://ruby-lang.org.cn/forums/thread-1896-1-1.html

转载请保留本版权信息,违者必究!



下面题目为中文的文章为完成翻译的文章,而视频演示为官网提供的Flash。


10月 2007

教程和演示


配置环境Ruby环境
使用Ruby编辑器
集成Java和Ruby开发

介绍 Ruby on Rails
使用Ruby on Rails做更多的事
调试和测试
帖子中含有图片或附件,只有在登录后才能查看
maninred 离线

级别: 江湖少侠


显示用户信息 

只看该作者      沙发   发表于: 2007-11-07
Creating a Ruby Weblog in 10 Minutes
10分钟内创建一个RubyWeb日志

引用


原文标题:Creatinga Ruby Weblog in 10 Minutes
原文作者:Brian Leonard
原文地址:http://www.netbeans.org/kb/60/ruby/rapid-ruby-weblog.html

译者:maninred@Ruby中文社区翻译团队
译文首发:http://ruby-lang.org.cn/forums/viewthread.php?tid=1896&page=1&extra=page%3D1#pid7321

转载请保留本版权信息,违者必究!

Contributedby Brian Leonard, maintained by Gail Chappell

October2007 [Revision number: V6.0-5]


在本教程中,在NetBeansIDE中使用Ruby支持,创建和运行一个示例web应用。这个例子演示了如何创建一个RubyWeb日志。跟随这基本的工作流程来创建一个模型类(Model),添加一个控制器(Contriller),还有创建一个视图(View)。

内容:

- 教程的先决条件
-
创建示例数据库
-
创建Rubyon Rails项目
-
配置数据库环境
- 创建模型类
-
迁移数据库
- 创建一个控制器
-
运行应用
- 更进一步:增加字段
-
更进一步:让这个列表的外观看起来像个博客

教程的先决条件


本教程需要以下的技术和资源
    [*]一个数据库服务器

创建示例数据库

注意
:本教程使用MySQL数据库服务器。参阅《安装配置Ruby支持》获得在Ruby应用中使用MySQL数据库服务器的相关信息。但这个文档也包含了有关怎样使用JavaDB数据库服务器的技巧。

在你创建Rubyon Rails项目前,按如下描述创建一个rubyweblog_development数据库。

1.
打开一个命令窗口

2.如果MySQL服务器还未启动,请启动它。

3.键入以下命令创建开发数据库,并按下Enter键mysqladmin -u root -p create rubyweblog_development
注意
:如果root用户没有密码,则省略-p参数。

创建
Rubyon Rails项目

先从创建Rubyon Rails项目开始。使用默认这个应用程序被建立在一个符合Rubyon Rails项目惯例的目录结构中。

1.在NetBeansIDE中,选择File >New Project

2.
在分类区域中选择Ruby,并在项目区域中选择Rubyon Rails应用。点击Next

注意
:当你第一次在IDE中创建Ruby项目时,IDE会检查除绑定的JRuby软件外你是否其它的Ruby安装件。如果有,IDE会出现一个对话框来询问你要用哪个软件。如果你想用已绑定的JRuby解释器,就选择JRuby,或者如果想用你喜欢的Ruby安装件,那就选择你的安装件。想获得更多的信息,请参阅安装与配置的Ruby教程中的《用你自己的Ruby安装件来配置IDE》。

3.
project名字字段键入RubyWebLog。接受所有的默认设置。

4.
点击Finish创建新项目。 IDE使用和你的项目相同的名字创建项目目录。你会看到以下的内容:
    [*]在Project窗口中应用程序的基本种类。特别关注的是ControllersModelsViews结点。在本教程中,你按照基本工作流程,创建模型类,添加一个控制器,还有创建一个视图。
    [*]在Output窗口中会出现一个这个应用程序部分的文件列表。你可以通过点击Output窗口中的一个链接,在编辑区域打开一个文件。
    [*]在编辑区域中的database.yml文件。

配置数据库环境


下一步是编辑database.yml文件,文件中已经配置好了使用MySQL适配器和开发数据库。你不需要做任何配置除非root用户需要密码。
1.
在编辑区域中,在开发数据库配置中以提供该密码的方式编辑database.yml

2.
保存并关闭database.yml文件。

注意:如果你的操作系统的host文件不包含localhost,就用127.0.0.1。也要注意在一些系统中,数据库设置必须使用小写字母。

创建模型类


在这里你使用Rails生成器来为应用程序创建一个模型类。RubyWebLog应用需要一个帖子(Post)模型类来保存博客帖子的实例。

1.Project窗口中,右击Models节点并选择Generate

2.Rails生成器的对话框中,在Arguments栏键入Post并点击OK

Rails生成器创建出一个名叫Post的模型类。Output窗口列出了作为模型类生成的那部分文件:
    [*]app/models/post.rb.一个持有帖子(Post)模型类的方法的文件。这个文件也在编辑区中打开。
    [*]test/unit/post_test.rb.一个检测帖子(Post)模型类的单元测试。
    [*]test/fixtures/posts.yml.一个用来增加模型类测试套件(fixture)。
    [*]db/migrate/migrate/001_create_posts.rb.一个用来定义数据库初始化结构的迁移文件。
迁移数据库

你下一个要处理的文件是迁移文件,001_create_posts.rb。你添加信息来配置数据库

1.Output窗口中,点击001_create_posts.rb文件的链接。打开这个文件,并显示建立一个表名为postsself.up方法,还有删除posts表的 self.down方法。

2.像下面的代码所示,添加title列(用粗体显示的)到self.up方法中的create_table

代码示例
1:001_create_posts.rb的代码
class CreatePosts < ActiveRecord::Migration
def self.up
create_table :posts do |t|
t.column \"title\", :string
end
end

def self.down
drop_table :posts
end
end 3.从主菜单里,选择File> Save All

4.Project窗口中,右击RubyWebLog节点并选择MigrateDatabase > To Current Version
这个动作更新了含有数据库posts表。在Output窗口中显示迁移完成。

创建一个控制器


现在你使用Rails生成器创建一个控制器来和Post模型类交互。在本教程中,你添加脚手架代码,以提供一个可以在博客中创建,读取,更新和删除条目(entries)的简单CRUD界面。

1.Project窗口中,右击Controllers节点并选择Generate

2.Rails生成器对话框中,在Name栏键入BlogViews栏留空白。点击OK

这个动作创建了blog_controller.rb文件,并在编辑区打开文件。在Project窗口中,一个blog_controller.rb节点被添加到Controllers节点

3.通过添加下面的脚手架代码来编辑blog_controller.rb,这个代码提供一个围绕着Post模型类的简单CRUD应用程序。

代码示例
2:blog_controller.rb的代码
class BlogController < ApplicationController
scaffold :post
end

运行这个应用程序


现在测试这个应用程序。

1.Configuration节点下,打开routes.rb文件。找到这行:
# map.connect '', :controller => \"welcome\"
\" 2.通过删除注释符和把Welcome变更成blog,编辑这一行。

3.展开Public节点,右击index.html并选择删除。

index.html显示一个你不想要的默认欢迎页面。通过删除index.htmlRails查找routes.rb找出哪个页面拿来显示,就是在上一步中你为博客设置的。

4.选择File > Save All

5.在工具栏点击运行主项目(RunMain Project)按钮。

这个动作启动WEBrick服务器(属于Rubyon Rails框架的一部分),并在运行web浏览器。下面是应用程序的第一个页面。

1:RubyWebLog 首页
[attachment=393]


6.
在应用程序的第二个页面点击Newpost,显示如下图 2:创建新帖子的页面

[attachment=394]

7.
键入一个题目并点击OKFollowingis a sample blog post.

3:成功创建博客帖子
[attachment=395]


更进一步:添加其它字段

除了Title字段外,为了提供博客的正文,你添加字段使帖子(posts)表包含body栏目。创建一个字段的步骤现在应该比较熟悉了。

1.右击DatabaseMigrati*****节点并选择Generate。在Rails生成器对话框中,在Arguments栏键入AddBoby,并点击OK IDE就建立译文迁移脚本002_add_body.rb,并在编辑区打开。

2.像下面这样修改002_add_body.rb

代码示例 3: 002_add_body.rb 的代码
class AddBody < ActiveRecord::Migration
def self.up
add_column 'posts', 'body', :text
end

def self.down
remove_column 'posts', :body
end
end这个迁移添加一个body字段到posts表,并且如果你想返回这个迁移,就再次移除这个body字段。

3.选择File> Save All。

4.右击RubyWebLog节点并选择MigrateDatabase > To Current Version

5.回到浏览器并点击NewPost链接看看Ruby怎么组织新的boby字段,下面的插图展示了结果。

4:Body字段的新帖子
[attachment=396]

6.
创建多一些博客条目。像例子中:

5:更多博客帖子
[attachment=397]


更进一步:使这个列表看起来更像一个博客


到目前为止,在BlogrControlle中使用的脚手架(scaffold)方法创建了一个能让你简单的测试Post模型类的基本CRUD应用程序。现在,你通过使用脚手架方法生成同样的视图,以便于能自定制用户界面。

1.Projects窗口中,右击Views节点并选择Generate

2.Rails生成器对话框中,从生成(Generate)下拉列表中选择脚手架(scaffold)。

3.ModelName栏键入Post并在ControllerName栏键入BlogActi*****栏留空白。选择Overwrite强制BlogController重新生成,然后点击OK

IDEPost模型类创建了一个视图,并在Output窗口列出了其内容。

4.展开Views> blog,并打开用来显示博客条目列表的list.rhtml。删除和标签并用下面的代码替换它们:

代码示例 4:list.rhtml 的代码
<h1>The Ruby Blog</h1>

<% @posts.each do |post| %>
<h2><%= post.title %></h2>
<p><%= post.body %></p>
<*****all> <%= link_to 'Permalink', :action => 'show', :id => post %></*****all>
<hr>
<% end %>对每一个post动作的实例,如插图6所示,这段代码产生一个题目,正文体和Permalink

5.选择File> Save All然后刷新你的浏览器查看Post模型的新界面。

6:新的改进过的模型类界面
[attachment=398]


6.先显示最近的博客条目,然后通过在list.rhtml中把.reverse添加到@posts后面来倒转排列顺序: <% @posts.reverse.each do |post| %>当你保存文件并刷新你的浏览器,博客如下图所示。

7:反序的博客帖子
[attachment=399]


下几步
    [*]想要继续阅读RubyWebLog教程并且学习更多有关NetBeansRuby on Rails的知识,去看<创建rails模型间的关系>。
    [*]想获得支持或得到有关NetBeansRuby最新特性的通知,请加入Mailing列表。
    [*]要提交你自己的NetBeansRuby教程,访问NetBeansCommunity Docs页面。
maninred 离线

级别: 江湖少侠


显示用户信息 

只看该作者      板凳   发表于: 2007-11-08
Building Relationships Between Rails Models
创建Rails模型类间的关系

引用

原文标题:
Building Relationships Between Rails Models
原文作者:BrianLeonard
原文地址:http://www.netbeans.org/kb/60/ruby/model.html

译者:insight777@Ruby中文社区翻译团队
译文首发:http://ruby-lang.org.cn/forums/viewthread.php?tid=1896&;page=1&extra=page%3D1#pid7328

转载请保留本版权信息,违者必究!

Contributed by Brian Leonard, maintained by Gail Chappell
October 2007 [Revision number: V6.0-2]

这篇教程讲述NetBeans Ruby onRails的项目中怎样在模型间建立(一对一和一对多)关系。

内容:

-
教程的先决条件
-
创建简单的数据库
-
创建评论(comment)模型类
-
迁移数据库
-
定义一种评论(comment)模型类和帖子(post)模型类之间的关系
-
修改控制器脚手架
-
修改视图以显示各种评论
-
显示各种评论(comments)


教程的先决条件

这篇教程需要以下技术和资源:
    [*]数据库服务器

创建简单的数据库

这篇教程是以《10分钟创建Ruby网络日志》为前提的。如果你已经完成那篇教程,你可以把那篇教程完成的项目作为起点并直接进入到下一部分。如果你没阅读那个教程,就下载RubyWeblog.zip文件,并且跟着那些步骤来创建简单的数据库。

注意:本教程使用MySQL数据库服务器。参阅《安装配置Ruby支持》获得在Ruby应用中使用MySQL数据库服务器的相关信息。但这个文档也包含了有关怎样使用JavaDB数据库服务器的技巧。

1.
打开命令行窗口。

2.
如果这时还没有开启MySQL数据库服务器,将它开启。

3.
输入下面的命令来创建开发数据库,然后按回车键。

mysqladmin -u root -p create rubyweblog_development

注意:如果根用户不要求密码,就省略-p这个参数。

4
、在IDE中打开RubyWebLog项目。

注意:当你第一次在IDE中开启或创建Ruby项目时,IDE会检查除已绑定的JRuby软件外你是否还没其它的Ruby安装件。如果有,IDE会出现一个对话框来询问你要用哪个软件。如果你想用已绑定的JRuby解释器,就选择JRuby,或者如果想用你喜欢的Ruby安装件,那就选择你的安装件。想获得更多的信
息,请参阅安装与配置的Ruby教程中的《用你自己的Ruby安装件来配置IDE》。

5
、如果你的数据库要求密码,编辑database.yml文件,并在在development配置下提供password。然后保存这个文件。
为了快速存取这个database.yml文件,可以按快捷键Alt+Shift+O(苹果操作系统用Ctrl+Shift+O),在文件名正文框中输入database.yml,然后按回车键。

6
、右击RubyWebLog节点,并选择MigrateDatabase) > ToCurrent Version
这个动作更新了含有数据库posts表,并加入一个body字段。在Output窗口中显示迁移完成。


创建评论模型类

通过使读者给一个日志帖子(post)添加各种评论(comments),这篇教程增进了RubyWeblog项目。你可以通过建立这个评论模型类来存储读者的各种评论实例来开始。这个项目已经有一个帖子(Post)模型类,用来存储各种博客帖子实例。

1.
在Project窗口,如果RubyWebLog节点没有被展开,就展开它,并右击Model节点,然后选择Generate

2.
在Arguments栏中输入Comment,并点击OK.

这个Rails生成器会生成一个叫Comment的模型类,这个模型类包括以下各文件:
    [*]app/models/comment.rb。一个持有评论(Comment)模型类的方法的文件。这个文件也在编辑区中打开。[*]test/unit/comment_test.rb。.一个检测评论(Comment)模型类的单元测试。[*]test/fixtures/comments.yml。一个用来增加模型类测试套件(fixture)[*]db/migrate/migrate/003_create_comments.rb一个修改数据库结构的迁移文件。这个文件的版本是003,因为这个项目在此之前已经有2个迁移文件了,即001_create_posts.rb002_add_body.rb,他们用来创建和修改posts表。
移数据库
在迁移文件中添加信息,这样读者的每个评论实例除了自动创建的id栏目以外,还有这个帖子的父帖子id,创建的时间和一个文本描述。

1.
在输出窗口中,点击003_create_comments.rb文件的链接,在编辑区中打开这个文件。

2.
self.up方法中,把以下代码(粗体显示)添加到create_table

代码示例1:self.up 方法
class CreateComments < ActiveRecord::Migration
def self.up
create_table :comments do |t|
t.column 'post_id', :integer
t.column 'created_at', :datetime
t.column 'comment', :text
end
end

def self.down
drop_table :comments
end
end

这个迁移建立了一个有4个字段的评论数据库表:id,含有一个整型数(integer),post_id,含有一个整型数(integer);created_at,存储日期和时间;还有comment,含有一个正本描述。

3.选择FileSaveAll

4.
右击RubyWebLog节点,并选择MigrateDatabase > ToCurrentVersion。这动作更新包含评论表数据库。在Output窗口中显示迁移完成。

定义帖子(post)与评论(comment)模型类间的关系

现在这个应用程序中有两个模型:用来创建新日志帖的帖子(post)模型类和向日志贴添加评论的评论(comment)模型类。你要定义两个模型间的关系,这样使一个评论和一个单一的帖子相关联,并且一个贴子可以有多个评论。

1.
展开模型节点,,并打开post.rb

2.
post.rb中添加一下的has_many关联。

代码示例2:has_many post.rb关联
class Post < ActiveRecord::Base
has_many :comments
end

这个has_many方法表示帖子可以和零个,一个或多个的评论记录相关联。

3.
打开Models comment.rb,并且添加belongs_to关联:

代码示例3:belongs_tocomment.rb的关联
class Comment < ActiveRecord::Base
belongs_to :post
end

这个belongs_to方法表示一个评论只可以和一个帖子相关联。默认时,ActiveRecord使用这个post_id把一个评论和那个含有相应post.id的帖子相关联。

修改控制器脚手架

下一步是要修改控制器,blog_controller.rb,它在这个日志帖中为创建,读入,更新和删除日志贴中的实体,生成脚手架或基本的接口。

1.
双击Controllers blog_controller.rb,在编辑区打开blog_controller.rb文件。
这个控制器含有所有的脚手架行为,包括index,list, show, new, create, edit, update, destroy

2.
修改show行为,然后将post_id保存在flash中,如下面的代码所示:

代码样本4:show 行为

def show
@post = Post.find(params[:id])
flash[:post_id] = @post.id
end

这段代码找到与请求传来的id参数相关联的帖子,然后将id存在flash中备用。flashHTTP会话相似,但它只限于一个请求。当你将数据放入这个flash中,它就可以在下个请求中被使用,然后就消失了(因此叫做flash)

3.
将鼠标滚到blog_controller.rb文件的结尾,并在最后面的end语句之前加入下面的post_comment行为:

代码示例5:post_comment 行为

def post_comment
@comment = Comment.new(
\"post_id\" => flash[:post_id],
\"created_at\" => Time.now,
\"comment\" => params[:comment]['comment']
)
if @comment.save
flash[:notice] = 'Comment was successfully added.'
redirect_to :action => 'show', :id => flash[:post_id]
end
end

当用户点击Post按钮提交评论时就调用post_comment行为。这段代码的第一块是从flash中获得post_id(12、等),并且用它找出与这个id相关联的博客帖子。然后代码创建了一个新的评论comment)对象与这个post_id相关联,也就是由创建时间和实际评论(comment)组成。Rails框架把从这个页面提交的各参数作为一个散列(params[:comment])来传递,这个散列来自于该代码取出的评论参数(params[:comment]['comment'])。

Comment是一个ActiveRecord类,所以调用它的save方法将评论的记录保存到数据库中。然后消息放在flash中。该代码调用show行为,这个行为加载show.rhtml页面。这个页面重新加载这个日志和它的所有评论,包括刚刚新加的那个。

修改视图以显示评论(comment)

编辑显示单独的日志项show.rhtml文件。

1.
展开Views blog并打开show.rhtml

2.
show.rhtml的结尾添加下面的代码:

代码示例6: show.rhtml代码
<hr>
<h4>Comments</h4>

<% form_tag :action => 'post_comment' do %>
<p><label for=\"comment_comment\">Comment</label><br/>
<%= text_area 'comment', 'comment' %></p>
<%= submit_tag \"Post\" %>
<%end %>

这段代码生成一个表单(form)),包括用来写评论的文本域和一个标着Post的提交按钮,如图1所示。表单提交时调用post_comment行为。

3
、保存文件然后运行应用程序。如果没有帖子,创建一个新的帖子。

4
、点击Permalink查看博客项的细节。试着在文本域中加入评论,但是记住在你点Post按钮时博客还不能显示评论。

如果你发表成功,会看到视图顶部的消息,如下图所示。在下几步中,你就添加代码来收集并显示评论。

1:没有评论的评论模型视图
[attachment=400]

显示评论(comment)

日志目前还不能显示读者添加的评论,所以你现在要解决这个问题。

1.
blog_controller.rb中找到show行为,并插入下面的post_comments实例变量来收集所有评论:

代码示例7:blog_controller.rb的代码
def show
@post = Post.find(params[:id])
@post_comments = @post.comments.collect
flash[:post_id] = @post.id
end

2.
通过在

Comments

行的后面复制粘贴
    标签来修改show.rhtml

    代码示例8:show.rhtml代码
<ul>
<% for comment in @post_comments %>
<li><%= comment.comment %><br>
<div style=\"color=: #999; font-size: 8pt\">
Posted on <%= comment.created_at.strftime(\"%B %d, %Y at %I:%M %p\") %>
</div>
</li>
<% end %>
</ul>

这段代码为评论设置了格式并将它们显示在带有黑点的列表中,并包括评论发表的日期和时间。

3
、选择File SaveAll,然后刷新浏览器。
评论现在出现在日志的bulleted列表中,如下图所示:

2: 有评论的评论模型的视图
[attachment=401]

下几步
    [*]要提交你自己的NetBeansRuby教程,访问NetBeansCommunity Docs页面。




[ 本帖最后由 maninred 于 2007-11-8 05:29 编辑 ]
maninred 离线

级别: 江湖少侠


显示用户信息 

只看该作者      地板   发表于: 2007-11-08
Using Ajax With Ruby on Rails
与Ruby on Rails一起使用Ajax

引用


原文标题:Using Ajax With Ruby on Rails
原文作者:Brian Leonard
原文地址:http://www.netbeans.org/kb/60/ruby/ajax.html

译者:lgn21st@Ruby中文社区翻译团队
译文首发:http://ruby-lang.org.cn/forums/viewthread.php?tid=1896&;page=1&extra=page%3D1#pid7331

转载请保留本版权信息,违者必究!

Contributedby Brian Leonard, maintained by Gail Chappell
October 2007[Revision number: V6.0-2]


在本教程中,我们将向你演示向NetBeans的Ruby on Rails项目中添加Ajax支持,这个例子显示了如何动态地把评论交到一个WebLog中。

内容:

- 教程的先决条件
- 建立示例数据库
- 建立Partial 模板
- 加入Ajax支持
- 对动态更新添加RJS
- 更进一步:应用可视化效果



教程的先决条件

本教程使用了下列技术和资源:
    [*]数据库服务器。[*]支持Ruby的NetBeans IDE 6.0。

建立示例数据库

本教程基于另外一篇教程《创建Rails模型类间的关系》。如果你已经完成那篇教程,你可以把那篇教程完成的项目作为起点并直接进入到下一部分如果你没阅读那个教程,就下载RubyWebLogModel.zip文件并按照下面步骤建立示例数据库。

注意:本教程使用MySQL数据库服务器。参见《安装配置Ruby支持》中的关于在Ruby应用程序中使用MySQL数据库的内容。文档中也描述怎样使用JavaDB数据库服务器。

1.打开命令行窗口。

2.如果
MySQL
数据库服务器没有事先启动,,那么请启动MySQL数据库服务器它。

3.输入如下命令并按回车
,
建立一个开发数据库,并按回车键。
mysqladmin -u root -p createrubyweblog_development
注意
:
如果root用户不要求密码没有密码输入需求,忽省略-p参数。

4.在IDE中打开RubyWebLog项目。
注意:IDE中第一次创建或打开Ruby项目,IDE会检查除已绑定的JRuby软件外你是否还有其它的Ruby安装件。如果有,IDE会显示一个对话框询问你选择用哪个软件。如果你想用已绑定的JRuby解释器,请选择JRuby,或者如果想用你喜欢的Ruby安装件,那就选择你的安装件。想获得更多的信息,请参阅《安装与配置的Ruby》教程中的用你自己的Ruby安装件来配置IDE

5.如果你的数据库需要密码,编辑 database.yml 文件,并将密码填写在development配置部分。保存文件。
快速访问database.yml 文件:使用快捷键Alt+Shift+O(苹果操作系统用Ctrl+Shift+O),在文件名文本框中输入 database.yml并按回车。

6.右击RubyWebLog节点,选择Migrate Database > To Current Version
这个动作更新数据库使它包含posts表,并加入一个body字段。在移动完成时,Output窗口会有显示。

7.运行这个应用程序。如果没有新的帖子,就建立一个新的帖子。

8.点击Permalink并向这个帖子添加一条评论。
注意:当你提交这个评论时,会重新加载整个页面的。

建立Partial模板

当前RubyWeblog项目中,无论何时读者在页面上添加一条评论,blog条目以及所有评论都会被重新载入这个页面。一个较好的解决方案是利用RubyOnRails框架部分的Ajax支持来动态载入这些评论。为了能够使用Ajax,你需要建立一个partial模板,在这个模版里保存显示这些评论的代码。使用partial模板的好处是可以多次调用这个partial(对于博客的每个评论是一次),而不需要提交博客条目本身。

1.右击 RubyWeblog节点,并选择New > RHTML File。将文件命名为_comments并存储到app\views\blog文件夹中。
IDE创建_comments.rhtml文件,并在编辑区打开文件。注意partial用下划线(_)作为文件名开头,以区别于一个标准模板。
当前显示评论的代码保存在show.rhtml文件中。在下一个步骤中,我们将从show.rhtml中移除这部分代码并粘贴到_comments.rhtmlpartial模板中。

2.去到RubyWebLog > Views > blog文件夹,并打开show.rhtml剪切显示评论部分的代码 (在代码示例1 中显示)。将代码粘贴到 _comments.rhtml文件中并替换掉所有原有的内容。

代码示例1:show.rhtml取出,并粘贴到_comments.rhtml的代码
<ul>
<% for comment in @post_comments %>
<li><%= comment.comment %><br>
<div style=\"color=: #999; font-size: 8pt\">
Posted on <%= comment.created_at.strftime(\"%B %d, %Y at %I:%M %p\") %>
</div>
</li>
<% end %>
</ul>
3.回到 show.rhtml文件并插入下面的
HTML标签,在

Comments

下, 即之前删除代码的位置加入代码,如下所示。
代码示例 2:show.rhtml
标签
<div id=\"comments\">
<%= render(:partial => \"comments\", bject => @post_comments) %>
</div>

这代码创建一个名为评论的
标签。变量@post_comments包含了commentspartial模板显示的那些评论。

4.选择 File > Save All,然后运行应用程序。

5.点击 Permalink并向帖子里添加一条评论。
在这一点,应用程序的表现与它以前做的完全一致。但是,现在你的应用程序已经被设计成可以开始使用Ajax支持了。

加入Ajax支持

Ajax支持加入到你的项目中的第一步是包含JavaScript库,Prototypescript.aculo.us。这两个JavaScript库与RubyOn Rails绑定。Prototype库提供了在Rubyon RailsAjax实现的基础,而script.aculo.us库提供可以添加到你的应用程序的视觉效果。

1.展开 Views > layouts 然后打开 blog.rhtml 文件。

2.在那行含有stylesheet_link_tag的代码下面加入以下这行代码,: <%= javascript_include_tag :defaults %>
这行代码有
Javascript库、Prototypescript.aculo.us,他们与Robyon Rails绑定。 下一个步骤是建立一个form_remote_tag来触发这个Ajax行为。

3.打开show.rhtml文件,删除执行一个HTTP POSTform_tag,并用下面的执行XMLHTTPRequestform_remote_tag替换之。 <% form_remote_tag :url => {:action => \"post_comment\"} do %> 这行代码会行为blog.controller.rb中的 post_comment行为触发这个Ajax行为。在这一点,当一个读者发布一个评论时,整个页面仍会重新加载。通过调用show的行为,post_comment行为会强制这个重新加载。最后一步是编辑blog_controller.rb文件来删除这个调用。

4.展开 Controllers 节点, 然后打开blog_controller.rb 文件。

5.找到 post_comment 行为,然后将 redirect_to 这一行注释掉。# redirect_to :action => 'show', :id => flash[:post_id]

如果你现在运行这个应用程序,并加入一个评论,这个评论不显示出来。你必须在下一步插入RubyJavaScript(RJS)模板来处理XMLHTTPRequest

通过RJS实现动态更新

最后步骤是通过内建的RJS支持来在博客上动态更新评论。

1.在Views节点下,右击blog节点并选择New > Empty RJS Template

2.设置文件名为post_comment,并保存到app\views\blog文件夹。
注意:NetBeans IDE Beta版有一个bug会导致文件直接存储到Views节点。确保报blog加入到这个NewEmpty RJS模版的对话框中,以便在正确的地方建立这个文件。

3.删除存在的page对象,然后将下面的page对象插入到它的位置。
page.replace_html \"comments\", :partial => \"comments\", bject => @post_comments
page[:comment_comment].clear

重新调用含有名为
comments HTML div标签 见代码示例2)show.rhtml文件。在第一行代码中,replace_html使用DHTML来动态替换一部分HTML的代码,这些HTML代码与partil模版_comments.rhtml中的HTML代码一起处于show.rhtmldiv标签之间。@post_comments变量有名为_commentspartial模板中显示的所有评论。第二行代码用于在用户提交评论后清除输入文本框。

如果这个时候你运行应用程序,评论仍然不显示出来,因为@post_comments的值为空。如果你再观察blog_controller.rb文件,你会发现@post_comments被设置在你不再调用的show行为中。所以你现在必须编辑blog_controller.rb文件。

4.打开blog_controller.rb文件,然后在那个你在post_comment行为中早先注释掉的redirect之后添加下面三行代码:

代码示例 3: blog_controller.rb 文件的更新
#redirect_to :action => 'show', :id => flash[:post_id]
@post = Post.find(flash[:post_id])
@post_comments = @post.comments.collect
flash[:post_id] = @post.id #Store the post.id back in the flash


第一行代码调用一个类似于HTTPsessionflash,但可以跨单个请求(request)。当你将一个条目放入flash时这个条目在下一个请求中被使用,然后就消失了(因此叫做flash)。这段代码从flash中获得post_id(12,等,并且用它找出与这个id相关联的日志帖。

第二行代把那个帖子的所有评论集合保存到
@post_comments变量中,这个变量再被传递到那个_commentspartial模板.
最后行代码将post_id重新存入flash中,并准备处理下一个用户提交的评论。

5.运行项目,并验证那些评论被动态更新了。

更进一步:应用可视化效果

早先包含在你的项目中的script.aculo.us库提供了视觉效果,你可以用来加强你的应用程序的外观和感觉。这里,你应用一个效果来强调博客中最新的评论。在你应用这个效果后,你可以很容易地交换和尝试script.aculo.us库的效果。

1.打开 comments.rhtml文件,并用下面的代码替换
  • <%= comment.comment %>


    代码示例4:确定最新的评论代码<% if @post_comments.index(comment) == @post_comments.length-1 %>
    <li id=\"new_comment\"><%=h comment.comment %><br>
    <% else%>
    <li><%=h comment.comment %><br>
    <% end %>

    第一行代码用来确定一个评论是否是最新的评论。如果是,第二行把这个评论分配给那个名为new_commentid,因为这个id是你要应用的视觉效果。

    2.切换到post_comment.rjs文件,并添加下面这行强调新评论的代码:page[:new_comment].visual_effect:highlight

    3.选择 File > Save All,然后刷新浏览器,添加一条评论,注意新评论被简明地强调出来。


    1:有高亮显示的评论模型类视图
    [attachment=402]

    下几步

      [*]如果你想得到最新的NetBeans Ruby开发支持信息或最新的功能变化,请加入 users@ruby.netbeans.orgdev@ruby.netbeans.org 邮件列表。[*]如果你想提交NetBeans Ruby教程, 访问NetBeans Community Docs 页面。


    [ 本帖最后由 maninred 于 2007-11-16 18:33 编辑 ]
  • maninred 离线

    级别: 江湖少侠


    显示用户信息 

    只看该作者      4楼  发表于: 2007-11-08
    Putting Flickr on Rails
    Flickr在Rails中的应用
    引用


    原文标题:Putting Flickr on Rails
    原文作者:Brian Leonard
    原文地址:http://www.netbeans.org/kb/60/ruby/flickr-on-rails.html

    译者:Ragnarok@Ruby中文社区翻译团队
    译文首发:http://ruby-lang.org.cn/forums/viewthread.php?tid=1896&page=1&extra=page%3D1#pid7332

    转载请保留本版权信息,违者必究!

    Contributedby Brian Leonard, maintained by Gail Chappell
    October2007 [Revision number: V6.0-5]

    本教程将描述如何创建一个搜索Flickr数据库的Rubyon Rails应用程序。
    注意:本教程需要直接连接Internet,如果你正在用代理,则会看不到效果。

    内容:

    - 教程的先决条件
    - 获取Flickr API的KEY
    - 安装Flickr
    - 新建Ruby on Rails项目
    - 添加CSS到项目
    - 创建控制器(Controller)
    - 定义搜索方法
    - 运行应用程序
    - 加强用户体验


    教程的先决条件

    本教程使用了以下技术:
    获取 FlickrAPI Key
    你必须有一个APIKey来使用FlickrAPI。


    2.点击Apply现在在线获取你的Key(译者注:前提是你要用Yahoo的帐号,如果没有就注册一个)。

    3.按照以下步骤点击,获取一个Flickr Key。

    4.复制Flickr生成的Key,并把它保存到一个正文文件或方便的地方。

    安装Flickr

    1.从Tool菜单中选择Ruby Gems。

    2.在RubyGems对话框中点击New Gems。

    3.在Search域中输入flickr并按回车键。

    4.选择flickr,然后点击Install。在Gem安装设置的对话框点击OK。

    5.确认你收到成功的消息,然后关闭对话框

    新建Ruby on Rails项目

    1.选择File -> New Project。

    2.在分类栏中选择Ruby,并在Projects栏中选择Ruby on Rails 应用程序,点击Next。

    3.在Project Name栏中输入Flickr并点击Finish。

    Flickr库需要你直接把FlickrAPI Key添加到它的脚本中。然而下面所描述的方法可以使你不用接触FlickrAPI Key就可以使用Flickr库。

    4.在Project窗口展开Configuration节点,打开environment.rb文件。

    5.把下面的代码添加到environment.rb文件的最底端。必须把你的Flickr API Key键入到MY_KEY变量中。你需要这个Key访问这些Flickr API。

    代码示例1:加入你的Flickr API KEY
    require 'rubygems'
    require 'flickr'
    MY_KEY='Enter your Flicker API Key'
    class Flickr
    alias old_initialize initialize
    def initialize(api_key=MY_KEY, email=nil, password=nil)
    puts \"new_initialize \" + MY_KEY
    old_initialize(api_key, email, password)
    @host=\"http://api.flickr.com\"
    @activity_file='flickr_activity_cache.xml'
    end
    end

    增加样式到项目

    1.展开Views节点,右击layouts节点,并选择New -> RHTML file。命名这个文件为application,然后点击Finish。

    2.用下面的代码替换application.rhtml文件中已有的代码:

    代码示例2:application.rhtml的代码<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\">
    <html>
    <head>
    <title>Flickr</title>
    <%= javascript_include_tag :defaults %>
    <%= stylesheet_link_tag 'flickr' %>
    </head>
    <body>
    <%= yield %>
    </body>
    </html>3.展开Public节点,右击stylesheets,并选择New -> Other。在那New File的对话框中把这个Category设置到Other中,并把File Type设置到 Cascading Style Sheet(CSS)。点击Next。

    4.命名这个文件为flickr,并点击Finish。

    5.把下面的CSS添加到flickr.css中:

    代码示例3:CSS代码
    body {
    background-color: #888;
    font-family: Lucida Grande;
    font-size: 11px;
    margin: 25px;
    }

    form {
    margin: 0;
    margin-bottom: 10px;
    background-color: rgb(222,231,236);
    border: 5px solid #333;
    padding: 25px;
    }


    fieldset {
    border: none;
    }

    #spinner {
    float: right;
    margin: 10px;
    }

    #photos img {
    border: 1px solid #000;
    width: 75px;
    height: 75px;
    margin: 5px;
    }
    创建控制器(Controller

    1.右击Controllers节点,并选择Generate。 在Rail Generator对话框中的Name域中,键入flickr,并在Views域中键入index,然后点击OK。

    2.本行为创建flickr_controller.rb文件,并在编辑区域中打开此文件。

    3.展开Views->flickr,并打开index.rhtml

    4.将下面的代码替换index.rhtml中已有的代码:

    代码示例4:index.rhtml代码
    <%= form_remote_tag :url => {:action => 'search'}, :update => 'photos' %>
    <fieldset>
    <label for=\"tags\">Tags:</label>

    <%= text_field_tag 'tags' %>
    <%= submit_tag 'Find' %>
    </fieldset>

    <div id=\"photos\"></div>
    <%= end_form_tag %>

    定义搜索方法

    1.打开flickr_controller.rb

    2.通过删除index方法编辑这段代码,并用下面代码的粗体search方法代替它:

    代码示例5:
    class FlickrController < ApplicationController
    def search
    flickr = Flickr.new
    render :partial => 'photo', :collection =>
    flickr.photos(:tags => params[:tags], :per_page => '24')
    end

    end

    3.在Views节点下,右击flickr节点并选择New ->RHTML。命名这个文件为_photo,点击Finish。

    4.替换本文件的内容,以使本文件只含有下面那一行:
    <imgclass='photo' src=\"<%= photo。sizes[0]['source']%>\">

    运行应用程序

    在这里你将配置环境以使正在运行的这个项目开始本应用程序。

    1.如果WEBrick服务器正在运行,点击Output窗口中红X(如图)来停止WEBrick服务器:

    1:停止WEBrick服务器
    [attachment=403]

    2.展开Public节点,并删除index.html

    3.在Configuration节点下,打开routes.rb文件,并加入以下的代码倒文件底部的最后一个end语句之前:
    map.connect \"\", :controller => 'flickr'

    4.点击工具栏中的Run Main Project来启动WEBrick服务器,如下图所示。

    2:Flickr 应用程序
    [attachment=404]

    5.输入一个查找字符串,如NetBeans,并点击Find。给这些图片几秒钟来载入。

    3:载入的图片
    [attachment=405]


    加强用户的体验
    当你点击Find按钮时,没有任何反馈来表明本操作在做一些事情。在这里你现加入一张简单的动画Gif到help来解决这个问题,并改变载入图片的效果。

    1.在你的浏览器上保存此Gif动画文件到你桌面的一个文件中。然后把它拖到NetBeans IDE的Project窗口中的Public>images节点。

    2.展开Views >flickr> index.rhtml。删除原有的代码, 并替换成下面示例中的代码:

    3.在主菜单中,选择File -> Save All。刷新你的浏览器,并输入另一个查找字符串,如JRuby

    4:加入动画
    [attachment=406]

    现在你看到一个简单的动画,它使你了解到本服务器正在按你的要求工作。当这些图片出现时,它们就像一组盲人一样顺着向下移动。


    下几步


    [ 本帖最后由 maninred 于 2007-11-8 05:26 编辑 ]
    Ragnarok 离线

    级别: 中文化团队


    显示用户信息 

    只看该作者      5楼  发表于: 2007-11-08
    很好!很强大!
    回复一下拿点积分先!

    本帖最后由 maninred 于 2007-11-8 05:26 编辑
    不是吧!有没有这么晚呀!是不是UBUNTU的时间有点不太对劲!!??
    帖子中含有图片或附件,只有在登录后才能查看
    skyover 离线

    级别: 管理员


    显示用户信息 

    只看该作者      6楼  发表于: 2007-11-08
    昨天是很晚,我和maninred聊的时候就快一点了,他说搞好这几篇帖子就睡觉,可是编辑器格式不好弄,估计又重新弄了一遍,辛苦了!
    帖子中含有图片或附件,只有在登录后才能查看
    谢谢大家加入Ruby中文社区!
    douzi724 离线

    级别: 新手上路

    显示用户信息 

    只看该作者      7楼  发表于: 2007-11-08
    很棒,谢了
    帖子中含有图片或附件,只有在登录后才能查看
    maninred 离线

    级别: 江湖少侠


    显示用户信息 

    只看该作者      8楼  发表于: 2007-11-08
    翻译组的各位请出来拿奖励分阿。。。
    帖子中含有图片或附件,只有在登录后才能查看
    maninred 离线

    级别: 江湖少侠


    显示用户信息 

    只看该作者      9楼  发表于: 2007-11-08
    引用
    原帖由 Ragnarok 于 2007-11-8 10:32 发表
    很好!很强大!
    回复一下拿点积分先!

    本帖最后由 maninred 于 2007-11-8 05:26 编辑
    不是吧!有没有这么晚呀!是不是UBUNTU的时间有点不太对劲!!??


    大家最后提交稿子还是有很多问题,比如标点符号,校对后的错误有些还没有改正,我要一边改格式,一边改稿子。还有那个编辑器和文档格式的兼容性有问题,要改三四次才能把格式改好。

    本来以为只是把稿子贴上去而已,结果越做越发现问题在不断增多中。我睡觉前上厕所时听见了鸡叫了。。。
    帖子中含有图片或附件,只有在登录后才能查看
    描述
    快速回复

    如果您在写长篇帖子又不马上发表,建议存为草稿
    认证码:

     回复后跳转到最后一页