Insider Scoop From the Tutorial Divas

« September 2007 »
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
Today

The jMaki 1.0 framework, with support for Java, PHP, and Ruby, was released yesterday. Last week, Arun Gupta posted a screencast showing how to use jMaki wrappers of button and table widgets from Dojo and Yahoo frameworks in a Ruby on Rails application built using the NetBeans 6.0 Beta IDE.

With Arun's permission, I am supplying the steps to recreate a similar jMaki on Rails project. To save steps, I changed the order a bit. If you don't already have NetBeans Ruby Support, go to the Installing and Configuring Ruby Support tutorial for instructions.

Before you begin, create the database for this Rails application. You need a database server that is supported by JRuby, such as MySQL, Java DB, PostgresSQL, Oracle, or HSQLDB. Add a database instance named rorjmakitables_development. For example, for MySQL, start the server and type the following at a command prompt.
```
mysqladmin -u root -p create rorjmakitables_development
```
If you don't need a password, omit the -p.
If you haven't already, download the jMaki NetBeans plugin (This is org-netbeans-modules-sun-jmaki.nbm. The installer tells me it is version 1.6.11, and the info.xml in the NBM says its release date is Sept. 25, 2007).
To install it into the IDE, complete the following steps:
1. In the IDE, choose Tools > Plugins from the main menu.
2. Click the Downloaded tab and click Add Plugins.
3. Navigate to and select the downloaded org-netbeans-modules-sun-jmaki.nbm module, then click Open.
4. Click Install, and click Next.
5. Select the radio button to accept the license agreement and click Install.
6. Select Restart IDE Now and click Finish.
To create a new Ruby on Rails project, complete these steps:
1. Right-click on a blank spot in the Projects window, and choose New Project from the pop-up menu.
2. Select Ruby in the Categories pane, select Ruby on Rails Application in the Projects pane and click Next.
3. If you have other Ruby installations in your path besides the bundled JRuby installation, you are asked to choose a Ruby interpreter. This dialog only pops up the first time the IDE needs to access the interpreter. For this tutorial, choose JRuby and then click Close. Note that this choice affects all Ruby projects. You can switch this setting whenever you want. See Installing and Configuring Ruby Support to learn how.
  
  If you have configured the IDE to not use JRuby, please use the Options wizard to switch back to JRuby for this tutorial, as described in Installing and Configuring Ruby Support.
4. Type rorjmakitables, and accept the default location or, optionally, enter a different path.
5. Choose a Database from the drop-down list. Your choice specifies how to set up the database.yml file. This tutorial uses MySQL.
  
  At the time of this writing, Java DB is not on the list, but it probably will be added later. So, if you are using the Java DB, and you don't see it on the list, don't bother selecting a database. You can edit the database.yml file instead. See Using Database Servers With JRuby for instructions.
6. With JRuby, if you don't use MySQL, you must select the Access Database Using JDBC checkbox. This causes the project to modify the environment.rb configuration file to use the ActiveRecord-JDBC gem. So, unless you are using MySQL, check this box.
7. Click Next.
8. Because you are using the bundled JRuby, which includes Rails, the wizard shows that Rails is already installed. The wizard gives you the option of updating the installed version, but let's skip that.
  
  Click Finish.
  
  The Generate Rails Project tab in the Output window shows all the folders and files that the IDE creates.
The IDE opens the database.yml file in the editor. Set the username for the development configuration, as shown below. If your database requires a password, set the password too.
```
  development:
  adapter: mysql
  database: rorjmakitables_development
  username: root
  password: root_password
  host: localhost
```
To add a controller, right-click the rorjmakitables project node in the Projects window, and choose Generate. Select controller from the Generate drop-down list, set the Name to say and set the View to table, then click OK.
In the Projects window, expand Configuration and double-click routes.rb to open it in the editor.
Add the following line above all the other map.connect entries.
```
  map.connect '', :controller => 'say', :action=>'table'
```
In the Projects window, expand Public, right-click index.html and choose Delete (or Rename if you would rather rename the file).
In the Projects window, expand Views, expand say, and double-click table.rhtml to open it in the editor.
On the right-side of the IDE is the Palette, as shown below. Expand jMaki Yahoo.
Drag a Button widget from the jMaki Yahoo section and drop it on the file.
Drag and drop a second Button widget.
Replace the widget code fragments with the following code.
```
<%= jmaki_widget 'yahoo.button',
  :value => { :label => 'Select 1',
  :action => { :topic => '/jmaki/table/select',
    :message => { :targetId => '1' }
  }
} -%>
<%= jmaki_widget 'yahoo.button',
  :value => { :label => 'Select 2',
  :action => { :topic => '/jmaki/table/select',
    :message => { :targetId => '2' }
  }
} -%>
```
These buttons use the jMaki publish/subscribe mechanism to publish to the /jmaki/table/select topic, which you will program two table widgets to listen to. The table widgets will select either the first row or the second row, depending on which button is clicked. For more details on how to use publish/subscribe, see Carla Mott's Widgets Talking To Widgets blog entry.
Drag a Data Table widget from the jMaki Yahoo section onto the file.
Expand jMaki Dojo and drag a Table widget from that section onto the file.

Both these widgets use the jMaki Table Data Model.

Add :subscribe=> "/jmaki/table", to each table widget, as shown in bold below, to make both tables listen to all the /jmaki/table topics.

(Important)Also, change the row data to include numeric ids, as shown in bold, so that they match the target ids in the button code. For the first row, you have to add :id= > '1',. For the second row, which already has the :id argument, simply change bar to 2.

<%= jmaki_widget 'yahoo.dataTable', :subscribe=> "/jmaki/table",
  :value =>
  {:columns => [
    { :label => 'Title', :id => 'title'},
    { :label => 'Author', :id => 'author'},
    { :label => 'ISBN', :id => 'isbn'},
    { :label => 'Description', :id => 'description'}
  ],
  :rows => [
    { :id=> '1', :title => 'Book Title 1', 
          :author => 'Author 1', :isbn => '4412', 
          :description => 'A Some long description'},
    { :id => '2', :title => 'Book Title 2', 
          :author => 'Author 2', :isbn => '4412', 
          :description => 'A Some long description'}
  ]
}
-%>
<%= jmaki_widget 'dojo.table', :subscribe=> "/jmaki/table",
  :value =>
  {:columns => [
    { :label => 'Title', :id => 'title'},
    { :label => 'Author', :id => 'author'},
    { :label => 'ISBN', :id => 'isbn'},
    { :label => 'Description', :id => 'description'}
  ],
  :rows => [
    { :id=> '1', :title => 'Book Title 1', 
          :author => 'Author 1', :isbn => '4412', 
          :description => 'A Some long description'},
    { :id=> '2', :title => 'Book Title 2', 
          :author => 'Author 2', :isbn => '4412', 
          :description => 'A Some long description'}
  ]
}
-%>

Click the Run Main Project button on the main menu (the green arrow). This starts the server and opens the table view in a browser.
Click the first button to select the first row, and click the second button to select the second row.
In order to display database data in the table, we must first create a model. In the Projects window, right-click the project node, and choose Generate from the pop-up menu.
Choose model from the Generate drop-down list, type grid in the Arugments text box, and click OK.
To define the model's data structure, expand Data Migrations in the Projects window, then expand migrate and double-click 001_create_grids.rb to open it in the editor.

Replace the up method with the code shown in bold.

class CreateGrids < ActiveRecord::Migration

 def self.up
    create_table :grids do |t|
      t.column :title, :string
      t.column :author, :string
      t.column :isbn, :string
      t.column :description, :string
    end
    Grid.create(:title=> 'Marathon',
       :author=> 'Jeff Galloway',
       :isbn=> '0936070250',
       :description => 'A running book for everybody');   
    Grid.create(:title=> 'The Runners Bible',
       :author=> 'Marc Bloom',
       :isbn=> '0385188749',
       :description => 'How to train, race, and get in shape');   
  end

  def self.down
    drop_table :grids
  end
end

To create the database table and populate it with the two rows of data, right-click the project node in the Projects window and choose Migrate Database > To Current Version from the pop-up menu.
Now you can define a variable that contains the data from the database table. In the Projects window, expand Controllers and double-click say_controller.rb to open it in the editor.

Replace the table definition with the following code shown in bold.

class SayController  < ApplicationController

  def index
    table
    render :action => 'table'
  end
 def table
    @rows_data = []
    Grid.find_all().each do |data|
      @rows_data  << { :id => data.id,
        :title => data.title,
        :author => data.author,
        :isbn => data.isbn,
        :description => data.description
      }
    end
  end
end

The above code defines the rows_data variable and initializes it to an empty array. It uses the active record to find all the rows from the database and, for each row, add a hash of the fields to the rows_data array.

Return to the table.rhtml view by right-clicking in the editor and choosing Navigate > Go To Rails Action or View.

Replace the static rows data in the table fragments with the @rows_data variable as shown in bold below.

<%= jmaki_widget 'dojo.table',
:value =>
{:columns => [
     { :label => 'Title', :id => 'title'},
     { :label =>'Author', :id => 'author'},
     { :label => 'ISBN', :id => 'isbn'},
     { :label => 'Description', :id => 'description'}
     ],
  :rows => @rows_data
  }
-%>
<%= jmaki_widget 'yahoo.dataTable',
:value =>
{:columns => [
     { :label => 'Title', :id => 'title'},
     { :label => 'Author', :id => 'author'},
     { :label => 'ISBN', :id => 'isbn'},
     { :label => 'Description', :id => 'description'}
     ],
  :rows => @rows_data
  }
-%>

Choose File > Save All from the main menu to save all your changes.
Go back to the browser and refresh the page. The data now comes from the database table.

There you have it! To learn more about jMaki, go to www.jmaki.com. To learn more about NetBeans support for Ruby, go to wiki.netbeans.org/wiki/view/Ruby.