Skip to main content

jMaki on Rails - Updated for NetBeans 6 M10

Posted by arungupta on July 23, 2007 at 11:20 AM PDT

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
    href="https://ajax.dev.java.net/files/documents/3115/41646/org-netbeans-modules-sun-jmaki.nbm">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>:



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



      &lt;%= @content_for_layout %&gt;
    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<br>
      &nbsp; create_table :grids do |t|<br>
      &nbsp; &nbsp; t.column :company, :string<br>
      &nbsp; &nbsp; t.column :price, :float<br>
      &nbsp; &nbsp; t.column :change, :float<br>
      &nbsp; &nbsp; t.column :percent_change, :float<br>
      &nbsp; &nbsp; t.column :last_updated, :string<br>
      &nbsp; end<br>
      end&nbsp;
    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&gt; use jmaki_ror_development;<br>
        		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' );<br>insert into grids values (2, 'B Inc', 29.01, 0.42, 1.47, 'Feb 1, 2007,
        10:00am' );<br>insert into grids values (3, 'C Group Inc', 83.81, 0.28, 0.34, 'Mar 1,
        2007, 10:00am' );<br>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:



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



        def yahoo<br>
        &nbsp;&nbsp;&nbsp; @table_data = []<br>
        &nbsp;&nbsp;&nbsp; Grid.find_all().each do |data|<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; @table_data
        &lt;&lt; [ data.company, data.price, data.change,
        data.percent_change, data.last_updated]<br>
        &nbsp;&nbsp;&nbsp; end<br>
        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
href="http://blogs.sun.com/arungupta/entry/database_enabled_ror_war_on">these
instructions.

Technorati: href="http://technorati.com/tag/jmaki">jmaki href="http://technorati.com/tag/rubonrails">rubyonrails
ror
netbeans
mysql
glassfish

Related Topics >>
Blog Links >>