Skip to main content

Getting started with jMaki

Posted by manveen on May 16, 2007 at 10:51 AM PDT

There has been quite some buzz about jMaki and Web 2.0 this JavaOne. There were atleast 7 or 8 talks/sessions or BoFs! That sure is a lot!

Well I've been trying to get started with using jMaki in my own space too. I thought I'd write some of my experiences in blogs as I go along.

First we need to setup the environment. We need an IDE, a jMaki plugin, and an application server.

Here are my preferences-

  • IDE: Netbeans (ofcourse!)
    I got NetBeans 5.5.1 Release Candidate, though its soon to be replaced with the much better version 6. But 5.5.1 will do for now for me.
  • IDE Plugin: NetBeans jMaki Plugin
    I downloaded the NetBeans Ajax Update center module and installed it in NetBeans. Once installed, I'll have access to the latest jMaki builds from the NetBeans IDE.
  • Server: GlassFish (ofcourse :))

Now using the update center, I installed jMaki plugin in my NetBeans IDE. There is also a screencast that you can watch.

Now we're all set to start writing applications using jMaki.

Let's do something more fruitful. Let's say we want to have a menu bar which will bring up different pages based on the option you select.

We create a new Web application. Enable jMaki support from the wizard.

Choose a standard single view and drag and drop the jMaki.Menu under the first div or the main area.

Drag and drop a jMaki.dcontainer on the second div. The reason we are having the dContainer is because all the actions with the Menu will result in changes in the dContainer. The glue code for the two to work together already exists, so we won't have to do anything else, which makes things simpler. Finally we create new jsp's for the associated actions in the same project. They should be at the same level as the main index.jsp. It's easy to do with NetBeans. Just click on the project in the project tree and create New->jsp.

This is what the final code will look like:

    <div class="outerBorder">
       
        <div class="header">
            <div class="banner">Doing something fruitful</div>
            <br>           
            <div class="subheader">
                <div>
                    <a:ajax name="jmaki.menu"
                            value="{columns: [
                            {label: 'Strawberry',
                            menuItems: [
                            {label:'ripe', url:'ripe.jsp'},
                            {label:'unripe', url:'unripe.jsp'}
                            ]},
                            {label: 'Apples',
                            menuItems: [
                            {label:'Red', url:'red.jsp'},
                            {label:'Green', url:'green.jsp'}
                            ]}
                            ]}" />
                </div>
            </div> <!-- subheader  -->

        </div> <!-- header -->

        <div class="main">

            <a:ajax name="jmaki.dcontainer"/>
               
        </div> <!-- content -->
    </div> <!-- main -->

    </div> <!-- outerborder -->

Feel free to try and point to some other useful tips as well!

Related Topics >>