The road less taken

« Strawberry picking | Main | Sun's training offer... »
Tuesday May 15, 2007

jMaki series - 2

A couple of days back, we learnt how to install jMaki and get started. Now we're ready to 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!

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed