Friday Dec 14, 2007

Five-Minute Ruby on Rails jMaki Tutorial

If you have installed the NetBeans IDE support for Ruby and you are interested in integrating jMaki in your Ruby on Rails projects, here is a five-minute tutorial that will get you started. In this tutorial, you add a Yahoo data table to a Ruby on Rails view. (If you have not yet installed the NetBeans IDE 6.0 or if you need to add Ruby support to your NetBeans IDE, learn how to here.)


  1. If you haven't installed the jMaki plugin for the NetBeans IDE, it takes just a minute. Select Tools > Plugins from the main menu, select jMaki Ajax Support, click Install and follow the instructions.

  2. Follow the steps in the "Working With Ruby on Rails Files" section in the Getting Started With Ruby and Rails. This should take just a few minutes as no database is involved. Finish all the steps up to but not including the "Practicing What You Have Learned" subsection. It is important that you add the routing code (Code Sample 10) to the routes.rb file and delete the Public > index.html file.

    Note: If you already have done these sections, but added the jMaki plugin after you created the project, you need to create a new project in order to have jMaki included.

  3. Edit the Views > item > index.rhtml file.

  4. Remove the <table> including the nested <tr> and <td> tags. You will replace this HTML table with the Yahoo Data Table.

  5. Choose Window > Palette from the main menu to view the Palette window.

  6. Expand the jMaki Yahoo section in the Palette, then drag and drop the Data Table onto the index.rhtml.

  7. Replace the jmaki_widget tag with the following code:

    <%= jmaki_widget 'yahoo.dataTable',
    :value =>
    {:columns => [
         { :label => 'Id', :id => 'id'},
         { :label =>'Type', :id => 'type'},
         { :label => 'Price', :id => 'price'},
         ],
      :rows => @items
      }
    -%>
    


  8. Click the small x button in the bottom right corner of the IDE to stop the WEBrick server.

  9. Click the Run Main Project button and the browser should display a nice Yahoo table that contains the item data.

Friday Aug 10, 2007

jMaki 0.9.7: Using the Yahoo Tabbed View in a NetBeans Visual Web Application

Yesterday, in our blog entry about using the Spry Accordion widget, we mentioned that it uses the same data model as the tabbed view and that you would swap out widgets. Today I will show you how simple it is to do so.

First, complete the steps from yesterday's mini-tutorial.

Next, open your Base jMaki project, and drag a Yahoo Tabbed View widget into index.jsp. Run the project to ensure that all the necessary files are copied into the  resources/yahoo folder.

Copy the resources/yahoo folder from the Base jMaki project and paste it into the resources folder of your Visual Web project.

Click JSP to view the JSP tags for Page1. Replace the following line:

<a:widget name="spry.accordion" value="#{SessionBean1.tripContent}"/>

with:

<a:widget name="yahoo.tabbedview"
  value="#{SessionBean1.tripContent}" />

Now click the Run Main Project button. You should see a tabbed view instead of the accordion.

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