Skip to main content

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

Posted by arungupta on March 12, 2008 at 7:45 AM PDT



NetBeans
6.1 Beta
was released last week. Amongst the href="http://www.netbeans.org/servlets/NewsItemView?newsItemID=1200">many
improvements, one of them is the bundled href="http://jruby.org/">JRuby 1.1 RC2 and href="http://rubyonrails.org/">Rails 2.0.2. The href="http://ajax.dev.java.net">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 href="http://blogs.sun.com/arungupta/entry/screencast_web8_jmaki_on_rails">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:



    src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-plugin-install.png">



    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:



      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-railsapp-create1.png">

      and click on "Next >".
    2. Choose "Specify Database Information Directly" and
      specify the database configuration information as shown below:



      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-railsapp-create2.png">

      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:



      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-rails-create-scaffold.png">

      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:





      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-rails-db-create.png">
    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
      "" tag. The generated fragment looks like:



      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-rails-add-yahoo-datatable.png">


    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:



      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-rails-add-actions.png">
    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:



      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-rails-rowsdata.png">
  5. Run the project
    1. The scaffold is now accessible at
      http://localhost:3000/books. This page in the browser looks like:



      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-rails-default-browser-output.png">
    2. After adding couple of entries, the page looks like:



      src="http://blogs.sun.com/arungupta/resource/jmaki/nb61-beta-jmaki-rails-final-browser-output.png">

Previous entries that shows how jMaki can be used with Ruby-on-Rails in
NetBeans IDE can seen href="http://blogs.sun.com/arungupta/tags/rubyonrails+jmaki+netbeans">here.



Technorati: netbeans
jmaki href="http://tecnorati.com/tag/jruby">jruby href="http://tecnorati.com/tag/ruby">ruby href="http://tecnorati.com/tag/rubyonrails">rubyonrails
mysql

Related Topics >>

Comments

robertfolkerts, http://blogs.sun.com/arungupta/entry/totd_25_rails_application_with provide details on how to configure PostgreSQL with NetBeans/Rails. Let me know if these steps do not work for you.

I am using postgresql. When I run this example, I enter the postgresql parameters in step 2, but the database.yml comes up with the mysql connections to a non-existent server. I realize that MySQL is now a Sun product, but having connections to other databases get rewritten to MySQL seems rather .... Redmondesk ... for lack of a better word.