When I worked on some projects, there are times when I have to create quick interactive web prototypes for demonstration purpose. Those prototypes usually have a lot of buttons and menu items for users to click on. Adding and managing interactive functionalities and effects to them can be a big pain especially when facing with time pressure.

Goals

With the following goals in mind, so I created this widget to make my life easier and help the process of creating these prototypes less time-consuming.

• In the early stage of the projects, most of the icons I received from the graphic department usually come as a separated image. So the widget I will create should make use of them as a separated image.
• The widget should be easy to use for developers and easy to understand for anyone

Introducing iButton

iButton is a dojo widget for creating dojo-based html buttons or menu items in a webpage. What make iButton special is that it stores states like mouse-click, mouse-over, or disabled in itself and can be access later using javascript command.

Syntax

The syntax is easy using the div tag and specify the dojoType attribute for the tag to ‘dj.form.iButton’ and specify width and height of the button. After that specify the path to the image for each state to the iButton widget. There are 6 types of paths attributes including

1. url: a path to an image displayed as the normal state of the button
2. hoverUrl: a path to an image displayed when the mouse is over the button
3. disabledUrl: a path to an image displayed when the button is disabled
4. activeUrl: a path to an image displayed when the button is activated*
5. activeHoverUrl: a path to an image displayed when the mouse is over the activated button
6. activeDisabledUrl: a path to an image displayed when the activated button is disabled

* the activate state just means that the iButton is being selected. The iButton will be on this state when the activate() command is called over the iButton. (see API).
* * only 3 states, url, hoverUrl, and disabledUrl, are required for a normal button without activate state.

Each instance of iButton should have syntax like the following code example.

<div dojoType="dj.form.iButton" id="Page_1" width="116" height="48" title="Resource"
          url="Images/menu/menu_1.gif" hoverUrl="Images/menu/menu_1_ov.gif" disabledUrl="Images/menu/menu_1_ov.gif"
          activeUrl="Images/menu/menu_1_ov.gif" activeHoverUrl="Images/menu/menu_1_ov.gif" activeDisabledUrl="Images/menu/menu_1_ov.gif">
</div>

API

• activate(): force the iButton to enter the activate state
• deactivate(): force the iButton to enter the normal state
• toggle(): force the iButton to enter the opposite state, if the activate iButton will be forced to enter the normal state while the normal iButton will be force to enter the activate state
• disable(): disable the iButton so that the iButton cannot be clicked
• enable(): enable the iButton so that the iButton can be clicked again

Before using iButton, you must specify the module path in the djConfig variable.

djConfig = {
          parseOnLoad: true,
          baseUrl: './',
          modulePaths: {
                    'com.esrith.core': 'js/com/esrith/core',
                    'com.esrith.widgets': 'js/com/esrith/widgets',
                    'dj.form': 'dj/form' 
}

Then use dojo.require tag to load the iButton module.

dojo.require("dj.form.iButton");

And make sure that you already have imported a dojotoolkit framework resource into the page.

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>

If the syntax and path to images are correct the iButton is ready for use with hover and disabled effect. You can call activate() when users click the button by binding onClick event to the iButton.

dojo.connect(dijit.byId("Menu_0").domNode, "onclick", function(){dijit.byId("Menu_0").activate();});

iButton_src.zipdemo