Arun Gupta, Miles to go ...

jMaki on Rails - Reloaded for NetBeans 6.1 beta & Rails 2.0

NetBeans 6.1 Beta was released last week. Amongst the many improvements, one of them is the bundled JRuby 1.1 RC2 and Rails 2.0.2. The jMaki plugin used to work fine with Rails 1.2.3 but need to be updated because of changed file name extensions for the default generated views (".rhtml.erb" instead of ".rhtml"). With this release of NetBeans, jMaki plugin has been updated to work in this configuration as well.

This blog provide detailed steps to install jMaki plugin, create a simple Rails 2.0 application using NetBeans IDE and update the generated scaffold to use a Yahoo Data Table widget for displaying the data. It is an update to screencast #web8, lets get started!

1. Install the jMaki plugin - In NetBeans IDE, go to "Tools", "Plugins". Select "jMaki Ajax support" and click on "Install" button as shown in the following figure:
   
   
   
   Follow the instructions to install the plugin. The IDE is restarted after a successful install.
2. Create a new Rails project
1. Create a new Rails project by selecting "File", "New Project..." and selecting "Ruby" and "Ruby on Rails Application". Take all the defaults as shown below:
   
   
   and click on "Next >".
2. Choose "Specify Database Information Directly" and specify the database configuration information as shown below:
   
   
   and click on "Finish". You need to make sure MySQL server is running.
3. Generate Scaffold and Database structures
1. Right-click on the newly created project, select "Generate..." and enter the values as shown below:
   
   
   and click on "OK". This creates a scaffold and model that would allow us to perform CRUD operations on Title, Author, ISBN and Description for a Book.
2. Create the datbase by invoking db:create target. This is done by right-selecting the project, select "Run Rake Task", "db" and then "create" as shown below:
   
   
   
3. Create the database tables by running "db:migrate" using the similar steps described above - "Run Rake Task", "db", "migrate".
4. Add and Configure jMaki widget
1. In the project, expand "Views", "books" and double-click on "index.rtml.erb" to edit it. This page is used to display all the books from the database table in an HTML table. It also shows links to perform CRUD operations on each book item. From the jMaki Yahoo palette, drag-and-drop a "Yahoo Data Table" right after "</table>" tag. The generated fragment looks like:
   
   
   
   
2. The default generated code fragment shows 4 columns in the table. Lets add a new column to display the CRUD operations link. Add the following fragment:
   
   { :actions => 'Action', :id => 'actions' }
   
   right after
   
   { :label => 'Description', :id => 'description'}
   
   You also need to add a comma "," after the Descrption column fragment. The updated code looks like:
   
   
3. Add the following Ruby fragment right before "<%= jmaki_widget" generated code:
   
   <%
@rows_data = []
for book in @books
  @rows_data << { :id => book.id,
    :title => book.title,
    :author => book.author,
    :isbn => book.isbn,
    :description => book.description,
    :actions => link_to('Show', book) + ' ' + link_to('Edit', edit_book_path(book)) + ' ' + link_to('Destroy', book, :confirm => 'Are you sure?', :method => :delete)
  }
end
%>
   
   This fragment creates a JSON array, @row_data, in the format expected by Yahoo Data Table widget, after retrieving the values from the database. 
4. Finally, instead of reading the static values for columns, use the newly created "@row_data" to populate the values. The code with all the changes looks like as shown below:
   
   
5. Run the project
1. The scaffold is now accessible at http://localhost:3000/books. This page in the browser looks like:
   
   
   
2. After adding couple of entries, the page looks like:
   
   

Posted by Arun Gupta in web2.0  |  Comments[6]