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. Add a comment.

New releases: TMS Smooth Controls + TMS Advanced ToolBars & Menus

Friday, October 02, 2009

Our team has finished this week the release of two important updates. First of all, there is the release of TMS Advanced ToolBars & Menus v4.0. Main new feature of the components is the built-in support for an emulation of the Windows 7 scenic ribbon style. With a single property you can switch between the Office 2007 ribbon style and the Windows 7 scenic ribbon style. For the application button in Office 2007 style, the control now offers to draw the orb itself making it no longer necessary to provide an anti aliased image. There is a single color setting with which the color of the orb can be changed.

Also this week, our team has released TMS Smooth Controls Pack v2.7. In this new version, we have exposed the Delphi 2010 / C++Builder 2010 touch/gesture support. The TAdvSmoothCalendar now also features left to right and right to left mouse movements to change the month. The version v2.7 also introduces two new components: TAdvSmoothCalculator and TAdvSmoothCalculatorDropDown.

Bruno Fierens

This blog post has received 1 comment. Add a comment.

Update: TMS Advanced ToolBars & Menus v3.7 released

Tuesday, January 27, 2009

We're happy to inform a new version of the TMS Advanced ToolBars & Menus is available now. With TMS Advanced ToolBars & Menus you can create Office 2007 ribbon type applications as well as Office 2003 style docking toolbars.

What's new improved in v3.7:

* New : Improved ribbon caption style on Windows Vista
* New : Exposed ParentShowHint, ShowHint on TAdvDockPanel
* Improved : When Styler.PageAppearance.ShadowColor = clNone, shadow is no longer drawn
* Improved : Applied HintWidth also for non Office2007 hint style hints in TAdvOfficeHint
* Fixed : Issue with accelerator key handling and wide captions in TAdvGlowButton
* Fixed : Issue with sizegrip on TAdvToolBarForm

Fully functional trial versions for Delphi 5,6,7,2005,2006,2007,2009 & C++Builder 5,6,2006,2007,2009 are available at: http://www.tmssoftware.com/site/advtoolbar.asp
Active registered users can obtain the update free after login on our website.

TMS Advanced ToolBars & Menus is also part of the TMS Component Pack Pro.

Bruno Fierens

This blog post has not received any comments yet. Add a comment.

Using TAdvStickyPopupMenu

Wednesday, January 21, 2009

In some cases it is not desirable and even annoying that a menu immediately disappears when a selection is made. To address such situations, the new component TAdvStickyPopupMenu was created.

The TAdvStickyPopupMenu component was modelled after the new menu that can be found in the Windows Vista File Explorer.

The TAdvStickyPopupMenu consists of a button bar (top area of the menu) and menu items. The styles of the TAdvStickyPopupMenu are identical to the styles of a TAdvPopupMenu or TAdvMainMenu and are controlled by the same styler (TAdvMenuOfficeStyler) This way, the TAdvStickyPopupMenu can be set in Office 2003, Office 2007, Visual Studio .NET, Windows XP or Windows Vista styles.

To show the menu, call TAdvStickyPopupMenu.ShowMenu(x,y: integer); with X,Y being either screen coordinates or form coordinates for the position where the menu should appear. It is controlled by the property TAdvStickyPopupMenu.DisplayRelative drScreen or drForm what type of coordinates is used as X,Y parameters.

The TAdvStickyPopupMenu ButtonBar

On top of the menu, it is possible to have an optional buttonbar. When TAdvStickyPopupMenu.ShowButtonsBar is true and the TAdvStickyPopupMenu.ButtonBar collection contains buttons, this will be shown.
Note that the height of the buttonbar is controlled by the styler with AdvMenuOfficeStyler.SideBar.Size.
Each button in the ButtonBar can have a caption & image from the imagelist set with TAdvStickyPopupMenu.ButtonImages. A click on a ButtonBar button can either automatically hide the menu (like a classical popupmenu) when property TButtonBarItem.HideOnClick = true or the menu remains visible when clicked when property TButtonBarItem.HideOnClick = false. The click on the ButtonBar button can be handled by event TButtonBarItem.OnClick or via TAdvStickyPopupMenu.OnButtonClick.

The TAdvStickyPopupMenu menu items

Several types of menu items are possible :
  • Normal menu item : this is a menu item that can be enabled or disabled and that has a caption and an imagelist image
  • A CheckBox menu item : this is a menu item with a checkbox, optionally an imagelist image and a caption. When AutoCheck = true, the checkbox automatically toggles on a click, otherwise the property TStickyMenuItem.Checked should be used.
  • A Radiobutton menu item : this is a menu item with a radiobutton, optionally an imagelist image and a caption
  • A splitter menu item : when MenuItem.Style = isSplitter, the item appears as just a splitter line
In addition to these 4 types, all types can be combined with a control (or container control like TPanel with more controls on it) and the control appears under the menu item. To add a control to a menu item, simply drop the control on the form and assign it to MenuItem.Control.

Just like with a ButtonBar button, a click on a menu item can either automatically hide the menu (like a classical popupmenu) when property TStickyMenuItem.HideOnClick = true or the menu remains visible when clicked when property TStickyMenuItem.HideOnClick = false. The click on the menu item can be handled by event TStickyMenuItem.OnClick or via TAdvStickyPopupMenu.OnItemClick.
In addition to this event, the OnCheckClick is triggered when a checkbox item is clicked or OnRadioClick is triggered when a radio menu item is clicked.

OwnerDraw menu items

Finally, it is possible to have custom drawing of the menu item image or the full menu item. To use this, each TStickyMenuItem has two events, OnDrawImage and OnDrawItem.

This code draws a simple cross as menu item image:

TForm1.AdvStickyPopupMenu1MenuItems2DrawImage(Sender: TObject;
 Canvas: TCanvas; ARect: TRect; Selected: Boolean);
 Canvas.MoveTo(ARect.Left, ARect.Top);
 Canvas.LineTo(ARect.Right, ARect.Bottom);
 Canvas.MoveTo(ARect.Right, ARect.Top);
 Canvas.LineTo(ARect.Left, ARect.Bottom);

This code draws the menu item text with an italic font:

TForm1.AdvStickyPopupMenu1MenuItems2DrawItem(Sender: TObject;
 Canvas: TCanvas; ARect: TRect; Selected: Boolean);
 Canvas.Font.Style := [fsItalic];
 Canvas.TextOut(ARect.Left, ARect.Top, (Sender as 

Bruno Fierens

This blog post has not received any comments yet. Add a comment.

Controlling toolbar button sizing

The Office 2007 ribbon GUI has sophisticated capabilities to resize controls depending on the size of the window & its toolbars. A button can have 3 different size states:

glyph size (bsGlyph size)

label size (bsLabel size)

large size (bsLarge size)

During resizing of the form that contains a toolbar with buttons, the buttons can automatically change their size state. This can be seen below where toolbar buttons change the size state in order to always try to fit all available buttons:

Toolbar is at maximum size. All buttons are in bsLarge size state

Toolbar shrinks. Half of the buttons shrink to bsLabel size state

Next step in shrinking process is that all buttons are now in the bsLabel size state

Half of the buttons shrink to bsGlyph size state

All buttons are in mimimum size type: bsGlyph size state

This is the default sizing behavior that the toolbar automatically performs when it shrinks or expands. This sizing behavior can be controlled on the level of a toolbar button through the properties:

MinButtonSizeState : minimum size the button can be set to
MaxButtonSizeState : maximum size the button can be set to

In the above example, all buttons on the toolbar have the MinButtonSizeState set to bsGlyph and MaxButtonSizeState set to bsLarge.  
It is not always desirable that all buttons can have a varying size state between bsGlyph and bsLarge. For the clipboard toolbar for example, following layout is achieved by setting :

Paste button : MinButtonSizeState is bsLarge, MaxButtonSizeState is bsLarge
Cut, Copy, Format button : MinButtonSizeState is bsGlyph, MaxButtonSizeState is bsGlyph

This guarantees that irrespective of the toolbar size, the buttons have always the same appearance:

As such, it is clear that the TMS Advanced ToolBars & Menus components have the built-in automatic smart resizing of toolbar buttons but have in addition to this the flexibility to allow the developer to control the sizing behavior on the level of each button.

Bruno Fierens

This blog post has not received any comments yet. Add a comment.

Previous  |  Next  |  Index