Click here to Skip to main content
Click here to Skip to main content

Dropline Menu Tag Library

, 5 Mar 2013 LGPL3
Rate this:
Please Sign up or sign in to vote.
A dropline menubar control tag library for JSP.

Introduction

This article presents a JSP tag library for a Drop Line Flyout Menu. This menu currently supports only two levels, however with the addition of new CSS rules it can support multiple levels. The HTML markup of this control is highly influenced by samples found on Stu Nicholl's CSS Play and the Dynamic Drive website. I have rewritten the CSS and added jQuery based mouse hover effect. As shown on Stu Nicholl's website, this can even be achieved using pure CSS, however that solution requires a steady hand, otherwise the menu disappears as soon as the mouse moves out of the menu item. This is the primary reason for using jQuery.

Using the Code

Using this tag library is as simple as declaring the tab library and using the tag itself as shown in the following code snippet. Please remember that the jar file for this tag must be present in the "WEB-INF/lib" folder of your application.

<%@ taglib uri="http://bizsutra.blogspot.com/jsp/tags/ui" prefix="uitags" %>
<uitags:dlmenubar menuData="${sessionScope.MENUDATA}" id="sitemenu"  cssOnly="false"/>

Tag Attributes

The following table summarizes the various attributes of the Drop Line Menu Tag Library.

Attribute Description
onMenuClicked

The name of the client side JavaScript function which gets invoked whenever the user clicks on the menu item. This is an optional attribute. If not specified then the control assumes that a global function named onMenuItemClicked is present either in the HTML page or a JavaScript file linked to the page. The function receives the following parameters:

  • The URL of the destination.
  • The menu item ID.
  • The menu ID.
onModuleClicked

The name of the client side JavaScript function which gets invoked whenever the user clicks on the top level menu bar item. This is an optional attribute. If not specified then the control assumes that a global function named onModuleClicked is present either in the HTML page or a JavaScript file linked to the page. The function receives the following parameters:

  • Group ID
  • Menu ID
itemLabelPrefix The text to be used as a prefix for the keys used for retrieving the localized version of the menu item description. The actual key is formed by prefixing this text to the serial number of the menu item, separated by a dot. The default value is menuitem.label.
groupLabelPrefix The text to be used as a prefix for the keys used for retrieving the localized version of the top level menu bar item description. The actual key is formed by prefixing this text to the serial number of the menu bar item, separated by a dot. The default value is menugrp.label.
menuData* The actual data used for menu rendering. The expected data type is JSONObject.
cssOnly A boolean flag which when set to true renders a pure CSS driven drop line menu. The default value is true.
id* The unique identifier for this instance. This property ensures that multiple menu controls do not interfere with each other.

Menu Data Structure

The menu uses JSON data structure as its input. The menudata is itself a JSONObject with a single property named menu whose value is of the JSONArray data type. The menu data does not contain entries for top level menu bar items. Instead the top level menu bar is derived using the distinct values of the group_id attribute. This scheme is generally useful for multi module business applications where each module has a set of menus and submenus.

{
    "menu" : [
        {
            "description" : "viewall.frm",
            "group_id" : "Mobile",
            "isGroup" : false,
            "name" : "View All",
            "serial" : 1,
        },
        {
            "description" : "",
            "group_id" : "Mobile",
            "isGroup" : true,
            "name" : "Mobile Phones",
            "serial" : 2,
            "submenus" : [
                {
                    "description" : "loanCenter.form",
                    "group_id" : "Mobile",
                    "isGroup" : false,
                    "name" : "Android Phones",
                    "serial" : 3,
                },
                ...
            ]
        },
        ...
    ]
}

The following table summarizes the various attributes in the JSON data structure:

Attribute Description
description This attribute represents the URL to navigate to when a menu item is clicked. For groups the value is Empty.
group_id As the name suggests this attribute represents the group ID or the module ID. The distinct values of this attribute are used for rendering the top level menu bar.
isGroup A boolean attribute signifying whether the current entry represents a group of menu or an individual menu item.
name The default description for this menu item. The menu control uses this description if it can not find the localized representation.
serial The unique serial number identifying this menu entry.

ID Naming Conventions

The id for the top level menu bar item is constructed by prefixing the value of the group_id attribute with the text mbar_. The ID for the menu item is constructed by prefixing the value of the serial attribute with the group_id attribute followed by an underscore _ and the value of the serial attribute of all the parents separated by an underscore "_".

Theme Support

The theming is done entirely using CSS. In total there are four CSS files as summarized below.

  • cssdlm.css - The base CSS for CSSOnly menu implementation.
  • cssdlm-skin.css - The CSS for theming the CSSOnly menu.
  • jsdlm.css - The base CSS for jQuery based menu implementation.
  • jsdlm-skin.css - The CSS for theming the jQuery based menu.

Localization

The tag library is locale aware and can render the menu in the localized language. Localization is achieved using resource bundles. The resource bundle is a Java properties file containing key value pairs where the key is formed by prefixing either the itemLabelprefix or groupLabelPrefix followed by a dot "." to the menu serial number. The value represents the localized text to be displayed.

(itemLabelPrefix | groupLabelPrefix).serial

Dependencies

This tag library makes use of the following third party libraries:

Library Name Version Type
json-lib-2.2.3-jdk15.jar 2.2.3 Runtime (Server)
slf4j-api-1.6.4.jar 1.6.4 Runtime (Server)
spring-context-2.5.6.jar 2.5.6 Runtime (Server)
spring-core-2.5.6.jar 2.5.6 Runtime (Server)
spring-web-2.5.6.jar 2.5.6 Runtime (Server)
jquery-1.7.1.min.js* 1.9.1 Runtime (Client)
servlet-api-2.4.jar* 2.4 Compile (Server)

Limitations

Currently the tag does not work in non-spring projects. This is due to the use of classes used for localization.

History

  1. Feb. 28 2013 - Version 1.0 release.

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)

Share

About the Author

Prasad Khandekar
Software Developer (Senior) Freelancer
India India
I am a software professional with over 20 years of commercial business applications design and development experience.
 
My programming experience includes Java, Spring, .NET, Classic VB & ASP, Scripting, Power Builder, PHP, Magic & far far ago FoxPro, C, Assembly and COBOL.
 
From last 11 years I am mostly working with Java Technology. I am currently available to take up new assignments.

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberpaladin015-Mar-13 5:42 
Great utility which saved my few days of development.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141220.1 | Last Updated 5 Mar 2013
Article Copyright 2013 by Prasad Khandekar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid