Miles to go …

jMaki Webtop is a light-weight Mashup Framework based on jMaki widgets. The webtop was demonstrated at Ajax World East 2008 keynote. The key features are:

• Simple & easy to use (runs in browser)
• Extensible (add your own widgets & gadgets)
• Manageable (create users)
• Persistent (Google Gears on the client, Database on the server)
• Shared (read-only views can be shared with other users)

A 30-minute video of the Ajax World keynote session is available here and shows webtop in action The keynote deployed the webtop as a WAR file on GlassFish. A live PHP version of webtop is available at jmaki.com/webtop.

You can download the entire source code from the subversion repository and run it yourself.

Technorati: conf ajaxworld newyork glassfish jmaki

Last Friday jMaki team, at Sun Microsystems, arranged a jMaki Day for Sun-internal audience. The day was planned to introduce the technology and explains it’s nuts and bolts with hands-on experience. Even though nobody outside Sun could attend it, but all the presos and lab material is available here. 

The morning sessions gave an overview of jMaki and included: 

• Sun, Web 2.0 and jMaki by Arun Gupta (me)
• Introduction to jMaki by Carla Mott
• Phobos and jMaki by Roberto Chinnici
• jMaki Tooling: State of Union 2007 by Ludovic Champenois
• jMaki State of Union 2007 by Greg Murray

The afternoon was BYOL (Bring Your Own Laptop) hands-on-labs and discussion with the team. It included:

• jMaki Applications – Doris Chen
• jMaki Recipe for building Web 2.0 Apps – Carla Mott
• Mashing it up with jMaki – Greg Murray

The slides for the morning session and hands-on-labs are available. Here are some pictures:

Greg Murray	Attendees	Attendees	Carla Mott
Roberto Chinnici	Doris helping with mic	Ludovic Champenois	Greg Murray
Lunch	Lunch	Hands-on-labs	Hands-on-labs

You can get a flavor of these sessions and labs at Sun Tech Days. 

You can also view a collection of samples (run or download them) put together by Sun’s Web 2.0 team. You can also look for a collection of jMaki samples here. All of these samples can be run on GlassFish.

Here are some important jMaki links:

• Value proposition
• Overall framework architecture and features
• Basic Application Structure
• Creating jMaki widgets

Please send any feedback on slides and hands-on-labs to dev@ajax.dev.java.net.

_{Technorati: jmaki ajax netbeans glassfish presos}

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.

_{Technorati: AJAX Sun Web 2.0 jMaki}