Skip to main content

jMaki: AJAX Framework

Posted by arungupta on December 13, 2006 at 11:11 AM PST

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
framework
s 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.

Technorati: AJAX Sun
Web 2.0 jMaki

Related Topics >>