Products



Stay in touch

Add your e-mail address here to receive the monthly TMS Software alerts.


    

Content:
Product releases
Product articles
Technical articles
Website changes
Software development

Products:

<< >>
April 2014



Monday, May 16, 2011

Let your users decide between ribbon and docking toolbars

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);
begin
  SwitchFromDockPanelToRibbon(toolbarframe.AdvDockPanel1, ribbonframe.AdvToolBarPager1);
end;

procedure TForm5.Action2Execute(Sender: TObject);
begin
  SwitchFromRibbonToDockPanel(ribbonframe.AdvToolBarPager1, toolbarframe.AdvDockPanel1);
end;
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);
begin
  InitDockPanelAndRibbon(toolbarframe.AdvDockPanel1, ribbonframe.AdvToolBarPager1);
end;
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.

Bookmarks: 

Bruno Fierens




This blog post has received 4 comments. Add a comment.



Friday, October 02, 2009

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

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.

Bookmarks: 

Bruno Fierens




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



Wednesday, January 21, 2009

Using TAdvStickyPopupMenu

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:

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

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

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


Bookmarks: 

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.

Bookmarks: 

Bruno Fierens




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



Using the new TAdvShapeButton & TAdvPreviewMenu

Introduction

An eye-catching feature of the new Office 2007 environment is the round button that sits in the top right corner of the window from where a menu can be shown that resembles the old File menu.

What makes this menu a little different from a regular menu is that it has a frame with 2 panes. On the left pane, the menu items are displayed. On the right pane, either submenu items for left menu items are shown or a fixed set of items to select from. In the new TMS Advanced ToolBars & Menus v2.5 release, it is now possible to add such typical round button and menu to a Delphi application with TMS Office 2007 style toolbars.
Starting with the round button and menu To have a round button, the TAdvShapeButton component is introduced. This component can display images in PNG format with transparency on the TAdvToolBarPager. Make sure that the pager tabs do not overlap the button. The indent of the first pager tab can be set with the property AdvToolBarPager.TabSettings.StartMargin. In the demo, a round PNG image was used but nothing prevents you from using more irregular shapes. The TAdvShapeButton supports 4 images: Picture, PictureHot, PictureDisabled, PictureDown which set images to display for normal, hot, disabled and down state respectively. The TAdvShapeButton can be used as standalone button but more commonly will be used with a TAdvPreviewMenu and as such, it has a property AdvPreviewMenu with which the TAdvPreviewMenu component can be set that should be displayed when it is clicked.

The anatomy of the TAdvPreviewMenu The TAdvPreviewMenu is a non visual component at design time. It can be displayed at runtime by calling AdvPreviewMenu.ShowMenu(X,Y). When assigned to a TAdvShapeButton, it will be displayed automatically at the correct position by the TAdvShapeButton. The TAdvPreviewMenu has a frame with 2 panes. The left pane is being used to show MenuItems and the right pane is used to show SubMenuItems. The MenuItems are defined through the property TAdvPreviewMenu.MenuItems which is a collection of TAdvPreviewMenuItem instances. This class has following properties:

CanSelect: when true, the item can be selected (clicked) otherwise, it is only used to show SubMenuItems that can be selected.
Caption: sets the caption of the menu item DisabledPicture: sets the picture for the disabled state of the menu item
Enabled: when true, the menuitem is enabled
ImageIndex: sets the picture for a menu item through an ImageList assigned to TAdvPreviewMenu.MenuImages
OfficeHint: sets the Office 2007 style hint that is displayed when the mouse hovers the menu item
Picture: sets the picture for the normal state of the menu item
Separator: when true, the menu item is just a separator, ie. small horizontal line between menu items
ShortCutHint: this sets the shortcut hint text that is shown when the menu is opened through its shortcut on the TAdvToolBarPager.
ShortCutSubItemsHint: this sets the shortcut hint text used to open the subitems
SubItems: this is a collection of subitems that can be displayed for a MenuItem.
When items are available in the SubItems collection, a little arrow on the right side of the menu item indicates this.
SubMenuCaption: this sets the caption text of the submenu, shown at the top of the right pane
SubMenuItemSpacing: this sets the spacing between items in the submenu

When a menuitem is clicked, it triggers the event OnMenuItemClick with ItemIndex parameter indicating the menu item index that was clicked.

The right pane shows submenu items. These submenu items can either be defined globally for the TAdvPreviewMenu (and will be displayed for all MenuItems that have no SubItems defined) or can set per MenuItem. The global defined submenu items are set through TAdvPreviewMenu.SubMenuItems while the subitems per menu are set through TAdvPreviewMenu.MenuItems[index].SubMenuItems. A submenu item has following properties:

DisabledPicture: sets the picture for the disabled state of the submenu item
Enabled: when true, the menuitem is enabled
ImageIndex: sets the picture for a submenu item through an ImageList assigned to TAdvPreviewMenu.SubMenuImages
Notes: this is a stringlist that can hold a description text for a submenu item
OfficeHint: sets the Office 2007 style hint that is displayed when the mouse hovers the submenu item
Picture: sets the picture for the normal state of the submenu item
ShortCutHint: this sets the shortcut hint text that is shown when the submenu is opened through its shortcut of the menu item.
When a submenu item is clicked, it triggers the event OnSubMenuItemClick with ItemIndex parameter indicating the menu item index the submenu belongs to and SubItemIndex the submenu item index.

Finally, the TAdvPreviewMenu also has the capability to have one or more buttons at the bottom of the frame. The properties of the buttons are set through the Buttons collection. Each button is defined by a TButtonCollectionItem class with following properties:

Caption: sets the caption of the button
DisabledPicture: sets the picture for the disabled state of the button
Enabled: when true, the button is enabled
Font: sets the font of the button
ImageIndex: sets the picture for a menu item through an ImageList assigned to TAdvPreviewMenu.ButtonImages
OfficeHint: sets the Office 2007 style hint that is displayed when the mouse hovers the button
Picture: sets the picture for the normal state of the button
Width: sets the width of the button.
When a button is clicked, it triggers the event OnButtonClick. This event returns the parameter ButtonIndex to indicate what button was pressed. Note that the TAdvPreviewMenu will not automatically close when a button is clicked. The menu can be programmatically closed by calling : AdvPreviewMenu.HideMenu

Choosing a style with the TAdvPreviewMenuOfficeStyler

Like a lot of components in this area today, TAdvPreviewMenu has a lot of color settings to customize every aspect of the control. To save the developer time, common sets of colors that emulate the Office 2007 or Office 2003 colors have been embedded in a separate styler component: TAdvPreviewMenuOfficeStyler. The component can be dropped on the form and assigned to TAdvPreviewMenu.Styler. In this styler, appearance for buttons, menuitem and frame can be set or more conveniently, a style can be chosen by setting the Style property. TAdvPreviewMenuOfficeStyler is also TAdvFormStyler, TAdvAppStyler compatible to make it easy to change the style of a complete form or application with a single property.

Bookmarks: 

Bruno Fierens




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




Previous  |  Next  |  Index


Copyright © 1995 - 2014 TMS Software v4.0