Insider Scoop From the Tutorial Divas

« May 2008
Sun	Mon	Tue	Wed	Thu	Fri	Sat
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Today

« May 2008

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Today

If you have installed the NetBeans IDE support for Ruby and you are interested in integrating jMaki in your Ruby on Rails projects, here is a five-minute tutorial that will get you started. In this tutorial, you add a Yahoo data table to a Ruby on Rails view. (If you have not yet installed the NetBeans IDE 6.0 or if you need to add Ruby support to your NetBeans IDE, learn how to here.)

If you haven't installed the jMaki plugin for the NetBeans IDE, it takes just a minute. Select Tools > Plugins from the main menu, select jMaki Ajax Support, click Install and follow the instructions.
Follow the steps in the "Working With Ruby on Rails Files" section in the Getting Started With Ruby and Rails. This should take just a few minutes as no database is involved. Finish all the steps up to but not including the "Practicing What You Have Learned" subsection. It is important that you add the routing code (Code Sample 10) to the routes.rb file and delete the Public > index.html file.

Note: If you already have done these sections, but added the jMaki plugin after you created the project, you need to create a new project in order to have jMaki included.
Edit the Views > item > index.rhtml file.
Remove the <table> including the nested <tr> and <td> tags. You will replace this HTML table with the Yahoo Data Table.
Choose Window > Palette from the main menu to view the Palette window.
Expand the jMaki Yahoo section in the Palette, then drag and drop the Data Table onto the index.rhtml.

Replace the jmaki_widget tag with the following code:

<%= jmaki_widget 'yahoo.dataTable',
:value =>
{:columns => [
     { :label => 'Id', :id => 'id'},
     { :label =>'Type', :id => 'type'},
     { :label => 'Price', :id => 'price'},
     ],
  :rows => @items
  }
-%>

Click the small x button in the bottom right corner of the IDE to stop the WEBrick server.
Click the Run Main Project button and the browser should display a nice Yahoo table that contains the item data.