Building Web Interface On Rails

BUILDING WEB INTERFACES
ON RAILS
ihower@handlino.com
Ruby Tuesday 2009/5/19

ABOUT ME
• a.k.a ihower

• http://ihower.idv.tw/blog/

• http://twitter.com/ihower

• Rails developer

• http://handlino.com

• http://registrano.com

AGENDA
• 1. some useful helper technique

• 2. handicraft_helper plugin

• 3. handicraft_ujs plugin

• 4. some UI design patterns implementation

EXAMPLE CODE
all demo code is here:

http://github.com/ihower/handicraft-interfaces
1. download
2. rake dev:build
3. script/server

1. USEFUL HELPER
TECHNIQUES

CONTENT_FOR
# /layouts/application.html.erb
# foobar.html.erb
<p>fooooooooooooooooooo</p> A <html>
<head>
<% content_for :page_javascript do %>
<script type=quot;text/javascriptquot;> B <%= yield :page_javascript %>
... B
</script> </head>
<% end %> <body>

<p>barrrrrrrrrrrrrrrrrr</p> A A <%= yield %>

<div id=”sidebar”>
<%= yield :sidebar %>
<div>
</body>
</html>

PASSING BLOCK PARAMETER
Original version, we need a helper
<% link_to_remote some_helper(contact), :url => contact_path(contact), :method => :get %>

My Want
<% link_to_remote :url => contact_path(contact), :method => :get do %>
<span class=quot;picturequot;>
<%= image_tag contact.buddy_icon %>
</span>
<span class=quot;real-namequot;> <%= contact.full_name %></span>
<% if contact.friendly? %>
<span class=quot;is-friendquot;>is your friend.</span>
<% else %>
<span class=quot;no-friendquot;>is not your friend.</span>
<% end -%>
<span class=quot;nicknamequot;><%= contact.nickname %></span>
<% end -%>

PASSING BLOCK PARAMETER
Use block_given?, concat and capture(&block)
# provide block suppoet
def link_to_remote(*args, &block)
if block_given?
options = args.first || {}
html_options = args.second

concat( link_to_function(capture(&block), remote_function(options), html_options ||
options.delete(:html)) )
else
name = args.first
options = args.second || {}
html_options = args.third

link_to_function(name, remote_function(options), html_options ||
options.delete(:html))
end
end

CONTENT_TAG
Ruby Style, less line of code
<% if some_condition %>
<h1>foobar</h1> <%= content_tag(quot;h1quot;, quot;foobarquot;) if some_condition %>
<% end %>

HTML attributes as helper options
def some_helper( title, options = {} )
content_tag(quot;pquot;,
content_tag(quot;spanquot;, title, options), :class => 'p_classquot;)
end

<p class=quot;p_classquot;><span class=quot;foobarquot;>test</span></p>

KNOW RAILS HELPERS

• READ Rails helpers source code

• /actionpack-x.y.z/lib/action_view/helpers/*

2. HANDICRAFT HELPER
PLUGIN
handlino’s favorite rails helpers

PROBLEM AND SOLUTION
• Weneed complex/logistic HTML in helper, but write a lot
HTML string + operators are painful.

• Myearly solution: use markaby plugin, but it’s slow and yet
another dependency.

• currentsolution idea from Composite&Builder pattern
(Refactoring to Patterns book), it’s simple, component and fast.

COMPOSITE PATTERN
class TagNode
include ActionView::Helpers::TagHelper

def initialize(name, options = {})
USAGE:
@name = name.to_s
table = TagNode.new('table', table_tag_options)
@attributes = options
table << thead = TagNode.new(:thead)
@children = []
thead << tr = TagNode.new(:tr, :class => 'odd')
end
thead << tr = TagNode.new(:tr, :class => 'even')

def to_s
table << tbody = TagNode.new('tbody')
value = @children.each { |c| c.to_s }.join
tbody << tr = TagNode.new('tr', :class => cycle(quot;quot;,quot;oddquot;) )
content_tag(@name, value.to_s, @attributes)
end
return table.to_s

def <<(tag_node)
@children << tag_node
end
end

LIVE DEMO

• render_menu

• render_table (column-oriented table)

• breadcrumb

3. HANDICRAFT UJS
PLUGIN
a jQuery replacement for Ajax on Rails

IDEA 1: JRAILS
http://ennerchi.com/projects/jrails

IDEA 2: UNOBTRUSIVE
http://blog.lawrencepit.com/2008/09/04/unobtrusive-jquery-rails/

Separation
of functionality
from content

MY WANT
• jQuery (write less, do more)

• RJS (in controller, because it keep controller ruby style)

• RESTful (Rails way)

• unobtrusive and accessible (hate inline js everywhere)

INLINE JS EVERYWHERE
<%= link_to_remote 'ajax', :url => person_path(person), :method => :get %>

<a href=quot;#quot; onclick=quot;new Ajax.Request('/people/1', {asynchronous:true,
evalScripts:true, method:'get', parameters:'authenticity_token=' +
encodeURIComponent('uwdvZFNiqzfd/iFOX65Ov9AkxVelIUVSylrWWxb58XM=')}); return
false;quot;>ajax</a>

<% remote_form_for @person, person_path(@person), :html => { :method => :put } do |f| %>

<form action=quot;/people/1quot; id=quot;edit_person_1quot; method=quot;postquot; onsubmit=quot;new Ajax.Request('/
people/1', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)});
return false;quot;>

HANDICRAFT WAY
<%= link_to 'ajax', person_path(person), :class => quot;h-getquot; %>

<a href=quot;/people/1quot; class=quot;h-getquot;>ajax</a>

<% form_for @person, person_path(@person), :html => { :method => :put, :class => 'h-put' }
do |f| %>

<form action=quot;/people/1quot; class=quot;h-putquot; id=quot;edit_person_1quot; method=quot;postquot;>

<a href=quot;#quot; onclick=quot;new Ajax.Request('/
people/1', {asynchronous:true,
evalScripts:true, method:'get',
parameters:'authenticity_token=' + <a href=quot;/people/1quot; class=quot;h-getquot;>ajax</a>
encodeURIComponent('uwdvZFNiqzfd/
iFOX65Ov9AkxVelIUVSylrWWxb58XM=')}); return
false;quot;>ajax</a>

<form action=quot;/people/1quot; id=quot;edit_person_1quot;
method=quot;postquot; onsubmit=quot;new Ajax.Request('/
people/1', {asynchronous:true,
<form action=quot;/people/1quot; class=quot;h-putquot;
evalScripts:true,
parameters:Form.serialize(this)}); return id=quot;edit_person_1quot; method=quot;postquot;>
false;quot;>

HOW
• JQuery 1.3 live binding

• jQuery metadata plugin

• jQuery form plugin

• jQuery version RJS (extract from jRails plugin)

LIVE DEMO

• h-get, h-post, h-put, h-delete

•{ update: ‘content’ }

•{ callback: ‘handle_json’ }

•{ conﬁrm: ‘Are you sure? }

4. UI DESIGN PATTERNS
IMPLEMENTATION

IDEA
http://designingwebinterfaces.com/explore

LIVE DEMO
• Single-Field Inline Edit

• Multi-Field Inline Edit

• Group Edit

• Sortable List

Building Web Interface On Rails

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a Building Web Interface On Rails

Similar a Building Web Interface On Rails (20)

Más de Wen-Tien Chang

Más de Wen-Tien Chang (20)

Último

Último (20)

Building Web Interface On Rails