Quick Start: Rails Live Tree

2,071 views

Published on

This presentation provides a step-by-step roadmap for creating a dynamic tree feature for a web site using the LiveTree JavaScript code and the Rails "acts_as_tree" mechanism.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,071
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Quick Start: Rails Live Tree

  1. 1. RoR : LiveTree Quickstarts – doing a live tree in 15 minutes By Steve Keener
  2. 2. Step 1 – Download LiveTree <ul><li>Download the LiveTree project code. </li></ul><ul><li>www.epiphyte.ca/code/live_tree.html </li></ul>
  3. 3. Step 2 – Create a Rails Project <ul><li>Create a new Rails project in your environment. </li></ul><ul><li>Side note: I’ll leave this up to you. I use RadRails generally. So I’ll create the project then go unzip the LiveTree code in the main project directory. </li></ul>
  4. 4. Step 3 – Create a Model & Controller <ul><li>Create a Model. I used “taxonomy” </li></ul><ul><li>Create a Controller. I again used “taxonomy” </li></ul>
  5. 5. Step 4 – Create the DB table via Migration <ul><li>class CreateTaxonomies < ActiveRecord::Migration </li></ul><ul><ul><li>#Create table – Use the convention from the acts_as_tree Rails module. </li></ul></ul><ul><li>def self.up </li></ul><ul><li>create_table :taxonomies do |t| </li></ul><ul><li>t.column :name , :string </li></ul><ul><li>t.column :parent_id , :integer </li></ul><ul><li>end </li></ul><ul><li># Add some basic data </li></ul><ul><li>r = Taxonomy.create( :name => &quot;Root&quot;) </li></ul><ul><li>r.save </li></ul><ul><li>r2 = r.children.create( :name => &quot;Child1&quot;) </li></ul><ul><li>r2.save </li></ul><ul><li>r3 = r2.children.create( :name => &quot;child2&quot;) </li></ul><ul><li>r3.save </li></ul><ul><li>end </li></ul><ul><li>def self.down </li></ul><ul><li>drop_table :taxonomies </li></ul><ul><li>end </li></ul><ul><li>end </li></ul>
  6. 6. Step 4.1 <ul><li>Use the convention defined in the Rails “acts_as_tree” class. </li></ul><ul><li>Use “id” for the table key like a normal Rails table </li></ul><ul><li>Use “parent_id” for self referential link to parent node in tree. </li></ul>
  7. 7. Step 5 – Update the Model to work as a Tree <ul><li>Update the DB Model. </li></ul><ul><li>class Taxonomy < ActiveRecord::Base </li></ul><ul><li>acts_as_tree :order => &quot;name&quot; </li></ul><ul><li>end </li></ul><ul><li>For performance reasons you can do it this way: </li></ul><ul><li>acts_as_tree :order => &quot;name&quot;, :counter_cache => true </li></ul>
  8. 8. Step 6– Add LiveTree code to Controller <ul><li>Taxonomy_tree is the object name </li></ul><ul><li>Txonomy is the DB model </li></ul><ul><li>live_tree :taxonomy_tree , :model => :taxonomy </li></ul><ul><li>Get the root node of the taxonomy tree </li></ul><ul><li>def show_tree </li></ul><ul><li>@root = Taxonomy.find(params[:id]); </li></ul><ul><li>End </li></ul>
  9. 9. Step 7 – Create a page to show the tree <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li>... </li></ul><ul><li><%= stylesheet_link_tag('live_tree') %> </li></ul><ul><li><%= javascript_include_tag &quot;prototype&quot; %> </li></ul><ul><li><%= javascript_include_tag &quot;live_tree&quot; %> </li></ul><ul><li>... </li></ul><ul><li></head> </li></ul><ul><li><div style=&quot;width:300px;height:415px&quot;> </li></ul><ul><li><%= live_tree( :taxonomy_tree , { </li></ul><ul><li>:initial_data_root => @root , </li></ul><ul><li>:on_click_item => &quot;&quot;, </li></ul><ul><li>}) %> </li></ul><ul><li></div> </li></ul><ul><li></html> </li></ul>
  10. 10. Step 7.1 – Explanation of view code <ul><li>Add the stylesheet include for formatting purposes </li></ul><ul><li>Add the javascript include so that the bloody thing actually works.  </li></ul><ul><li>Insert the call to the LiveTree Rails object. </li></ul>
  11. 11. Step 8 – Enjoy your work
  12. 12. Step 8.1 – Yes it works…Click on Child1 node and get…
  13. 13. Step 9 – adding more functionality <ul><li>Add Javascript calls to your tree </li></ul><ul><li><%= live_tree( :taxonomy_tree , { </li></ul><ul><li>:initial_data_root => @root , </li></ul><ul><li>:on_click_item => &quot;&quot;, </li></ul><ul><li>}) %> </li></ul><ul><li>Add a Javascript call to the “on_click_item” field. Maybe a nice AJAX call to populate another field on the web page. </li></ul>

×