Click here to Skip to main content
11,642,381 members (65,394 online)
Click here to Skip to main content

Creating Flyout Toolbars

, 31 Oct 2001 157.5K 4.5K 48
Rate this:
Please Sign up or sign in to vote.
Attach a sub-toolbar/s to another toolbar's button/s. The sub-toolbar will popup if the user clicks on that button a little bit longer
<!-- Download Links --> <!-- Article image -->

Sample Image - FOToolBar.jpg

<!-- Add the rest of your HTML here -->

Introduction

This article shows how to create a Flyout Toolbar. Flyout toolbars are used, for example, in 3D Studio & AutoCAD.

The idea is to let the user choose a sub-option of a more 'general' action that can be performed. For example, if we're writing a 2D graphics editor and we have a 'Draw Rectangle' option, we would probably have a button on the toolbar showing a rectangle. But the question is what kind of rectangle? A filled rectangle? Just the border? Or maybe both?

One solution to the problem is to create another 'flyout' toolbar showing all the 'Draw Rectangle' sub-options, which will pop-up next to the 'Draw Rectangle' button on the toolbar if the user clicks that button a little bit longer. If the user has chosen a different sub-option from the flyout toolbar, the button on the main toolbar is automatically updated.

The class CFOToolBar does just that. It's derived from CToolBar, and has an additional member function called addFlyout(), which takes the zero-based index of the button on the toolbar, and the resource ID of the flyout toolbar to be attached to that button.

Usage

In order to use CFOToolBar, just perform the following steps:

1. Create another toolbar with the resource editor that will contain all the sub options ( in this case, the toolbar that contains the different kinds of rectangles Flyout Toolbar. Let's say that it's resource ID is IDR_RECTANGLE_TOOLBAR )

2. Derive your main toolbar from CFOToolBar (or just use it directly instead of deriving from it)

In MainFrm.h (in class CMainFrame)

...
protected:  // control bar embedded members
    CFOToolBar    m_wndToolBar;

3. Call the addFlyout() member function of your main toolbar object to attach the flyout toolbar to the desired button.

In MainFrm.cpp (in OnCreate())

...
// add the flyout to the first button on the toolbar
m_wndToolBar.addFlyout(0, IDR_RECTANGLE_TOOLBAR);	

m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
EnableDocking(CBRS_ALIGN_ANY);
...

4. Add FOToolBar.cpp & FOToolBar.h to your project.

That's it.

Now if you click the first button on the toolbar a little bit longer, you'll see the 'rectangle' flyout oolbar pop up.

How it works

By overriding the ON_WM_LBUTTONDOWN() message of the main toolbar, we can do two things:

1. Check if a the user clicked on a button to which we previously attached a flyout toolbar.

2. If so, initiate the timer for X milliseconds. In the timer function, we create the flyout toolbar and display it in the right place. The flyout toolbar is also CToolBar-derived. All we had to do is simply remove the caption and float it.

There are a few problems though when displaying the flyout toolbar. It doesn't get any mouse messages because the main toolbar gets them. That's the reason we also had to override ON_WM_MOUSEMOVE() to detect if a flyout toolbar is displayed, and if so, delegate that message to it.

We also override ON_WM_LBUTTONUP() in which we kill the timer and update the new button from the flyout if neccessary.

A strange side effect happens if the user changes the application (by clicking Ctrl+Alt) while a flyout is on, and unclicks the mouse in the other application. When getting back, neither the main toolbar nor the flyout toolbar receive the ON_WM_LBUTTONUP() message, so you'll see that flyout is still displayed until you actually click on one of its buttons.

These are the main guildelines of the implementation. For more specific details please looks at the code, and feel free to e-mail me with questions or suggestions.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Y. Hirsch
Israel Israel
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionToolTips Pin
sc2018411-Apr-07 1:27
membersc2018411-Apr-07 1:27 
GeneralThank you! [modified] Pin
henky_arektc9725-May-06 16:52
memberhenky_arektc9725-May-06 16:52 
GeneralRe: Thank you! Pin
Yogesh P. Dhakad23-Aug-06 21:52
memberYogesh P. Dhakad23-Aug-06 21:52 
Generalruntime error Pin
zizou0427-Jun-04 15:13
memberzizou0427-Jun-04 15:13 
Generalfloating toolbar Pin
ted_yu7-Jun-04 14:48
memberted_yu7-Jun-04 14:48 
GeneralResource Required Pin
Rukhiya30-May-04 21:00
memberRukhiya30-May-04 21:00 
GeneralResources Required Pin
Sharjith26-Jun-03 5:37
memberSharjith26-Jun-03 5:37 
QuestionVC5 ?? Pin
agnes9114-Jan-03 5:19
memberagnes9114-Jan-03 5:19 
GeneralHeadache research student Pin
Mond26-Nov-02 22:35
memberMond26-Nov-02 22:35 
GeneralRe: Headache research student Pin
Y.H7-Dec-02 3:23
sussY.H7-Dec-02 3:23 
GeneralRe: Headache research student Pin
Anonymous7-Dec-02 22:50
sussAnonymous7-Dec-02 22:50 
GeneralRe: Headache research student Pin
Y.H8-Dec-02 0:40
sussY.H8-Dec-02 0:40 
GeneralRe: Headache research student Pin
Mond8-Dec-02 1:30
memberMond8-Dec-02 1:30 
GeneralRe: Headache research student Pin
Mond8-Dec-02 1:37
memberMond8-Dec-02 1:37 
GeneralRe: Headache research student Pin
Rukhiya30-May-04 21:16
memberRukhiya30-May-04 21:16 
QuestionWhy not change image? Pin
Avlee14-Sep-02 23:59
memberAvlee14-Sep-02 23:59 
QuestionHow to handle Seperator... Pin
Anonymous21-Jun-02 20:16
memberAnonymous21-Jun-02 20:16 
Generalflying vertical Pin
swinefeaster10-Nov-01 17:19
memberswinefeaster10-Nov-01 17:19 
GeneralRe: flying vertical Pin
Y.H10-Nov-01 22:16
memberY.H10-Nov-01 22:16 
GeneralRe: flying vertical Pin
swinefeaster11-Nov-01 8:26
memberswinefeaster11-Nov-01 8:26 
GeneralRe: flying vertical Pin
swinefeaster26-Nov-01 20:49
memberswinefeaster26-Nov-01 20:49 
GeneralRe: flying vertical Pin
akira3218-Jan-09 22:13
memberakira3218-Jan-09 22:13 
GeneralRe: flying vertical Pin
ninpo19-Apr-10 17:30
memberninpo19-Apr-10 17:30 
Generalalt-tab Pin
Anonymous4-Nov-01 23:59
memberAnonymous4-Nov-01 23:59 
GeneralCool but... Pin
Darren Schroeder1-Nov-01 16:08
memberDarren Schroeder1-Nov-01 16:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150731.1 | Last Updated 1 Nov 2001
Article Copyright 2001 by Y. Hirsch
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid