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.
does just that. It's derived from
and has an additional member function called
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.
In order to use
just perform the following steps:
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 .
Let's say that it's resource ID is
2. Derive your main toolbar
CFOToolBar (or just use it directly
instead of deriving from it)
In MainFrm.h (in
protected: CFOToolBar m_wndToolBar;
3. Call the
member function of your main toolbar
object to attach the flyout toolbar
to the desired button.
4. Add FOToolBar.cpp
& FOToolBar.h to your project.
Now if you click the
first button on the toolbar
a little bit longer, you'll see the 'rectangle' flyout toolbar
How it works
By overriding the
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
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
All we had to do is simply remove the caption and float
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
to detect if a flyout toolbar
is displayed, and if so, delegate that message to it.
We also override
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
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.