• Save
Quick Start: Rails Live Tree
Upcoming SlideShare
Loading in...5
×
 

Quick Start: Rails Live Tree

on

  • 2,622 views

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.

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.

Statistics

Views

Total Views
2,622
Views on SlideShare
2,595
Embed Views
27

Actions

Likes
1
Downloads
0
Comments
0

5 Embeds 27

http://www.keenertech.com 11
http://www.slideshare.net 11
http://127.0.0.1 3
http://127.0.0.1:3000 1
http://keenertech.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Quick Start: Rails Live Tree Quick Start: Rails Live Tree Presentation Transcript

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