Miles to go …

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 which had a consistent stream of visitors on both the days. In case you are interested, here is what I presented:

• What is jMaki ?
• Running Mashup with jMaki
• Displaying RSS feed in jMaki widgets
• jMaki on Rails

The videos of other demos shown at the pod will be made available on this blog in the next few days.

I could not attend any of the sessions except some of the keynote sessions on second day. Of all the keynote videos the one I’d like you to watch is Overcoming Bias by Prof Robin Hanson. The professor, an Economic Theorist, talks about how cognitive bias cause software projects to slip. Some of the quotes from his talk are "Be more honest about writing code" and "If you really care about truth, you’ll work at it and try to overcome bias".

Here are some pictures.

Technorati: oscon sun jmaki glassfish opensolaris openjdk

A jMaki widget in a page can communicate with:

• Other widgets on the same page using publish/subscribe mechanism
• Services in the application domain using service="data.jsp".
• Services outside the application domain using proxy (xhp).

This blog entry explains how external services are accessed by jMaki widgets.

This image shows a Web application with multiple pages (Page1, Page2, Page3) where one of the page (Page2) contain at least one jMaki widget. For a BlockList widget, the generated code fragment looks like:

<a:widget name="jmaki.blockList" value="[
    {title : 'jMaki Project Home', link : 'https://ajax.dev.java.net', description : 'Where to go for the latest jMaki.' },
    {title : 'jMaki Widgets Home', link : 'https://widgets.dev.java.net', description : 'The source for the latest jMaki widgets.' },
    {title : 'jMaki-Charting Home', link : 'https://jmaki-charting.dev.java.net', description : 'Enables complex charts rendered on the client in any modern browser.' }
]" />

This code fragment populates the widget with static data specified in the value attribute. In order to populate the widget with data from an external service, such as an RSS feed, the value attribute needs to be replaced with service="/xhp?id=rss". Let me explain how that works.

If any page consists of a jMaki widget then the jMaki runtime is bundled with the application. The runtime consists of jmaki.xhp.XmlHttpProxyServlet class that maps to "/xhp" URL pattern within the application context. The id specified in the URL, "rss", is configured in a configuration file named "xhp.json". This file consists of a list of default external services that can be accessed by the widgets in a page. Each entry in this file can can be specified using up to 5 different parameters:

• ID (required parameter, unique identifier for the entry)
• URL (required parameter, location of external service)
• Parameters (optional parameters specifying the default values passed to URL)
• API Key (optional parameter to invoke the service with a specific key)
• Stylesheet (optional parameter to process the response)

So if BlockList widget needs to access the RSS feed, then the code fragment needs to look like:

<a:widget name="jmaki.blockList" service="/xhp?id=rss" />

The corresponding entry in xhp.json is:

{"id": "rss",
    "url":"http://weblogs.java.net/blog/ludo/index.rdf",
    "xslStyleSheet": "rss.xsl"
}

The tag and the default entry tells the jMaki runtime to fetch the RSS feed from http://weblogs.java.net/blog/ludo/index.rdf, apply the ‘rss.xsl‘ stylesheet (that understand the multiple RSS/Atom formats) to the received response and convert the data into into a common JSON data format of the type "dataType" : "jMakiRSS". The BlockList widget knows how to convert jmakiRSS data to its specific data model.

This approach allows all widgets, that take a "value" attribute, to consume data from external services.

Technorati: jmaki rss services web2.0

What is jMaki ?

If you have been following my blog, then you know it already. But a picture is worth a thousand words so here it is.

One-liner: jMaki is a light-weight framework for building Web 2.0 applications. The "j" is for JavaScript and "Maki" means to wrap in Japanese. The logo is a Kanji symbol that means to wrap.

Three key points about jMaki:

1. Toolkits – It allows to create Ajax-enabled widgets and provide a JavaScript wrapper over widgets from existing toolkits such as Dojo, Yahoo, Script.acualo.us and many others. The key advantage is that it provides a standard data model for each widget such as DataTable, Tree and Menu. This shields the developer from dissimilar data models of these widgets from different toolkits.
2. Languages – jMaki-enabled web applications can be deployed on the Java platform, for example Java Server Pages (JSP) or Java Server Faces (JSF). They can also be deployed on Phobos - a server-side scripting environment that runs on the Java platform. And jMaki widgets can be embedded in PHP or Rails applications. It provides a natural format to the developers’ language of choice.
3. Tools – jMaki comes with NetBeans and Eclipse plug-ins that allow you to drag/drop widgets in a page and generate the appropriate code fragments. And for non-IDE developers, there is an Ant task that allows you to create a project with the appropriate library dependencies.

This is my "speedgeeking" @ OSCON 2007.

And for those with a "serious" interest, I’m showing how some of the cool mashups are empowered by jMaki. Couple of them are available as screencasts at:

• Display RSS feed in jMaki widgets (running log mashup)
• jMaki: Visually appealing Views for Rails

And more videos will be available later.

Technorati: jmaki netbeans oscon oscon07

jMaki provide a flexible framework to create mashups very easily. Today, I’m starting a series of screencasts that will focus on this aspect of jMaki. The first one in the series is a very simple mashup that pulls RSS feed from a blog entry and display it in two different widgets, without any extra effort. The NetBeans IDE is used for tooling and the jMaki-enabled Web application is deployed on GlassFish.

Enjoy it here!

The key message is jMaki + NetBeans IDE + GlassFish provides a complete platform for creating and deploying powerful mashups, quickly and effectively!

Technorati: jmaki mashups netbeans screencast glassfish jmakimashups

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. ‘@t
able_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