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=\"text/javascript\"> 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=\"picture\"> <%= image_tag contact.buddy_icon %> </span> <span class=\"real-name\"> <%= contact.full_name %></span> <% if contact.friendly? %> <span class=\"is-friend\">is your friend.</span> <% else %> <span class=\"no-friend\">is not your friend.</span> <% end -%> <span class=\"nickname\"><%= 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(\"h1\", \"foobar\") if some_condition %> <% end %> HTML attributes as helper options def some_helper( title, options = {} ) content_tag(\"p\", content_tag(\"span\", title, options), :class => 'p_class\") end <p class=\"p_class\"><span class=\"foobar\">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(\"\",\"odd\") ) 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=\"#\" onclick=\"new Ajax.Request('/people/1', {asynchronous:true, evalScripts:true, method:'get', parameters:'authenticity_token=' + encodeURIComponent('uwdvZFNiqzfd/iFOX65Ov9AkxVelIUVSylrWWxb58XM=')}); return false;\">ajax</a> <% remote_form_for @person, person_path(@person), :html => { :method => :put } do |f| %> <form action=\"/people/1\" id=\"edit_person_1\" method=\"post\" onsubmit=\"new Ajax.Request('/ people/1', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;\">

HANDICRAFT WAY <%= link_to 'ajax', person_path(person), :class => \"h-get\" %> <a href=\"/people/1\" class=\"h-get\">ajax</a> <% form_for @person, person_path(@person), :html => { :method => :put, :class => 'h-put' } do |f| %> <form action=\"/people/1\" class=\"h-put\" id=\"edit_person_1\" method=\"post\">

<a href=\"#\" onclick=\"new Ajax.Request('/ people/1', {asynchronous:true, evalScripts:true, method:'get', parameters:'authenticity_token=' + <a href=\"/people/1\" class=\"h-get\">ajax</a> encodeURIComponent('uwdvZFNiqzfd/ iFOX65Ov9AkxVelIUVSylrWWxb58XM=')}); return false;\">ajax</a> <form action=\"/people/1\" id=\"edit_person_1\" method=\"post\" onsubmit=\"new Ajax.Request('/ people/1', {asynchronous:true, <form action=\"/people/1\" class=\"h-put\" evalScripts:true, parameters:Form.serialize(this)}); return id=\"edit_person_1\" method=\"post\"> false;\">

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

0 comments

Notes on slide 1

7 Favorites & 1 Group