Skip to main content

Building web 2.0 apps with jMaki

Posted by carlavmott on January 3, 2007 at 10:03 PM PST

There have been many updates to jMaki since this blog has been written. See my latest blog Building we2.0 apps with jMaki made even easier which shows how to build the same app described below using jMaki .9.7 release.

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.

I will use the NetBeans plugin to build the app as that makes life even easier but the plugin is not required. I have included the tags I used in the application below, so regardless of the environment you are familiar with, you can build this app too. Also see the JSP tutorial for more information on building an application without an IDE.

The web application I will build uses the standard layout template, the Dojo fisheye widget for navigation, the Yahoo Geocoder and Google map widgets. The fisheye widget comes with default images of some of the contributors to jMaki which I will use even if other images would better fit the application.

Start by downloading the NetBeans plugin 1.6.3 which supports jMaki 1.0 Beta 2. If you have not used the jMaki plugin for NetBeans see this page for pointers to some screencasts to see how to add the plugin and create a simple web app.

In NetBeans, create a new project that is a web application, click next, just use the default web application name for this project, click next, select the jMaki framework and click finish. First thing to do in this project is to create a new file that is a stylized JSP page and call it "index" and select the standard layout. This layout has a a menu bar on top, a left side bar I'll use for navigation and a main content area in the center of the page. See below for details.

layout.gif

Look at the "index.jsp" page that is generated for you by NetBeans. You will see that it contains all the CSS rules needed to display such a page. Now we need to add content to the div tags. In this application I will use the Dojo fisheye widget in the left side bar. Using the jMaki palette on the right drag and drop the fisheye widget to the page in the div tag for the left side bar. Highlight the widget and click on the jMaki item on the menu bar. This will bring up the component editor. For this application I want the fisheye widget to have a verticle orientation and the labels to be displayed on the right of the image. Make those changes using the component editor and save the file.

index.jsp.gif

Next create a new JSP page called "mapit" and in that page add two widgets, the Yahoo Geo coder widget and the Google Map widget and save that file. Note that you will not need the JavaScript code that is generated when the widget is dropped in the page. I have therefore removed it from the application here.

mapit.jsp.gif

So far I have the pieces of the application and now I need to put them together. There are two parts to this. First, in the "mapit.jsp" page I want the user to type a location in the text box and a map of that location to appear below it. This will be done automatically (no extra code needed) because of the sample JavaScript code that is in the glue.js file provided with the jMaki release. You will find the glue.js file in the resources directory of your web app. Glue code is specific to an application so you can modify what is there or provide action handlers as needed by your application. Because each of the widgets in jMaki pubishes a topic when a user performs some action, developers only need to write action handlers for the events they are interested in. In the case of the Yahoo Geocoder widget, when the user clicks on the button an event is published to the "/yahoo/geocoder" topic along with the latitude and longitude of the specified location. The glue code contains the action handler for that topic. That action handler gets the location data from the Yahoo Geocoder and passes it to any Yahoo or Google maps declared in the page. In this example, I used the Google map widget. See the glue code page for more details on what is happening.

Next we want to load "mapit.jsp" in the main content area of our web app when a user selects the first element in the fisheye widget. This is done behind the scenes using the injector feature. Go back to the index.html file and add the jMaki dcontainer widget to the main content div. By simply adding the dcontainer widget to that section it it tells jMaki to load any JavaScript or CSS content from a page refered to by a url to the current page (in this case in the main content div). Since the "mapit.jsp" page uses Google maps we must use the iframe property on the dcontainer widget. This is because google maps uses document.write when rendering the page which could overwrite the content of the current page so we need to put the widget in an iframe like container for the rendering to happen correctly.

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

Finally, to the fisheye widget add the url attribute referring to the "mapit.jsp" page to the first item in the widget. This tells the injector code which page to load in the main content area. Other widgets such as the Dojo tree and jMaki menu have a url attribute for the same purpose.

 <a:ajax name="dojo.fisheye" args="{labelEdge:'right', items:[{'iconSrc':'https://ajax.dev.java.net/images/blog_murray.jpg','url':'mapit.jsp',
                    'caption':'You are here!'},{'iconSrc':'https://ajax.dev.java.net/images/chinnici.jpg', 'url': 'table.jsp', 'caption':'test3'},
                    {'iconSrc':'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg','caption':'test4'}], orientation:'vertical'}"/>

The fisheye widget has the url to the page and now needs to broadcast that url to the dcontainer. To do that add the following code to the glue.js file. Note that this is similar to what was done in the glue.js file for the Yahoo Geocoder described above.

/* Programatically Register the glue */
jmaki.addGlueListener({topic : "/dojo/fisheye",action: "call", target: { object: "jmaki.carla",functionName: "fishEyeEvent"}});

jmaki.carla = {

    fishEyeEvent : function(args) {
       alert("sending out dcontainer event to load the url: " + args.target.url);
       jmaki.publish("/jmaki/dcontainer", args.target.url);
    }
}

When the user clicks on the first item it will broadcast an event including the url to the page should be loaded. The dcontainer in the main content area is listening for such events and will load the page there.
Save all changes and select run to build and deploy the application. The web application should come up in a browser.

Click on the first item in the fisheye and you will see the "mapit.jsp" page loaded in the main content area. Next type in a location to the Yahoo Geo coder and click the Go button. A map of that location will be displayed.

app.gif

The only thing left is to resize the containers. It turns out that the fisheye widget doesn't automatically resize to fit the container. To fix this edit the jmaki-standard.css file which contains the application page CSS code for the standard layout we selected. I modified the file as follows.

.content {
  margin: 0 0 0 100px;
  border: 1px solid #000000;
}

.leftSidebar {
  float: left;
  width: 50px;
  height: 150px;
  border: 1px solid #000000;
}

Make the above changes and save. Reload the page in your browser and you should see the left side bar now fits the fisheye widget. Notice that the app behaves correctly when you resize your page. Now it turns out that if you look at the fisheye widget you will see that I have added a url attribute to the second item in the widget. In that case, I want to bring up a table when that item is clicked. The glue code that I added for the fisheye widgets handles both cases because it simply broadcasts the url it has. This way you can load either page in the center area depending on what the user clicks.

To complete the application create another JSP page called "table" and add the code below. Here I added an editable Dojo table which allows you to sort the contents by clicking on the different columns.

 <a:ajax name="dojo.table"
                value="{columns: { 'title' : 'Title', 'author':'Author', 'isbn': 'ISBN #', 'description':'Description'},
        rows:[['JavaScript 101', 'Lu Sckrepter','4412', 'Some long description'], ['Ajax with Java', 'Jean Bean','4413', 'Some long description']]}" />
       

Save the "table.jsp" file and reload the application in your browser. This time click on the second item in the fisheye widget and see the table displayed.

The jMaki framework allows you to quickly create complete web 2.0 applications that are based on standards. We think that this is a very useful tool and are always happy to hear your feedback.

Related Topics >>