Jennifer's Weblog

Using a jMaki Widget in a Phobos Application

Last week I blogged about how to use the new publish/subscribe mechanism in jMaki to handle an event of the jMaki fisheye widget. To demonstrate this, I created an application that uses the fisheye widget to display bios of some of Sun's engineers.

This week, I'll describe how I used the jMaki fisheye widget to implement the same use case in a Phobos application. You can find this example in the apps/bioFisheyeWidget directory of the Phobos workspace.

The Phobos project is focussed on building a web application framework that allows you to develop your web applications with a scripting language. Just as you can add jMaki widgets to web applications built with JSP technology, you can add jMaki widgets to web applications built with Phobos.

Here again is a screenshot from the web application I described last week:

To implement this web application in Phobos, I performed these steps:

1. I checked out the jMaki and Phobos projects and built them, as described in Building a Phobos Distribution.
2. I created my application's directory structure according to the Phobos project's conventions. See Your First Phobos Application for more details. You can also refer to my example, called bioFisheyeWidget, located in the apps directory of your Phobos installation.
3. I added the images for the fisheye into the bioFisheyeWidget/static directory.
4. I created a script called index.js in the bioFisheyeWidget/application/script directory. What this script does is it forwards to the controller, which handles the rendering of the view. Here is the index.js file:

   library.httpserver.sendRedirect(library.httpserver.makeUrl("/fisheye"));
   

5. I created the controller script, called fisheye.js inside the bioFisheyeWidget/application/controller directory. It creates the Fisheye controller object, which renders the view. Here are the contents of fisheye.js:

   library.common.define(controller, "fisheye", function() {
       this.Fisheye = function() {
           this.index = function() {
               library.view.render("fisheye.ejs");
           };
       };
   });
   

6. Finally, I created the view script, called fisheye.ejs and added it to the bioFisheyeWidget/application/view directory. It is just like¹ the JSP page from the application I blogged about last week, except for one thing: Instead of using the custom ajax tag, you need to call the jmaki.insert function provided by Phobos to add the widget to the page:

   <% library.jmaki.insert({component: "dojo.fisheye", args:{items:[
                {iconSrc:'JayashriVisvanathan.jpg',caption:'Jayashri', index:1},
                     {iconSrc:'chinnici.jpg',caption:'Roberto',index:2},
                     {iconSrc:'blog_murray.jpg',caption:'Greg',index:3}]}}); %>
   </p>
   </div>
   

That's it! For an introduction to the Phobos architecture, see the document, An Overview of Phobos. See the tutorial for more information on building Phobos applications.

1: There is one other difference between fisheye.ejs and the JSP page I described last week: In fisheye.ejs, I use double quotes around the response text and don't escape the single quotes. After you check out the example code, you can compare the JSP page with the view script.

Posted at 08:01PM Aug 14, 2006 by jenniferb in Sun  |  Comments[39]