Let your users decide between ribbon and docking toolbars


Monday, May 16, 2011

When Office 2007 was just released, there was a lot of debate whether Microsoft should have really replaced the docking toolbars by the all new ribbon interface or rather left the user the choice between the classic familiar docking toolbars and the ribbon. While we think that in some cases, a ribbon interface works better and in other cases a docking toolbar is the preferred user interface, why not let the user choose? Users who know a toolbar menu system inside out might prefer to keep the user interface they are productive with while occasional users might find their way faster with a ribbon. Microsoft didn't allow users to make a choice for themselves and imposed the ribbon in most places throughout Office.
Technically, allowing the switch at runtime between a classic docking toolbar system and a ribbon UI isn't trivial. Due to its nature, the ribbon is deeply affecting its parent form. It needs to do quite sophisticated drawing to work well on glass frames, show an irregular application menu button on this glass frame as well as a QAT (Quick Access ToolBar). This means that when you want to allow the ribbon to dynamically disappear and a docking toolbar with regular form caption appear and vice versa, all the DWM API trickery that is done to make the ribbon look good on glass needs to be dynamically turned on and off.
We did quite a lot of research and work in this area and are happy to inform we're now offering a simple and easy to use API to dynamically switch between a docking toolbar and a ribbon with the latest version of TMS Advanced ToolBars & Menus v5.2.5.0. To make it easy to create your UI at design time, you can add two frames to your application. On one frame, layout the ribbon and on the other frame, layout the docking toolbars. Descend the main form from the TAdvToolBarForm class and add these two frames on the main form. At design time, this becomes:

Via two actions, one assigned to a button on the toolbar and one assigned to a button on the ribbon, the code is added that calls a TAdvToolBarForm to perform the switch between toolbar and ribbon:
procedure TForm5.Action1Execute(Sender: TObject);
  SwitchFromDockPanelToRibbon(toolbarframe.AdvDockPanel1, ribbonframe.AdvToolBarPager1);

procedure TForm5.Action2Execute(Sender: TObject);
  SwitchFromRibbonToDockPanel(ribbonframe.AdvToolBarPager1, toolbarframe.AdvDockPanel1);
Note that to make this work, a proper initialization of the TAdvToolBarForm needs to be performed to do the runtime switch between the ribbon and classic docking toolbar via the code:
procedure TForm5.FormCreate(Sender: TObject);
  InitDockPanelAndRibbon(toolbarframe.AdvDockPanel1, ribbonframe.AdvToolBarPager1);
At runtime, press the ribbon button on the docking toolbar to switch to ribbon mode and press the toolbar button on the ribbon to switch to docking toolbar mode:

Full source code of the application that demonstrates this capability can be downloaded here. To use this technique, use TMS Advanced ToolBars and Menus v5.2.5.0 or later.

Bruno Fierens


This blog post has received 4 comments.

1. Tuesday, May 17, 2011 at 4:33:45 AM

IMHO the ribbon is the best thing Microsoft has come up with in the past few years. It''s a shame there is no built-in scenic ribbon control in Delphi yet.

Márton Balassa

2. Tuesday, May 17, 2011 at 9:08:27 AM

How is a "scenic ribbon control" different from a ribbon control?

Delphi has had a ribbon component available since Delphi 2009. Or are you maybe wishing that the Delphi IDE itself used a ribbon instead of a TMainMenu style menu?

Jon Robertson

3. Tuesday, May 17, 2011 at 9:13:03 AM

There are three different ribbon control styles: Office 2007 style ribbon, Office 2010 style ribbon and Windows 7 scenic ribbon. Delphi standard VCL has only a partial implementation of the Office 2007 ribbon from Delphi 2009. The Office 2010 ribbon is mainly different wrt application menu it comes with. This is significantly different from the Office 2007 ribbon application menu. With the TMS ribbon you can select the style between each of these 3 ribbon styles.

Bruno Fierens

4. Tuesday, May 17, 2011 at 6:33:28 PM

Excellent stuff, as always Bruno!

Simon Stuart

Add a new comment:
  You will receive a confirmation mail with a link to validate your comment, so please use a valid email address.
Change Image
Fill in the characters from the image above:

All fields are required.

Previous  |  Next  |  Index