in_place_editing使用小记

qianjigui

浏览: 616690 次
性别:
来自: 杭州

最近访客更多访客>>

随心所欲的雪

斜挎包

此森07

weixin_42388702

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ROR 学习心得

MySQL wicket Rails XML Ajax

in_place_editing是一个用于原地编辑的ajax小控件。

典型的效果：

首先请下载相关的rails插件，大家注意：我这里的rails版本是2.1.2 ,所以原始的插件需要改进。

插件原始地址：http://svn.rubyonrails.org/rails/plugins/in_place_editing/

插件相关改进的讨论：http://railsforum.com/viewtopic.php?id=22457

这是我根据相关的讨论修改后的版本：http://qianjigui.iteye.com/upload/attachment/59164/1ddb2805-c9ce-3a9a-9d03-f950017857f4.zip

下面是具体的步骤：

创建测试应用
```
rails test
```

添加需要使用的插件

cd test/vendor/plugins/
ls  => in_place_editing.zip
unzip in_place_editing.zip

添加一个数据表

ruby script/generate scaffold account

#需要根据自己系统的特点配置 config/database.yml
#gvim db/migrate/20081212144700_create_accounts.rb
class CreateAccounts < ActiveRecord::Migration
  def self.up
    create_table :accounts do |t|
      t.column :name, :string
      t.column :id_card, :string
      t.column :email, :string
      t.timestamps
    end
  end

  def self.down
    drop_table :accounts
  end
end

# MySQL.  Versions 4.1 and 5.0 are recommended.
#
# Install the MySQL driver:
#   gem install mysql
# On Mac OS X:
#   sudo gem install mysql -- --with-mysql-dir=/usr/local/mysql
# On Mac OS X Leopard:
#   sudo env ARCHFLAGS="-arch i386" gem install mysql -- --with-mysql-config=/usr/local/mysql/bin/mysql_config
#       This sets the ARCHFLAGS environment variable to your native architecture
# On Windows:
#   gem install mysql
#       Choose the win32 build.
#       Install MySQL and put its /bin directory on your path.
#
# And be sure to use new-style password hashing:
#   http://dev.mysql.com/doc/refman/5.0/en/old-client.html
development:
  adapter: mysql
  encoding: utf8
  database: test_development
  username: testmysql
  password: ******
  host: localhost
  socket: /var/run/mysqld/mysqld.sock
  
# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  adapter: mysql
  encoding: utf8
  database: test_test
  username: testmysql
  password: ******
  host: localhost

production:
  adapter: mysql
  encoding: utf8
  database: test_production
  username: testmysql
  password: ******
  host: localhost

运行rake

rake db:migrate

下面我们在做了基础设施后，开始我们的具体使用吧：

#插入必要的javascript到layout(app/views/layouts/accounts.html.erb )中
<%= javascript_include_tag :defaults %>

#得到完整的文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Accounts: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= javascript_include_tag :defaults %>  
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield  %>

</body>
</html>

阅读插件的README我们了解到，需要给使用这个插件的Controller添加相应的配置方法

README 写道

Example:

# Controller
class BlogController < ApplicationController
in_place_edit_for :post, :title
end

# View
<%= in_place_editor_field :post, 'title' %>

下面我们在app/controllers/accounts_controller.rb中添加需要的方法，在这里我们希望每一个字段都具有这样的特性。

class AccountsController < ApplicationController
  Account.content_columns.each do |c|
    in_place_edit_for :account, c.name
  end
  
  # GET /accounts
  # GET /accounts.xml
  def index
    @accounts = Account.find(:all)

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

  # GET /accounts/1
  # GET /accounts/1.xml
  def show
    @account = Account.find(params[:id])

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

  # GET /accounts/new
  # GET /accounts/new.xml
  def new
    @account = Account.new

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

  # GET /accounts/1/edit
  def edit
    @account = Account.find(params[:id])
  end

  # POST /accounts
  # POST /accounts.xml
  def create
    @account = Account.new(params[:account])

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

  # PUT /accounts/1
  # PUT /accounts/1.xml
  def update
    @account = Account.find(params[:id])

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

  # DELETE /accounts/1
  # DELETE /accounts/1.xml
  def destroy
    @account = Account.find(params[:id])
    @account.destroy

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

其中我们添加了

  Account.content_columns.each do |c|
    in_place_edit_for :account, c.name
  end

这个方法的具体作用是为每一个字段添加一个设置属性的action，具体的定义可以参考插件中的方法描述。

在添加了相应的响应用的action后，我们需要让前台的页面(修改app/views/accounts/show.html.erb)工作起来。

<% for c in Account.content_columns %>
  <p>
    <b>
      <%= c.human_name %>:
    </b>
    <%= in_place_editor_field :account, c.name, {} %>
  </p>
<% end %>
<%= link_to 'Edit', edit_account_path(@account) %> |
<%= link_to 'Back', accounts_path %>

需要提供一个有效的表单页面（修改app/views/accounts/new.html.erb）

<h1>New account</h1>

<% form_for(@account) do |f| %>
  <%= f.error_messages %>
  <% for column in Account.content_columns %>
    <p>
    <b><%= column.human_name %>:</b>
    <%= text_field :account, column.name %>
    </p>
  <% end %>
  <p>
    <%= f.submit "Create" %>
  </p>
<% end %>

<%= link_to 'Back', accounts_path %>

让我们跑起来看看效果吧。
```
ruby script/server
```
在浏览器中输入http://localhost:3000/accounts
按照步骤，我们点击 New account。输入相关数据
点击show.体验效果吧。

test.tar.gz (94.3 KB)
描述: 原始测试代码和修改后的插件
下载次数: 29

in_place_editing.zip (4.9 KB)
描述: 改进后的插件
下载次数: 41

in.swf.zip (5.9 MB)
描述: 一个小的效果演示视频
下载次数: 20

test.zip (104.8 KB)
描述: 演示样例及其源代码
下载次数: 22

查看图片附件

分享到：

《Ruby程序设计语言》第一章学习笔记 | 上学走过的路

2008-12-12 23:23
浏览 1208
评论(4)
论坛回复 / 浏览 (4 / 5224)
查看更多

4 楼 wtb 2008-12-19

本来就很简单，让楼主写复杂了（他把整个页面中的东西都贴出来了）
1、调入AJAX
<%= javascript_include_tag :defaults %>
2、动态生成Action
Account.content_columns.each do |c|
in_place_edit_for :account, c.name
end
3、在view中使用
<%= in_place_editor_field :post, 'title' %>

3 楼 duker 2008-12-18

太复杂,让我们看看在wicket 中实现一个in place editing 是多么简单:

第一步: 导入 "in place edit" 组件

import org.apache.wicket.extensions.ajax.markup.html.AjaxEditableLabel;

在wicket extension 项目中提供了一个 AjaxEditableLabel 组件

第二步: 在html 中需要in place edit 的地方放置一个标签

<span wicket:id="inlineEditor"  ></span>

第三步步: 创建组件并绑定model

String content ="点击开始编辑";
AjaxEditableLabel label = new AjaxEditableLabel("inlineEditor", new PropertyModel(this, "content")){

            @Override
            protected void onCancel(AjaxRequestTarget target) {
                super.onCancel(target);
            }

            @Override
            protected void onEdit(AjaxRequestTarget target) {
                super.onEdit(target);
            }

            @Override
            protected void onSubmit(AjaxRequestTarget target) {
                super.onSubmit(target);
            }

            @Override
            protected String getLabelAjaxEvent() {
                return "ondblclick";
            }

        };
        add(label);

that's all.
任何时候你访问content ,都是最后一次"ipe" 过的数据.如果想更改激活 "in place edit" 的事件,在 getLabelAjaxEvent 中返回相应的事件名称即可.并且在编辑启动,编辑取消,数据提交时都能得到事件处理的通知.

wicket 中的组件可以复合, 在任何使用Label 的地方都可以换成 AjaxEditableLabel,
form, ListView, Tree 等等.

2 楼 fkpwolf 2008-12-18

用linux开发，赞...
那个画框的线好难看

1 楼 PBFox 2008-12-18

Called id for nil, which would mistakenly be 4 -- if you really wanted the id of nil, use object_id

“If you’re receiving this error while using the in_place_editor_field method, chances are you’re iterating through a list of objects and you’re passing the variables to the method incorrectly.

To fix this problem, set the current iteration as an instance variable and you should be fine.

For example:

<% for person in @people %>
<% @person = person %>
<%= in_place_editor_field :person, :name %>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论