Dolphin Style Menu User Control

 

Download here

Control Description

The Dolphin Style Menu control is a horizontal tab style menu you can use in your applications. The sample was taken from http://www.13styles.com/css-menus/dolphin/.

DolphinStyleMenu-runtime

Using the control

The control basically loads a SDT which contains the menu items. Consequently you will have to create a MenuData SDT based variable which must be assigned to the control´s MenuData property. The MenuData SDT is composed simply by 4 fields:

  • MenuId: character. Useful for event handling
  • MenuTitle: the title of the menu item
  • MenuDescription: the description of the menu item
  • MenuURL : URL invoked when a menu item is clicked

When the user clicks a menu item a server event will be raised. That event can be handled as follows:

//Dolphin Style Menu event handler
Event DolphinStyleMenu1.DolphinItemClicked
  msg("Selected item Title : " + &MenuDataItem.MenuTitle)
EndEvent

Example

//Sample code for DolphinStyleMenu
Sub 'DolphinStyleMenuSample'
  &MenuData = DPDolphinMenuData.Udp()
EndSub
Data Provider DPDolphinMenuData()
MenuData
{
  MenuDataItem
  {
    MenuId = 1
    MenuTitle = "HOME"
    MenuDescription = "Description for HOME" 
    MenuURL = Link(http://www.gxtechnical.com/)
  }
  MenuDataItem
  {
    MenuId = 2
    MenuTitle = "BOOKS"
    MenuDescription = "Description for BOOKS" 
    MenuURL = Link(http://www.gxtechnical.com/)
  }
  MenuDataItem
  {
    MenuId = 3
    MenuTitle = "COMPUTER"
    MenuDescription = "Description for COMPUTER" 
    MenuURL = Link(http://www.gxtechnical.com/)
   }
}

 

Tip: attributes can be used instead of constant (e.g. MenuURL attribute instead of http://www.gxtechnical.com/). In this case if the attribute value is prefixed by "http://" the link function does not include the "base url". Therefore, if external urls are needed (e.g. www.gxtechnical.com) the http:// prefix must be included in the attribute value in order to avoid the base url prefixing.

The sample shown above will create the following Dolphin Style Menu:

DolphinStyleMenu-runtime2

In addition the control offers a set of properties to customize its behavior.

Control Properties

  • ControlName
  • Heigth
  • MenuData : &MenuData collection
  • SelectedItem : &MenuDataItem based on MenuData.MenuDataItem
  • Width

Control Events

  • DolphinItemClicked: raised when the user clicks a menu item.

To Install It

 

Please visit: Default Installation Instructions for User Controls.

 

Contact information

Please send feedback to: armando@simplifica.com.uy

Suggestions

  • Allow menu to be displayed using a specific menu item selected
  • Remove href:MenuURL in generated code to avoid post

Change Log

2008/04/01 : Version 1.2 Uploaded. User Control now uses a cookie to save the selected item while the browser is open. Image used on hover is now different than the one used for the selected item. VersionNumber property added to the control.

2008/04/26: Version 1.3 Uploaded. Minor modification in MenuDataSDT.xpz. 

2008/11/13: Version 1.4 uploaded. Menu item mouse out implemented to restore selected item description in description bar. Cookie named changed in order to avoid conflicts when having more than one menu in the app.

2010/12/21: Version 1.5 uploaded. VersionNumber property removed from control's properties and added to control's definition file. Category Menus added to control's definition file.,