Using jMaki 1.0 With NetBeans Ruby

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.

  1. 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.

  2. 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).

  3. 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.

  4. 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.

  5. 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
    
  6. 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.

  7. In the Projects window, expand Configuration and double-click routes.rb to open it in the editor.

  8. Add the following line above all the other map.connect entries.
      map.connect '', :controller => 'say', :action=>'table'
    
  9. In the Projects window, expand Public, right-click index.html and choose Delete (or Rename if you would rather rename the file).

  10. In the Projects window, expand Views, expand say, and double-click table.rhtml to open it in the editor.

  11. On the right-side of the IDE is the Palette, as shown below. Expand jMaki Yahoo.



  12. Drag a Button widget from the jMaki Yahoo section and drop it on the file.

  13. Drag and drop a second Button widget.

  14. 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.

  15. Drag a Data Table widget from the jMaki Yahoo section onto the file.

  16. Expand jMaki Dojo and drag a Table widget from that section onto the file.

    Both these widgets use the jMaki Table Data Model.

  17. 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'}
      ]
    }
    -%>
    
  18. 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.

  19. Click the first button to select the first row, and click the second button to select the second row.

  20. 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.

  21. Choose model from the Generate drop-down list, type grid in the Arugments text box, and click OK.

  22. 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.

  23. 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
    
  24. 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.

  25. 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.

  26. 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.

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

  28. 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
      }
    -%>
    
  29. Choose File > Save All from the main menu to save all your changes.

  30. 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.

Comments:

Try as I might, I've been unable to get even the first step working. I can get a lovely page displayed with buttons and tables but I cannot for the life of me get the table to select rows when I press the buttons. I've even used Firebug to try and debug the code but still I see no call to the select method for the table. I noticed a number of typo's in the article but I think I've worked around those. What am I missing?

TIA
Mark

Posted by Mark Gibbons on October 01, 2007 at 07:34 PM PDT #

hi good afternoom i dont know where is the mistake in the code, i mean in the step 6 is the generate, but i cant see the buttons in the page:
http://localhost:3000/say
due to:
undefined local variable or method `table' for

Posted by rodolfo AM on October 05, 2007 at 05:32 AM PDT #

Hi Mark,

I just stepped through this on a fresh installation and it works. I am wondering if you missed the part where you have to edit the :id for each row. I rewrote that part just now to make it more clear and harder to miss. Can you see if that fixes your problem?

Also, can you please add a comment where you note the typos so that I can fix them. That will make it easier for other readers.

Thanks for the feedback.

Chris

Posted by Diva #2 on October 05, 2007 at 08:34 AM PDT #

Rodolfo,

I think I am understanding your problem. Are you saying that when you run it and add "say" to the url, you get an error message?

I modified how to set up the start page. Edit the say_controller.rb file and remove this code:

def index

table

render :action => 'table'

end

Now, complete steps 7, 8, and 9 (which I just added). When you run the app, it should automatically display the table view.

Let me know if this solves your problem. If I did not understand your problem correctly, maybe you could explain in a bit more detail. What is the erroneous behavior or error message that you are seeing, and what step are you on when you see it.

Posted by Diva #2 on October 05, 2007 at 11:32 AM PDT #

I'm a Rails newbie, but I think some of the code at step 26 is incorrect - at least I had to change:
:id => data.id,
:title => data.title .... (etc)

to

'id' => data.id,
'title' => data.title ... etc.

otherwise, I got an empty table when I loaded from a database.
(I didn't use the migration above, but used an existing database, with corresponding changes to the field names.)

Comments?

Posted by novatus on October 06, 2007 at 10:00 PM PDT #

Great post, everything works as advertised.

Posted by Philip Southam on October 08, 2007 at 04:16 AM PDT #

Novatus,

I am not ignoring you...

I am still trying to find the answer.

What is your operating system?

Posted by Diva #2 on October 10, 2007 at 06:48 AM PDT #

Novatus,

It appears that you are using native Ruby instead of JRuby. So, I switched the interpreter setting to use native Ruby 1.8.6-25 with Rails 1.2.3. It still ran ok. I got my software from http://rubyinstaller.rubyforge.org/wiki/wiki.pl.

I ran it on a Windows XP box.

I posted a question in regards to this to the users@ruby.netbeans.org (see http://www.nabble.com/Ruby-on-Rails-question-about-%3Aid-versus-%27id%27-tf4591403s27022.html).
Dudley Flanders replied "In Ruby, hash['id'] and hash[:id] refer to distinct elements. In
Rails, you're often (but not always) dealing with instances of
HashWithIndifferentAccess, which allows hash['id'] and hash[:id] to
refer to the same element. It can be confusing to Rails newbies who
are also new to Ruby. Looking at the code on that page, I would
expect it to work, but if the jmaki_widget method is trying to access
the hash with string keys, that could cause problems. "

His answer doesn't explain why it is working for me but not you. But I think he is putting us on the right track.

According to http://as.rubyonrails.org/classes/HashWithIndifferentAccess.html, "this class has dubious semantics and we only have it so that people can write params[:key] instead of params[‘key’]."

A good article about the difference between symbols and strings, and when to use each is at http://glu.ttono.us/articles/2005/08/19/understanding-ruby-symbols.

So, no answers yet, just more questions. Anyone want to explain which syntax is better--{ :id => data.id,...} versus {'id' => data.id...}--and why?

Posted by Diva #2 on October 11, 2007 at 12:00 PM PDT #

Thanks for the detective work so far. It looks like some peculiarity in my version of Rails, but I haven't customized it at all. I have had similar problems with other Rails code I've written, and haven't been able to solve it.

I don't think this is about my use of an existing database, because I'd be willing to bet that if I used the exact code listed above, it still wouldn't work (on my PC). I haven't tried, so maybe I should, before I put my cash on the table. :-)

BTW, the URL for the Rails doco above should be http://api.rubyonrails.org........

Posted by Novatus on October 11, 2007 at 07:22 PM PDT #

Hi, I was unable to complete your example and that my version of Jruby (1.8) and the version of Rails (1.2.5), are not compatible, it gives me an error in the "output", he sought solution and I failed to correct the problem, if you know of any of this, so thank you, I have the netbeans 6.0 beta 1 ...

Posted by Jose Luis on October 18, 2007 at 03:22 AM PDT #

You wrote:

>I was unable to complete your example and that my version of Jruby (1.8) and the version of Rails (1.2.5), are not compatible,

Question: Are you using JRuby that is bundled with NetBeans or a different one?

Question: Are you using the Rails that is bundled with NetBeans or a different one?

Have you tried using the JRuby and Rails that are bundled with NetBeans (you can also download using the Update Center)

You wrote:
> it gives me an error in the "output",

Please tell me what the error message is.

You wrote> he sought solution and I failed to correct the problem

I don't understand what you are saying.

Also, what is your operating system.

Posted by Diva #2 on October 18, 2007 at 09:24 AM PDT #

Just thought I'd mention that the database name in the command to create it is in lower case but the database file has the name in mixed case. It complained at first about not being able to find the database until I recreated it in mixed case.
Regards
Keith

Posted by Keith Marshall on November 24, 2007 at 04:00 AM PST #

Thanks Keith.

I tested on Windows with MySQL, for which case does not make a difference. According to MySQL, database and table names are case sensitive in MySQL Server on operating systems that have case-sensitive filenames (such as most Unix systems) because MySQL Server maps each database to a directory under the MySQL data directory, and maps tables within a database to filenames in the database directory.

I understand that case also matters with PostgreSQL under Linux.

I modified the tutorial to use a lower-case project name so that the database.yml is correct by default. I think that lower case project names are the convention for Ruby anyway.

Note: When I tested out the steps after the rewrite, the Select button doesn't work for the second part of the tutorial anymore. Is this true for you?

Posted by Diva #2 on November 26, 2007 at 09:56 AM PST #

Hi!i'm a chinese college student!And
i recently have translated this articles into chinese.i'm so sorry to notice you so late!i apologize here!if you have advices or problems,please email me.i will rectify right away.if you don't like us to post your article in our bbs,we'll delete it at once!

Posted by ragnarok on December 07, 2007 at 12:14 PM PST #

i am beginner to ruby on rails ... i am using netbeans 6 for it.... when i run a project i got error 'could not connect to web server - can not show http://locahost:3000/

Posted by Vinayak Pawar on January 29, 2008 at 01:07 AM PST #

Hi Vinayak,

Are you by any chance using Mongrel? If so see http://wiki.netbeans.org/RubyFAQ#section-RubyFAQ-HTTPServers

Click on the link for Mongrel.

In any case, open your browser and type the url in the browser.

Please feel free to use the users alias to ask questions. See http://wiki.netbeans.org/RubyCommunityInformation

Posted by Diva #2 on January 31, 2008 at 09:02 AM PST #

Really happy with how easy the JMaki widget is to use however I am really struggling to override the default css styles in particular the ability to set individual column width.

Any help would be appreciated...

Posted by Grant McLaren on April 28, 2008 at 07:29 AM PDT #

Really happy with how easy the JMaki widget is to use however I am really struggling to override the default css styles in particular the ability to set individual column width.

Any help would be appreciated...

Posted by Grant McLaren on April 28, 2008 at 07:30 AM PDT #

Grant,

Am on vacation now, then comes JavaOne, so can't try to help right now. Can you be more specific as to what you are trying to do?

Posted by diva #2 on April 28, 2008 at 10:39 PM PDT #

Post a Comment:
Comments are closed for this entry.
About

divas

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
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