Grails Trails : Use Case 0.2

From my previous outing with Grails, I am continuing my pursuit of Grails development. This time with a very simplest of the simple use cases.

Add a menubar to home page.
Menubar should have one menu item -- Profile
Profile menu item should have two sub-menu items -- View / Edit

Grails has an API called 'Navigation', which is part of the 'Platform Core' plugin. In the past, there was a 'Navigation' plugin, which I didn't want to use. Can't remember the exact reason though, but probably it was because I didn't want to specify presentation tags in Controllers. But even the new 'Navigation API', did not work out for me. I specified the navigation:primary and navigation:secondary tags. But the controller methods that were supposed to appear as sub-menu items vertically started appearing horizontally.

I played with the default css files that were available with the application, but couldn't get it right. There were no good tutorials out there on the platform core plugin and specifically the Navigation API. Note to framework developers : In order for a framework (or a component of it) to become popular, there needs to be not just documentation but ready-to-use step-by-step tutorials available online.

For basic application development tasks like creating a menu bar, spending more than half an hour on research is a waste of time. Remember, the purpose of any framework is for developers to write only business logic.

So I quickly changed track : To fall back to the good old method of writing the menubar with <ul> and <li> tags and the jquery css. The tutorials from which I took help are:
http://aoathout.blogspot.in/2010/06/grails-tutorial-part-2.html
http://runnable.com/UdQdRyHniSpKAAXx/create-a-horizontal-navigation-menu-bar-using-jquery

The first tutorial gives Grails syntax. The second URL is the real helpful one, and gives three files : index.html in which sourcing the jquery and css files is done along with all markup, the css file (runnable.css), and one one javascript file (script.js) to run jquery function. The adapted html for my app in the file /app/grails-app/views/home/index.jsp is given below :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<g:javascript src="menu-script.js" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'runnable.css')}" type="text/css">

<div class="navigation">
    <ul class="nav">
        <li>
            <a href="#">Profile
            <ul>
                <li><a href="#">View</a></li>
                <li><a href="#">Edit</a></li>
            </ul>
        </li>
    </ul>
</div>

I renamed script.js to menu-script.js so that I will remember its purpose at a later date. The file goes into /app/grails-app/web-app/js directory. The file runnable.css goes into /app/grails-app/web-app/css directory.

So, in conclusion, the effort required was saving two files in the proper directories and writing 14 lines of html.

One change I did to the css file. Changed the background of the menu items to #eed9cb. For color selection, the site http://www.color-hex.com/ is very handy.