Miles to go ...

Arun Gupta is a Technology Evangelist for Web Services and Web 2.0 Apps at Sun. He was the spec lead for APIs in the Java platform, committer in multiple Open Source projects, participated in standard bodies and contributed to Java EE and SE releases.
« Metro on Tomcat 6.x | Main | Screencast #Web4:... »

http://blogs.sun.com/arungupta/date/20070723 Monday July 23, 2007

jMaki on Rails - Updated for NetBeans 6 M10

Based upon a user request, this is a follow up entry to show how jMaki on Rails For Dummies work on NetBeans 6 Milestone 10. Some of the steps are simplified and more details are provided. The updates from the previous blog entry are highlighted in this color.

  1. Download NetBeans 6.0 M10 (Full version) and configured to install only "Base IDE", "Java IDE", "Web and Java EE" and "Ruby" modules. A cutting-edge build can be obtained from the hudson build.
  2. Download and install jMaki plug-in in NetBeans update center.
    1. In NetBeans 'Tools', 'Plugins', select 'Downloaded', click on 'Add Plugins ...'.
    2. Select the downloaded .NBM module, click on 'Install' button (bottom left corner). Follow the next few instructions to install jMaki plug-in and restart the IDE.
    3. To verify, go to 'Tools', 'Plugins', select 'Installed'. It should show 'jMaki Ajax support' with today's installation date.
  3. Create a new "Ruby on Rails Application" Project, lets say named 'jmaki_ror'. Take everything else as default.
  4. Create a new controller by right-clicking the project, select 'Generate ...', select 'controller', specify the Name as 'jmaki' and Views as 'yahoo'.
  5. jMaki-enable the Rails app
    1. Right click on your Rails project, select "Rails Plugins ...".
    2. Select the "Repositories" tab.
    3. Click "Add URL" and specify "http://jmaki-goodies.googlecode.com/svn/trunk/rails_plugins".  This adds the plug-in registry to the list of repositories used for searching plug-ins.
    4. Now install the jmaki runtime. Select the "New Plugins" tab .
    5. Multi-select jmaki_core and jmaki_yahoo and press "Install". Follow the instructions and the two plug-ins will be installed. After the installation is complete, you'll see the following:



      and click on 'Close'.
    6. Expand 'Views', right-click on 'layouts', select 'New', select 'RHTML file ...'. Enter the 'File Name' as 'standard'. This will add 'standard.rhtml' in layouts sub-tree. Enter the following fragment before <body>:

      <head>
        <%= stylesheet_link_tag "jmaki-standard", :media => "all" -%>
        <%= javascript_include_tag "jmaki" -%>
        <%= jmaki_setup -%>
      </head>
    7. Within <body>, add the following fragment:

      <%= @content_for_layout %>
    8. In 'Controllers', 'jmaki_controller.rb', add the following fragment before 'def yahoo' line:

      layout "standard"
  6. Download and Configure the MySQL database
    1. Download MySQL 5.0 Community Server and install by taking all the default values.
    2. In a command prompt window, Start MySQL server using the command: 'mysqld-nt --user root'.
    3. Create database using the command: 'mysqladmin -u root create jmaki_ror_development'. You need to make sure that the database name in this script is changed to match the project name.
    4. Right select the NetBeans project, select 'Generate', select 'model', specify the arguments as 'grid', click 'OK'. This will generate, in NetBeans project, Database Migrations, migrate, 001_create_grids.rb.
    5. Open 001_create_grids.rb, change self.up helper method such that it looks like:

      def self.up
        create_table :grids do |t|
          t.column :company, :string
          t.column :price, :float
          t.column :change, :float
          t.column :percent_change, :float
          t.column :last_updated, :string
        end
      end 
    6. Right-select NetBeans project, select 'Run Rake Target', 'db', 'migrate'. This generates the database table.
    7. Execute the query to insert data into the table.
      1. The easiest way to run this query is to run mysql client in the command prompt window as: 'mysql --user root'.
      2. Enter the command as 'use jmaki_ror_development' to see the following interaction:

        mysql> use jmaki_ror_development;
        Database changed
      3. And then execute the query given below:

        insert into grids values (1, 'A Co', 71.72, 0.02, 0.03, 'Jan 1, 2007, 10:00am' );
        insert into grids values (2, 'B Inc', 29.01, 0.42, 1.47, 'Feb 1, 2007, 10:00am' );
        insert into grids values (3, 'C Group Inc', 83.81, 0.28, 0.34, 'Mar 1, 2007, 10:00am' );
        insert into grids values (4, 'D Company', 52.55, 0.01, 0.02, 'Apr 1, 2007, 10:00am' );
  7. Add jMaki-wrapped Yahoo DataTable widget
    1. In NetBeans project, in 'Views', 'jmaki', 'yahoo.rhtml', drag-and-drop 'Data Table' widget from the 'Yahoo' category of jMaki palette.
      1. Until the jMaki data model for grid and data widgets is consistent between Java and JRuby, you need to replace the generated code in 'yahoo.rhtml' with the following:

        <%= jmaki_widget 'yahoo.dataTable',
            :args => {
                :columns => [
                    { :title => 'Company', :width => 200, :locked => false },
                    { :title => 'Price', :width => 75, :renderer => 'usMoney' },
                    { :title => 'Change', :width => 75, :renderer => 'change' },
                    { :title => '% Change', :width => 75, :renderer => 'pctChange' },
                    { :title => 'Last Updated', :width => 85, :renderer => 'italic' }
                ]
            },
        :value => @table_data
        -%>
      2. '@table_data' is defined in 'jmaki_controller' in 'def yahoo' as:

        def yahoo
            @table_data = []
            Grid.find_all().each do |data|
              @table_data << [ data.company, data.price, data.change, data.percent_change, data.last_updated]
            end
        end
  8. That's it, run your app and view the page at 'http://localhost:3000/jmaki/yahoo'. Now jMaki-wrapped Yahoo DataTable widget is picking data from the MySQL database. 

And as a next step, you can WAR'up this RoR application and deploy it on GlassFish V2 using these instructions.

Technorati: jmaki rubyonrails ror netbeans mysql glassfish

del.icio.us | furl | simpy | slashdot | technorati | digg
Comments:

[Trackback] As reported earlier jMaki and GlassFish, along with a host of other Sun-led open source technologies (NetBeans, OpenJDK, OpenDS, Project Indiana, etc.), were present at OSCON 2007 last week. I spent my entire 2 days at the jMaki booth...

Posted by Arun Gupta's Blog on July 31, 2007 at 03:07 PM PDT #

[Trackback] jMaki returns from vacation...with pictures:)

Posted by Ludovic Champenois's Blog on July 31, 2007 at 06:09 PM PDT #

[Trackback] jMaki is a light-weight framework for build Web 2.0 applications. It provides support for multiple languages - Java (1, 2, 3, 4, 5, 6) , PHP, Ruby (1, 2), Phobos (1). The numbers in parentheses indicate the entries that I've...

Posted by Arun Gupta's Blog on August 24, 2007 at 06:08 AM PDT #

[Trackback] The first ever The Rich Web Experience 2007 just got over and I enjoyed participating in the conference. This conference is part of No Fluff Just Stuff Symposium series and truly lived up to it's name and these are...

Posted by Arun Gupta's Blog on September 08, 2007 at 07:08 PM PDT #

[Trackback] Sun Microsystems is a Diamond Sponsor of Rails Conf Europe 2007 (Sep 17 - 19). We'll demonstrate how NetBeans 6 IDE provides a complete development environment for Rails application GlassFish provides a robust and modular deployment platform jMaki pro...

Posted by Arun Gupta's Blog on September 13, 2007 at 06:14 AM PDT #

How do we add pagination to this widget? Looking at the properties available for this widget in the documentation doesn't mention anything about pagination.

Posted by Chris Simpson on January 31, 2008 at 11:26 PM PST #

Chris, more details about jMaki pagination are available at:

http://weblogs.java.net/blog/carlavmott/archive/2007/09/how_to_implemen.html

Posted by Arun Gupta on February 01, 2008 at 07:08 AM PST #

Thank you for your response. Yes, I did read that article, but I was hoping their would be support for pagination as the original Yahoo DataTable has. Will the version in jMaki be updated to match what is available as part of the YUI tools?

Posted by Chris Simpson on February 01, 2008 at 10:43 AM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
« Metro on Tomcat 6.x | Main | Screencast #Web4:... »

Valid HTML! Valid CSS!

This is a personal weblog, I do not speak for my employer.

--> ajax ajaxworld conf eclipse fitness gem glassfish glassfishday hyderabad india indigo interoperability javaone javaone2008 jax-ws jmaki jpa jruby mac marathon metro microsoft mysql netbeans phobos photography presos railsconf ruby rubyonrails running runninglog runsfm screencast siliconvalleymarathon sun suntechdays swdp tango theserverside totd training traveltips v3 vista wcf web2.0 webservices webtier windows wsaddressing wsit
Locations of visitors to this page

calendar

« July 2008
SunMonTueWedThuFriSat
  
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

Stats

Today's Page Hits: 6307


Total # blog entries: 629
Total # comments: 1784

www.flickr.com
This is a Flickr badge showing public photos from ArunGupta. Make your own badge here.
Add to Technorati Favorites

Last 50