Arun Gupta, Miles to go ...

jMaki: AJAX Framework

In a previous blog, I talked about AJAX. You can read about different AJAX design strategies, their pros/cons and when to use. This blog introduces you to jMaki.

Originally the project, jMaki, started as a wrapper for existing AJAX frameworks giving access to the JavaScript widgets from JSP pages or JSF components. And so the name, jMaki, where "j" is for JavaScript and "maki" is a Japanese word to "wrap" was sufficient. Even the logo for jMaki, a "j" as the cursive foot of the Chinese character meaning wrapper, was self describing. In that role, jMaki provides access to widgets from existing AJAX frameworks such as Dojo, Scriptaculous, Google Web Toolkit and Yahoo UI Library. A jMaki wrapper over several components from a variety of frameworks can be seen in this widget gallery. A more complete collection of widgets, organized by their framework, is available here. In the past few weeks, the project has transformed into a complete AJAX framework that provides a lightweight model for creating JavaScript centric AJAX-enabled web applications using Java (Java Server Pages and Java Server Faces), PHP 5.x, and Phobos (another of Sun's Web 2.0 offering, more on this later).

jMaki framework, as explained earlier, decouples the presentation logic and underlying data using Widget Model, Client Services, Layouts and Client Runtime on the presentation layer (a.k.a. Client Side Components) and Server Side Runtime and XmlHttpProxy on the data layer (a.k.a. Server Side Components). The original intent of the project, wrapper for existing AJAX frameworks, is now served by the Widget Model.

After reading all the details, it's time to try some code. Before you begin, I recommend watching this screen cast that introduces you to jMaki and walks you through the steps of developing a web application using jMaki plug-in in NetBeans. Using the screen cast, here are the steps that I followed:

1. Download NetBeans 5.5.
2. Download the NetBeans Ajax Update Center Module. I preferred the update center module over the jMaki plug-in NBM file (NetBeans module) as that allows me to download any related goodies (such as Phobos plugin) as well.
3. Install the downloaded plug-in following the instructions. The updated AJAX Update Center module screen shot is available here.
4. Create the web application following the steps in screen cast. 
5. NetBeans 5.5 comes pre-bundled with Apache Tomcat  5.5.17. Go to the "Runtime" tab of NetBeans IDE (default short cut is Ctrl + 5), select the "Bundled Tomcat (5.5.17)", right click and select "Start" to start the Tomcat.
6. Just for fun, I added the SuDoKu widget.
7. Once the application is deployed (in step 4) then it can be viewed at http://localhost:8084/WebApplication1 (8084 is the default port, WebApplication1 is context root of your application).

And, with these steps, I could develop a simple rich internet application in few minutes. Once all the configuration is setup, it would take less than a minute to add a pre-built jMaki widget into your web application.  The beauty of using JavaScript is that once the web application is deployed, adding new widgets to the page is drag-drop-save-refresh cycle, there is no separate deployment cycle.

Sang Shin (of JavaPassion.com fame) has created a great hands on lab that walks you through the basics of using jMaki widgets. In a later blog, I plan to talk about how to create a jMaki widget from scratch and wrap a widget from one of the existing toolkits.

Posted by Arun Gupta in web2.0  |  Comments[2]