Share this blog
- Morfik Discussion Forums rules and guidelines
- MDA Release: The FacebookLike Package
- MDA Release: The Rating Package
- MDA Release: The HTML5 Video Package
- MDA Release: The Accordion Package
- April 2011 (1)
- January 2011 (4)
- December 2010 (2)
- November 2010 (3)
- October 2010 (5)
- September 2010 (3)
- August 2010 (4)
- July 2010 (5)
- June 2010 (4)
- May 2010 (5)
- April 2010 (4)
- March 2010 (8)
- February 2010 (17)
- January 2010 (20)
Previewing Morfik’s MenuBar control
In search of the ultimate navigation system for Morfik web applications we have come to the realization that just mimicking desktop-like menus on the web is not going to work. The use of desktop-like menus on the web has largely been criticized for its lack of usability, accessibility and scalability. Despite the criticism, desktop-like menus have been high on the list of most requested features for a long time. However, I feel there are merits to the criticism leveled against them that need addressing in order for a successful adaptation of these menus on the Web.
As most of you already know there are many Ajax implementations of desktop-like menus. However many leading websites employ navigation systems that, though having some resemblance to desktop-like menus, incorporate some new capabilities.
For example, Dell’s drop-down menus make an interesting use of layout to structure navigation choices. They are inherently temporary and go away automatically when users move the pointer to another top-level option or to a “regular” part of the screen.
The Action Envelope site, in addition to using layout for structuring navigation choices, introduces a login user interface to the navigation system. This is a very powerful addition that is almost completely missing from desktop-like menus.
We felt that Morfik had to dig deeper in order to find an answer to this challenge. After a long development cycle we have come up with a new approach that, in our opinion, will not only meet the highest expectations of our users but hopefully will also change the view of some of the critics of drop-down menus. Morfik MenuBar is our answer to this challenge! It has the benefits of desk-top menus and at the same time addresses the usability issues. Morfik MenuBar introduces the following unique characteristics:
- Navigation choices are structured through layout
- Navigation choices are distinguished through typography and icons
- Navigation choices can be augmented with other controls
- Navigation choices are optionally retrieved from a database table
The Menubar control is a flow-layout container with extra features allowing the addition of menu items, submenus and standard controls through a right-click context menu. The flow-layout engine automatically positions such controls one after another. Menu items are justified to fill all the space on the menu bar. If AutoSize mode is on (default), MenuBar itself adjusts its size to accommodate the largest menu item. Both Flow and AutoSize mode can be switched off, treating MenuBar as a normal design surface, supporting the conventional methods of placing and positioning controls.
SubMenu is effectively a Drop-down control that embeds another MenuBar within itself. With this approach it’s possible to design nested multi-level menus utilizing the powerful features of the Morfik Form Designer.
Like all other Morfik controls, the MenuBar control supports the concept of styles, so it’s possible to design different menu styles and easily switch from one style to another. Click here to view a live demo of menus showcasing Morfik MenuBars using different styles. In this demo we have showcased four different style menus that are used in Dell, Virgin Blue, Technorati and FlashDen websites.
Drop-down Control as the building block for MenuBar
We started work on MenuBar in Morfik 2.1 when we introduced the Drop-down Control (see example here). A modified and much improved version of the Drop-down Control is used as the building block for this new control.
The Drop-down Control is effectively a button and a popup container joined together. However, to make it look like a single object and therefore more appealing we had to extend Morfik’s graphical engine to support complex shapes, so that effects like corners, gradients, shadows, etc., can be applied to the whole control rather than to its individual parts. Another important technology that was employed to make menu designing practical is the Flow-Layout container, which was also introduced in Morfik 2.1. Unlike Plastic Layout which is used as a standard mode of Morfik Form Designer, Flow-Layout container positions elements one after another horizontally or vertically using a browser-like fluid mode. Each control has a “Margins” property specifying offsets between the control and surrounding controls. The position of each element inside Flow-Layout container is entirely determined by its index within the parent controls collection, and is controlled by flow-layout engine.
Another important consideration for MenuBar is its ability to dynamically load navigation choices from a database and display them inside a menu drop-down. This can be achieved by placing a continuous form inside a Menu drop-down container presenting navigation choices from a data source.
Due to the dynamic nature of continuous forms the exact size of a drop-down container cannot be determined at design-time. This requires supporting run-time resizing of the drop-down portion. To achieve this we use the same approach as with container controls that support dynamic growing/shrinking of the graphical effects. In such cases, the graphical image in a complex drop-down is split into multiple parts during the image generation stage of compilation and is rendered through a set of html elements, allowing for dynamic resizing of the MenuBar at run-time.
Morfik MenuBar is expected to be released as part of the next major update. There is still work to be done to address some performance and usability issues. We also need to test this new control under a wider range of scenarios to ensure the current design can support the anticipated range of web menus and data-bound navigation systems.
Online demo is available here.
If you have any comments, please share them with us so we can explore possibilities for enhancing the design as required.