Skip to main content

Building web 2.0 apps with jMaki made even easier

Posted by carlavmott on August 9, 2007 at 12:19 PM PDT

Since I posted a blog last December on building web 2.0 apps with jMaki, several new features have been added to make building the app much easier. This blog shows the new way to build the same app using the new features.

jMaki is a light weight framework for developing JavaScript centric Ajax-enabled web applications using Java, Phobos and PHP. In this blog I will show how to use one of the layout templates, various widgets, the dynamic container and the glue feature that are part of jMaki to quickly build a web 2.0 application.

Again I will use NetBeans to build the application but it is not required. The app will use a Dojo fisheye widget to drive the content of the page just like before. Let's get started.

You will need jMaki .9.7 (RC2) release or later of jMaki. This is supported by the NetBeans 1.6.9.9.9.5 and Eclipse plugins for jMaki.

Create a web application in Netbeans and select the default page layout.

layout.gif

In the 'left side bar' drag and drop the Dojo fisheye widget.
Set the orientation of the fisheye widget to be vertical by adding the following to the tag.

args="{ orientation:'vertical'}"

The entire tag should look as follows:

    <div class="leftSidebar">
                  
                   
      <a:widget name="dojo.fisheye"  args="{ orientation:'vertical'}"
               
      value="[{iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg',
       label : 'You are here!',
       action : { topic : '/foo/select', message : {targetId : 'bar'}}
                              },
       {iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg',
       label : 'test3'},
       {href : 'http://jmaki.com', iconSrc:'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg',
       label : 'test4'}
       ]"/>
                   
                   
    </div>

Notice that now we have action properties in the widgets. See Greg's blog about actions for more information. action properties are used to publish information such that other widgets can consume it. It simplifies widget to widget communication because it makes use of the publish/subscribe mechanism that is already part of jMaki. The action property can set a topic for the element and a message or payload that is passed along. In previous implementations of jMaki the url property was published to a topic. Now we set the property we want to pass along. See the model pages for the events and payloads expected by the various widgets. You'll see how to use this shortly.

Create the page which is to be loaded when we click on an icon. This step has not changed.

mapit.gif

Add the geocoder and the google map widgets to the page and save.

So far nothing has changed from what we did before but here is where things get interesting. Recall that we want to use the fisheye widget to load other web pages. Specifically we want to click on an image and load a page based on the image that was clicked. In other words, we want to connect the action of clicking on an image in the fisheye widget to loading the map in the main content area. To do this we will use the action property and now we don't need to write any glue code. Using action in this way works because we know the url that we want loaded and that url is the same each time that image is clicked. We are not doing additional processing such as determining the url to publish so we really don't need to write any JavaScript. That's right, the easy things just got easier. So change the fisheye widget to use action to publish to a topic the url that is to be loaded. The code looks like:

 <a:widget name="dojo.fisheye" args="{ orientation:'vertical'}" value="[ 
                              {iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg',
label : 'You are here!',
action : { topic : '/foo/select', message : {targetId : 'bar'}} },
  {iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg',
  label : 'test3',


  action: {topic : '/jmaki/dcontainer', message:   'mapit.jsp'}},


  {href : 'http://jmaki.com', iconSrc:'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg',
      label : 'test4'}
      ]"/>

This means that when the user clicks on the second image; the page with the map is loaded. This is done through the action property which publishes mapit.jsp as the message or payload to the topic /jmaki/dcontainer. Now we need a dcontainer widget that is listening or subscribed to this topic. The dcontainer widget knows what to do will a payload containing just a url in it. Previously we did all this in the glue code. We had a handler which extracted the url property from the fisheye widget and published it to another topic. Again the dcontainer was listening to that topic knew what to do with the url and everything worked. The action tag allows us to specify the topic to publish to and the contents of the payload so no additional code is necessary.

The last step to building the app is to add the dcontainer widget to the main content area.

  <a:widget name="jmaki.dcontainer" subscribe="/jmaki/dcontainer" 
   args="{iframe : 'true'}"/>
                   

As before the topic that the dcontainer is listening to must be the same as the one the fisheye widget is publishing to. We now use the subscribe attribute on the widget tag to assign topics. Previously we set topics in the args attribute. That was changed so that there are publish and subscribe attributes on the tag. Widgets can subscribe to more than one topic though only publish to one. Finaly, since we are loading a page which has Google maps we need to set iframe property to true for the page to render correctly.

That's it! No need for Glue code because the url we pass is not calculated but static. The underlying publish and subscribe mechanism handles delivering the data to the widgets and the widgets all handle a set of the payloads correctly so simple operations are trivial to code.

In the next, blog I will show how use actions and glue code to load data dynamically.

Related Topics >>