T

TTu
uut
tto
oor
rri
iia
aal
ll 3
33

Dynamic Popup


In this sample program you will:

Learn how to create an extended toolbar (dock the toolbar to the right of the existing
standard toolbar)

Learn how to remove the gripper that allows a toolbar/menu to be moved

Learn how to add a dynamic combo box to your toolbar

Learn how to create a split button popup toolbar button which is also updated like the
combo box, and how to disable the expand button feature at the end of your toolbar that
allows you to add or remove buttons

Learn how to create key bindings/accelerators via code

It is recommended that you complete either the Designer or Customizable tutorial before
completing this tutorial, as they contain many of the same techniques used here.

The Command Bar used in this application can be done using the Xtreme
Commandbar designer. If you do not want to code, refer to the
Customizable tutorial.
2

Figure 3.1.
What you can
create in this
sample
Creating Dynamic Popup





3

Opening the Application

Open Visual Basic and Select new project from the file menu. Select VB Application
Wizard from the new project dialog box and click OK.

On the first step of the wizard, we do not have a profile so accept the default
and continue.

On the second step of the wizard, make sure that SDI is selected and give
the project an appropriate name.

On the third step, make sure that you check all of the boxes next to the
menu items that you want to include in your application menu. Visual Basic
will automatically include the event procedures to make most of these
selections functional (i.e. VB will include the event procedure to create a new
document if you included it in the menu). Click Next to continue.

On the next step, add all of the images that you want to use in your toolbar.
Be sure to include any images you will want to use for toolbar icons you
create. These images will be added to an image list automatically generated by
Visual Basic. Click the Finish button when you are finished.

Adding Controls to Your Toolbox

Once the application is open, display the toolbox (View->Toolbox).

Right-Click on an open area not occupied by a control and select
Components from the pop-up menu (Bottom Left). Project->Components
will work as well.

Select the Controls tab if it is not already selected and scroll down to the
bottom. You should see Xtreme CommandBars ActiveX Control module,
make sure that the check box is selected and click OK

You should now have a new control added to your Toolbox that looks like
this:
4



Once you have the CommandBars component (circled in yellow in Figure 3.3.)
added to your Toolbox, click on the component and place it on any blank area on
your applications main form.



Click on the CommandBars control

Go to the properties window

Name the control CommandBars.






Figure 3.2.
Adding a new
control
Figure 3.3.
CommandBars
component
added
5
















Right-click on the grey area of your main form

Select Menu Editor

In the editor, hit the delete button until all of the menu items are removed from the
list box below. Your menu should look like Figure 3.4.



You are doing this because you will be adding your own custom menu and toolbar
via code and you dont want the menu Visual Basic created. By allowing Visual Basic
to create the menu, you can now use all of the menu event procedures that Visual
basic created for your custom menu and command bar.


You might not be able to see your ImageList control because it is
directly behind your CommonDialog control. It is recommended that
you drag your CommonDialog control off of the ImageList control
like in the diagram because you will have to interact with the ImageList
control.
- ImageList control

- CommonDialog control
Figure 3.4.
Menu Editor
6

To delete the toolbar generated by Visual Basic:

Click on the toolbar control on your main form

Hit the delete key

Do not delete the ImageList control; you will use it when you create your
custom toolbar.

You are now ready to start coding the application.

IDs for the Controls

You are not going to use a separate .bas resource file for the control IDs.

Visual Basic will automatically create module1.bas. This is ok because it creates some
subroutines that Visual Basic needs for the SDI application. You will not modify this
file.

You will declare the constants in the General part of the code.

You must assign an ID and Index number for each of the controls on the command
bar and menu.

With the General section selected in the code view, you will have to assign an ID
to each and every command bar control.


Const ID_FILE_NEW = 100
Const ID_FILE_OPEN = 101
Const ID_FILE_CLOSE = 102
Const ID_FILE_SAVE = 103
Const ID_FILE_EXIT = 104

Const ID_EDIT_UNDO = 105
Const ID_EDIT_COPY = 106
Const ID_EDIT_PASTE = 107
Const ID_EDIT_CUT = 108

Const ID_VIEW_TOOLBAR_EXTENDED = 130
Const ID_VIEW_TOOLBAR_STANDARD = 109
Const ID_VIEW_STATUSBAR = 110
Const ID_VIEW_OPTIONS = 111

Const ID_HELP_ABOUT = 112

Const ID_FILE_PRINT = 113
Const ID_FILE_PRINT_SETUP = 114

Const ID_TOOLS_UNDO = 140
Const ID_TOOLS_UNDO_ITEM = 141
Const ID_TOOLS_UNDO_COMBO = 142


Const FCONTROL = 8

7

The name can be anything you want, but it is recommended that you follow a
naming scheme. For example, for the New File menu selection, declare it like this:
Const ID_NEW_FILE







Start with the prefix ID, followed by the name of the menu item - all
separated by underscores.

Assign the menu item ID an index number. The number can be any number
you want in the range of 100-5700, as long as the menu item does not also
have a corresponding toolbar icon. You must careful here: If the menu item
will have a toolbar button and a corresponding icon, you cannot just give it
any number you like (actually you can, but it was preset by Visual Basic and
needs to be changed).

Visual Basic associates a menu item to an icon in the ImageList control via a
tag (the index we assigned to the menu IDs). To find out what tag number
was assigned to the icons:

1. Select your main form in the object view.
2. Right-click on the ImageList control
3. Select properties from the pop-up menu




Declare a Const when included as part of an object module. They must
be Public Const in a .bas file
Figure 3.5.
Properties
8

4. From the properties page dialog, select the Images tab. You will see
all of your toolbar icons.



Notice the Tag field. This is the number that is associated with your menu
IDs. You can change this to whatever you like or keep it as it is (Visual Basic
might not have assigned a value). These are the values that you will use in the
new module we just created. In our example, the print icon has a Tag value
of 113, so in the General section of your code you would enter the
definition: Const ID_FILE_PRINT = 113.

Const ID_FILE_PRINT = 113
Const ID_FILE_PRINT_SETUP = 114

You can change the 113 to whatever you want; just make sure that all the
tags are unique and that the Tag value corresponds with the definition you
created in the General code section.

There are two more images that must be added that Visual Basic did not
create that look like this:

To add images:

1. Click on the Insert Picture button
2. Navigate to the C:\Program Files\Codejock
Software\ActiveX\Suite\samples\CommandBars\DynamicPopups\
Icons directory.
3. Add the help.bmp and undo.bmp images to the ImageList.
4. Make sure you set the Tag value to the same ID that was used in the
General code section.
Figure 3.6.
Property
Pages
9















Put some controls on your form. You will need a frame, a combo box, and two
command buttons.

Expand your work area and drag the frame to make it an appropriate size.

Drag the ImageList, CommonDialog, and CommandBars controls to the
bottom of the form.

Place a frame control on your form like the figure below, name it
frameChild, and delete the caption.



Add two command buttons, naming them cmdAdd and cmdRemove


You could design the menu and toolbar exactly how you want it in the
Xtreme Command Bar Designer and generate the resource file like we
did in the Designer tutorial. However, you will have to open the
ImageList properties and assign the appropriate Tag values that the
Xtreme Designer generated. You might do this because you dont want
to have the external .xcb file for your command bar. The advantage
here would be that you get to see what your menu/toolbar will look
like, and you can generate the resource file that already has appropriate
IDs and Indexes. Just remember to change the Tag values in the
ImageList control.
Figure 3.7.
Controls on
your form
10

Change their caption to Add and Remove.

Add a combo box

1. Name it cmbCommands
2. Change the Style to 1-simple combo
3. Drag the control to the appropriate size as in Figure 3.8.

This completes the form setup.




Available Events

Look at all of the available events the Commandbars control provides. There are
two ways to do this:

#1
Open up the object browser by hitting F2

Select XtremeCommandBars from the library list drop down menu

Figure 3.8.
Sizing the
control
11



Select the CommandBars entry in the list box. Now you can see all of the
available members, methods, events, properties, functions, and subs. If you
click on a member, you will get detailed information about that member.
Here we are interested in the events available that have the lightning bolt
icon next to them.


#2
Go to your code view by hitting F7



The left drop-down is a list of your controls; the right drop-down is a list of
event procedures available for those controls.

Select the CommandBars option from the left drop down list and browse
the right drop down list for a list of event procedures available to the
Figure 3.9.
Displaying
available events
Figure 3.10.
Displaying
available events
12

CommandBars control. It is this second method that we will be using to add
code to the CommandBars different event Procedures.


Coding the Menu and Toolbar

Start by coding the Form_Load event procedure of the main form. You will be creating the
menu and toolbar via code. The first two lines of code will remove the gripper:

on the menu bar that tells the user that the menu bar is moveable. Here you are working
with the CommandBars control.

CommandBars.ActiveMenuBar.ModifyStyle &H400000, 0 'Remove gripper
CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched 'Prevent docking

Use CommandBars.ActiveMenuBar.Modify to modify the style of the menu bar

Pass in the predefined values &H400000, 0. You can use the
XTP_CBRS_GRIPPER flag instead of &H400000.

If you want to replace the gripper, swap the order of the parameters.

The second line of code disables the docking capabilities of the menu bar.

Use CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched to disable
docking. The flag xtpFlagStretched indicates the menu bar can be stretched but not
moved.

Now that the menu bar cannot be moved, you will create the menu. This is the process of
creating the menu:

Begin by declaring an object of type CommandBarControl (This represents the base
class of a command bar control). This object will be used for the entire menu
creation process. The object is used to modify the properties of command bar
controls with the keyword Set.

Dim Control As CommandBarControl

Create a popup control of XTPControlType xtpControlPopup in the
ActiveMenuBar. The ActiveMenuBar is a command bar that is placed at the top of
your application and usually only contains popup controls. This is a typical command
bar that is displayed at the top of an application:



A typical ActiveMenuBar would contain popup controls such as File, Edit, View,
and Help.
13

Set ControlFile = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _
"&File", -1, False)

This code creates a popup control named ControlFile with the caption File and
places it into the ActiveMenuBar.

New controls can now be added to the ControlFile popup control located in the
ActiveMenuBars collection of controls. To do this, use the keyword With to state
that all the below method calls will be used for ControlFile.CommandBar.Controls.

With ControlFile.CommandBar.Controls

The CommandBar.Controls property represents a collection of controls related to
the ControlFile popup control with caption File located in the ActiveMenuBar.

The Add method adds controls to the File control located in the ActiveMenuBar.
Using the keyword With, all below controls will be added to Files control. In the
example, controls of XTPControlType xtpControlButton are added to the Files
control. These are the submenu controls in the popup File menu. The following
code adds the Save control button to the File popup button on the ActiveMenuBar.

.Add xtpControlButton, ID_FILE_SAVE, &Save, -1, False

In the process of creating the ActiveMenuBar, control popups are added to the
ActiveMenuBar, and then controls are added to the control popup in the ActiveMenuBar.
The process is repeated until the ActiveMenuBar is complete.


You will start with the File ActiveMenuBar control. This code should be the first thing after
the Visual Basic generated window sizing code. Here, you will need to declare an object as
type CommandBarControl

In our example we call it Control as below

Private Sub Form_Load()

CommandBars.ActiveMenuBar.ModifyStyle &H400000, 0 'Remove gripper
CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched 'Prevent docking


Dim Control As CommandBarControl

Set ControlFile = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _
"&File", -1, False)
With ControlFile.CommandBar.Controls
Set Control = .Add(xtpControlButton, ID_FILE_NEW, "&New", -1, False)

Set Control = .Add(xtpControlButton, ID_FILE_OPEN, "&Open", -1, False)

.Add xtpControlButton, ID_FILE_CLOSE, "&Close", -1, False
.Add xtpControlButton, ID_FILE_SAVE, "&Save", -1, False

Set Control = .Add(xtpControlButton, ID_FILE_PRINT, "&Print", -1, False)
14

Control.BeginGroup = True
.Add xtpControlButton, ID_FILE_PRINT_SETUP, "Print Set&up...", -1, False

Set Control = .Add(xtpControlButton, ID_FILE_EXIT, "&Exit", -1, False)
Control.BeginGroup = True
End With

Next you must create the &File control popup in the ActiveMenuBar by using the
Set command with CommandBars.ActiveMenuBar.Controls.Add(Type As
XTPControlType, Id As Long, Caption As String, Before As Variant, Temporary
As Variant), which takes five parameters:

The first parameter specifies the type of control which is xtpControlPopup

Next is the control (menu item) ID that you specified in the General code
section. For the main menu headings (i.e. File, Edit, View, Help) this value
will always be zero.

Next is the caption that will be displayed.

Then we have two optional fields:

1. The Index of the control to be added. Leave this value -1;
2. Whether the control is temporary.

In the example, the control popup is named ControlFile. Now that the &File
control button is created in the ActiveMenuBar, submenu controls can be added.
The previous Set statement created an xtpControlPopup with caption File in the
ActiveMenuBar.

The File control will be used with a With/End With Structure where submenu
controls will be added to the File control. The With/End With structure will be
primed with ControlFile.CommandBar.Controls.

Within the structure code, an .add statement for each submenu control. Be sure to
put them in the correct order starting with the top menu item and moving down (or
change the index of the control).

Now all other .Add method calls will be used for
ControlFile.CommandBar.Controls, so all below controls will be added to the
"Files" control popup.

Notice Control.BeginGroup = True. This will insert a separator line, thus starting a
new group.

Place this line of code AFTER the menu item you want the separator to appear
BEFORE (i.e. You want a separator line before the Exit control, so you place the
BeginGroup code after this line of code).

For some of the controls (menu items), we are using Set to create a pointer to those
objects. This is done so you can change the properties of the object pointed to by
our Control object. For example, if you want to hide the menu item, add
15

Control.Visible = FALSE after the Set Control = .add line of code. Notice the
difference in syntax when we do not assign a pointer to a control (menu item). You
must omit the parentheses around the parameters in this case.

When you are finished adding submenu controls to the &File control popup, you
need to end the End With structure.

Repeat the previous steps (starting on page 12) for the &Edit and &View control popups in
the ActiveMenubar as in the code below:

Set ControlEdit = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _
"&Edit", -1, False)
With ControlEdit.CommandBar.Controls
Set Control = .Add(xtpControlButton, ID_EDIT_UNDO, "&Undo", -1, False)

Set Control = .Add(xtpControlButton, ID_EDIT_CUT, "Cu&t", -1, False)
Control.BeginGroup = True

Set Control = .Add(xtpControlButton, ID_EDIT_COPY, "&Copy", -1, False)

Set Control = .Add(xtpControlButton, ID_EDIT_PASTE, "&Paste", -1, False)
End With

Set ControlView = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _
"&View", -1, False)
With ControlView.CommandBar.Controls
Set Control = .Add(xtpControlPopup, 0, "&Toolbars", -1, False)
Control.CommandBar.Controls.Add xtpControlButton, ID_VIEW_TOOLBAR_STANDARD, _
"&Standard", -1, False
Control.CommandBar.Controls.Add xtpControlButton, ID_VIEW_TOOLBAR_EXTENDED, _
"&Extended", -1, False

.Add xtpControlButton, ID_VIEW_STATUSBAR, "Status Bar", -1, False

Set Control = .Add(xtpControlButton, ID_VIEW_OPTIONS, "&Options", -1, False)
Control.BeginGroup = True
End With

Under the menu bar selection &View, you will notice that there is a popup menu for toolbar
selection. To accomplish this:

Set the XTPControlType to xtpControlPopup for the submenu control that will
have the popup menu. The &Toolbars submenu control will have the popup.

Set a pointer to the submenu control when you create it with the command Set
Control = .add (xtpControlPopup, 0, &Toolbars, -1, False) as in the code
shown.

With the pointer set to the &Toolbars submenu control, you can add the popup
menu entries:

Use the pointer you just set to access the CommandBar.Controls.Add
method from the CommandBarControl interface you called Control with
the command Control.CommandBar.Controls.Add as in the code shown.

16

This is the same .Add method you used earlier, so follow the same syntax as
before.

When you are done adding popup menu controls, use the .Add method as
you did when creating the &File and &Edit submenu controls.

Code the &Undo and &Help control popups in the ActiveMenuBar as below:

Set ControlUndo = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _
"&Undo", -1, False)
With ControlUndo.CommandBar.Controls
.Add xtpControlButton, ID_TOOLS_UNDO, "Undo", -1, False
End With

Set ControlHelp = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _
"&Help", -1, False)
With ControlHelp.CommandBar.Controls
.Add xtpControlButton, ID_HELP_ABOUT, "&About", -1, False
End With







Creating the Standard Toolbar/Command Bar

You will now create the standard toolbar/command bar. This process is very similar to
creating controls in the ActiveMenuBar.

Declare a CommandBar object variable of type CommandBar.

Name it ToolBar.

Do this with Dim ToolBar As CommandBar as well.

Now you must create the toolbar with the command
CommandBars.Add(Standard, xtpBarTop). You are creating a standard toolbar
and docking it at the top of the application.

Begin adding controls to the ToolBar as in the following:

Dim ToolBar As CommandBar

Set ToolBar = CommandBars.Add("Standard", xtpBarTop)
With ToolBar.Controls
Set Control = .Add(xtpControlButton, ID_FILE_NEW, "&New", -1, False)
Control.DescriptionText = "Create a new document"

Set Control = .Add(xtpControlButton, ID_FILE_OPEN, "&Open", -1, False)
Control.DescriptionText = "Open an existing document"

Set Control = .Add(xtpControlButton, ID_FILE_SAVE, "&Save", -1, False)
Control.DescriptionText = "Save the active document"

Refer to the previous steps (beginning on page 12) if you need help.

17


Set Control = .Add(xtpControlButton, ID_EDIT_CUT, "Cu&t", -1, False)
Control.BeginGroup = True
Control.DescriptionText = "Cut the selection and put it on the Clipboard"

Set Control = .Add(xtpControlButton, ID_EDIT_COPY, "&Copy", -1, False)
Set Control = .Add(xtpControlButton, ID_EDIT_PASTE, "&Paste", -1, False)

Set Control = .Add(xtpControlButton, ID_FILE_PRINT, "&Print", -1, False)
Control.BeginGroup = True

Set Control = .Add(xtpControlButton, ID_HELP_ABOUT, "&About", -1, False)
Control.BeginGroup = True
Control.DescriptionText = "Display program information, version number and copyright"

End With

Create a With/End With statement that is primed with the ToolBar objects property
Controls, with ToolBar.Controls. This will allow you to place controls (toolbar
buttons) in the ToolBar objects collection of controls (toolbar buttons, combobox,
split button popups, etc).

Once in the With/End With structure, add the controls exactly as you did when
creating the control popups in the ActiveMenuBar until you need to create the font
color selector control.

You want the statusbar to display a short description of what each button will do.
To accomplish this you must add the description to the control as below:

Set Control = .Add(xtpControlButton, ID_FILE_OPEN, "&Open", -1, False)
Control.DescriptionText = "Open an existing document"

You are using the pointer to the control, Control, to assign a description to the
toolbar button with the command Control.DescriptionText = Open an existing
document. This is the text that will be displayed in the statusbar.


Creating an Extended Toolbar

Now you will create the extended toolbar. This is just a standard toolbar like you already
created; nothing special is done to make it dock to the right of the standard toolbar. You
must only modify the placement of the toolbar via code later on in the tutorial see Figure
3.11.



The standard toolbar is in the blue box and the extended toolbar is in the red box. On the
extended toolbar, you will be creating a split button popup, which displays a list of controls
with an image along side. A combobox will also be added to the toolbar. Both of these
Figure 3.11.
Extended
Toolbar
18

controls will be dynamic. Both the combobox on the toolbar and split button popup will
contain all of the items displayed in the combo box on the main form. You can add and
remove as many items as you want. Now that you know what the extended toolbar will do,
you can create it the same way that you created the standard toolbar.

Start by defining your CommandBar object interface

Name it ExtendedBar.

Refer to the previous section (starting on page 16) and the code below to finish the
extended toolbar.

Dim ExtendedBar As CommandBar
Set ExtendedBar = CommandBars.Add("Extended", xtpBarTop)
With ExtendedBar.Controls
Set Control = .Add(xtpControlSplitButtonPopup, ID_TOOLS_UNDO, "Undo")
Control.CommandBar.Controls.Add xtpControlButton, ID_TOOLS_UNDO, "Undo"

Set Control = .Add(xtpControlComboBox, ID_TOOLS_UNDO_COMBO, "Undo Combo")


End With

You are using the XTPControlType, xtpControlSplitButtonPopup to create our split button
popup.

Add a control button to the split button popup control. This is done the same way
you created the popup menu for the &Toolbars submenu selection on page 15.

Notice that you are only adding one control and are giving it the same ID and
caption as the split button popup control. The controls are different types, so using
the same name makes it clear that the control belongs to the split button popup.

You are adding a dummy control from which you will add controls dynamically
searching for the ID ID_TOOLS_UNDO.

To add the combobox to the toolbar, add a control of XTPControlType
xtpControlComboBox.

With the toolbar/commandbar complete, you must load the images from the
ImageList control by adding the code below:

CommandBars.AddImageList imlToolbarIcons

This method takes the name of your ImageList control as its only parameter.

Next, add key bindings to the controls as below (Appears next to the menu caption on the
menubar).

CommandBars.KeyBindings.Add FCONTROL, Asc("N"), ID_FILE_NEW
CommandBars.KeyBindings.Add FCONTROL, Asc("O"), ID_FILE_OPEN
CommandBars.KeyBindings.Add FCONTROL, Asc("S"), ID_FILE_SAVE
CommandBars.KeyBindings.Add FCONTROL, Asc("X"), ID_EDIT_CUT
CommandBars.KeyBindings.Add FCONTROL, Asc("C"), ID_EDIT_COPY
19

CommandBars.KeyBindings.Add FCONTROL, Asc("V"), ID_EDIT_PASTE

Call the CommandBars.KeyBindings.Add method. The method takes three
parameters:

The first specifies whether the Control, Shift, and Alt keys are to be used for
the keybinding.

The second parameter is the ASCII value of the keybinding

The last parameter is the command ID which will be invoked when the
accelerator is used.

You will need to add the constants to General section of your code using the
predefined values in the diagram below. This will complete your menu and
commandbar/toolbar.

Const FCONTROL = 8


To finish the Form_Load event procedure, you must add a few items to the combobox on
the main form, which the dynamic toolbar controls will use. You must delete the combobox
text and add two items as in Figure 3.12. Then you want to disable the expand button
feature at the end of your toolbars that allows you to add or remove buttons; see the red box
in Figure 3.12.



The functionality to add/remove buttons on a CommandBar created via code has
been added as of version 8.62. Refer to the SDI sample to learn how to do this. Add
the code in the diagram below to hide the button.

CommandBars.Options.ShowExpandButtonAlways = False

Finally, you need to call a subroutine that will dock the extended toolbar to the right
of the standard toolbar.

Call a subroutine (created in the next step) named DockRightOf

Pass it two of type CommandBar.

Pass the subroutine the ExtendedBar and ToolBar as parameters with the
command DockRightOf ExtendedBar, ToolBar as in the following:



Figure 3.12.
Disabling the
expand button
20

DockRightOf ExtendedBar, ToolBar


cmbCommands.AddItem "Undo Edit"
cmbCommands.AddItem "Undo Resize"
cmbCommands.Text = ""

Code the DockRightOf subroutine.

Click somewhere on your code view window

Click Tools>Add Procedure... from the popup menu.




Type DockRightOf as the name, the type as sub, and it will be private (as in Figure
3.14.)

Click OK



Type in two parameters of type ICommandBar called BarToDock and BarOnLeft as
shown:

Private Sub DockRightOf(BarToDock As CommandBar, BarOnLeft As CommandBar)
Dim Left As Long
Dim Top As Long
Dim Right As Long
Dim Bottom As Long

CommandBars.RecalcLayout
BarOnLeft.GetWindowRect Left, Top, Right, Bottom

Figure 3.13.
Adding
Procedures
Figure 3.14.
Adding
Procedures
(cont.)
21

CommandBars.DockToolBar BarToDock, Right, Top + 1, BarOnLeft.Position

End Sub

You will create four local variables as type long to hold the dimensions of the
application window.

Now we want to recalculate the entire area of the docking panes on the form with
the command CommandBars.RecalLayout. This ensures that the standard toolbar
will be in the correct position before docking the extended toolbar.

Now we get the size of the rectangle of BarOnLeft, which we passed in the standard
toolbar.

Then we use the CommandBars control to dock the extended toolbar to the
standard toolbar with the command CommandBars.DockToolBar which takes four
parameters:

The first parameter is the toolbar we are docking

The second parameter is the x-coordinate where the toolbar should go

The third parameter is the y-coordinate where the toolbar should go

The last parameter is the position of the toolbar to which we are docking the
extended toolbar.

We are adding 1 to the Top of the standard toolbar so that the extended toolbar has
the same top as the standard toolbar.


Adding Event Procedures

Now we are ready to start adding our CommandBars event procedures.

Start by adding the Execute event procedure:

Go into your code view by hitting F7

Select CommandBars from the first drop-down list

Select Execute from the second drop-down list.

Private Sub CommandBars_Execute(ByVal Control As XtremeCommandBars.ICommandBarControl)
Select Case Control.Id
Case ID_HELP_ABOUT: MsgBox "Version " & App.Major & "." & App.Minor & "." & App.Revision
Case ID_VIEW_TOOLBAR_STANDARD: CommandBars(2).Visible = Not CommandBars(2).Visible
Case ID_VIEW_TOOLBAR_EXTENDED: CommandBars(3).Visible = Not CommandBars(3).Visible

Case ID_VIEW_STATUSBAR:
sbStatusBar.Visible = Not sbStatusBar.Visible
CommandBars.RecalcLayout


Case ID_FILE_NEW: MsgBox Control.Caption & " Clicked"
Case ID_FILE_OPEN: MsgBox Control.Caption & " Clicked"
22

Case ID_FILE_CLOSE: MsgBox Control.Caption & " Clicked"
Case ID_FILE_SAVE: MsgBox Control.Caption & " Clicked"

Case ID_TOOLS_UNDO_ITEM: MsgBox Control.Caption & " Clicked"
Case ID_TOOLS_UNDO_COMBO:
If Control.Type = xtpControlComboBox Then
CurrentIndex = Control.ListIndex
If (CurrentIndex > 0) Then MsgBox Control.List(CurrentIndex)
End If


Case ID_FILE_EXIT: Unload Me

End Select
End Sub

In this event procedure, we will set up a switch statement that will check to see which
command bar/ menu item was selected. The switch statement will accept and compare the
Command Bar IDs. We will be using the IDs that we defined in the General section of our
code.

You will want to create an entry in your switch statement for each ID you defined in
the General section of your code.

For each Case statement, you can do anything you want: i.e. call a function or
display a message box. For example, you might want to open up a save file dialog
when the save button is clicked.

You will want to call the methods that Visual Basic created for most of the standard
functions such as new file, save, print, and close.

In this example, we simply display a message box stating that the toolbar button was
clicked.

The CommandBars_Execute event procedure is passed the
CommandBarControl as a parameter.

As you can see in the event procedure header, the variable is called Control
and is of type XtremeCommandBars.ICommandBarControl.

There are several properties we can get from Control, but we are only
interested in the command ID in our example.

If you would like to know all the available members of
CommandBarControl, hit F2 and select CommandBarControl from the list
box.

To access the command bar controls ID, use Control.Id in your switch
statement.

After that, place the appropriate code for each Case in your switch
statement.

You should be able to run your application and have your command buttons
execute the code you supplied for their IDs.
23

We need to use some code to take into account the size of the status bar when drawing the
window. The CommandBars_GetClientBordersWidth event procedure is used when the
area occupied by controls docked along the edges of the form (like a ToolBar or StatusBar)
has to be retrieved. This event procedure will be called automatically so you will not directly
call it in your code. Without this procedure you would not see your status bar because the
Rich TextBox would display over it.

Add the code in the diagram below to the GetClientBordersWidth event procedure.

Private Sub CommandBars_GetClientBordersWidth(Left As Long, Top As Long, Right As Long, _
Bottom As Long)
If sbStatusBar.Visible Then
Bottom = sbStatusBar.Height
End If
End Sub

GetClientBordersWidth(Left As Long, Top As Long, Right As Long, Bottom As
Long) takes 4 parameters of type Long. These parameters represent the top,
bottom, left, and right borders of the application window.

In the event procedure, you must account for the height of the status bar.

This procedure will check to see whether the status bar is visible

If it is, then the Bottom is updated with the height of the StatusBar.

This tells the CommandBars control that the area the height of the
StatusBar is occupied.

You do not need to do this for the CommandBars control because it already
knows how much area it occupies.

Now we need to move all of the controls on our form so we can see the menubar and
toolbar. We placed all of the controls on a frame so that we can simply move the frame and
all of the controls will move with it and stay in the correct position.

Add the CommandBars event procedure Resize

Private Sub CommandBars_Resize()

On Error Resume Next

Dim Left As Long
Dim Top As Long
Dim Right As Long
Dim Bottom As Long

CommandBars.GetClientRect Left, Top, Right, Bottom

frameChild.Move Left + 10, Top + 10, Right - Left - 20, Bottom - Top - 20

End Sub

This event procedure takes the same parameters as GetClientBordersWidth.

24

The GetClientRect method is used to retrieve the dimensions of the client rectangle,
that is, the area on the form which does not have any command bars.

Use the methods of the rich text box with the new dimensions to move and resize
the rich text box to fit the new dimensions.

The Bottom value contains the value from the GetClientBordersWidth event, which
makes the available drawing area start at the top of the StatusBar.

Now that we know where the frame can be moved, it can be moved to an
appropriate position.

The frmChild control is moved 10 units down from the top of the toolbar
and 10 units to the right of the left edge.

We do this by moving the frame control frameChild with the command
frameChild.Move Left + 10, Top + 10, Right - Left - 20, Bottom - Top
20.

When the mouse scrolls over a toolbar icon, it should display a description of what the
button does on the status bar. This will only work if you assigned a description to the
toolbar control. To do this, you will code the CommandBars event procedure
ControlSelected as below.

Private Sub CommandBars_ControlSelected(ByVal Control As XtremeCommandBars.ICommandBarControl)
If Not Control Is Nothing Then
sbStatusBar.Panels(1).Text = Control.DescriptionText
Else
sbStatusBar.Panels(1).Text = ""
End If
End Sub

This event procedure is called automatically so no direct call is made in your code. It is
passed the same object as the Execute event procedure. Refer to page 21 for a more detailed
explanation of this parameter.

This event procedure checks to see if the Control exists and has a description

If it does, it updates the first panel of the status bar with the controls
description

If not, a blank string is displayed in the status bar.

Now we must address what happens when we have command buttons or menu selections
that are displayed differently based on a value, or are enabled/disabled based on some
condition. For example, you might want to enable/disable certain command buttons/ menu
selections based on events that take place in your application.

Create the CommandBars_Update event procedure. This event procedure is passed
the same object as the Execute event procedure.

It should be set up exactly the same as the Execute event procedure as in the
following:
25


Private Sub CommandBars_Update(ByVal Control As XtremeCommandBars.ICommandBarControl)

On Error Resume Next
Select Case Control.Id
Case ID_EDIT_CUT: Control.Enabled = False
Case ID_EDIT_COPY: Control.Enabled = False

Case ID_VIEW_TOOLBAR_STANDARD: Control.Checked = CommandBars(2).Visible
Case ID_VIEW_TOOLBAR_EXTENDED: Control.Checked = CommandBars(3).Visible
Case ID_VIEW_STATUSBAR: Control.Checked = sbStatusBar.Visible
End Select
End Sub

You will have a Select structure that will do a switch on the ID of the command
button/menu item selected. The big difference here is that we only include the
control IDs that need to be updated.

In our example, we are enabling/disabling our Cut and Copy command
button/menu items based on whether the user has some text in the combobox
selected.

Finally, we will check to see if the user has hidden the status bar, standard toolbar, or
extended toolbar.

This is the place to add any other code that will need to be executed when you need
to check if a menu item is checked/not checked








or any other action that should be performed when a command button/menu item
needs to look different based on specific conditions but has not been clicked (i.e.
hiding check marks next to menu items).

This will be the last CommandBars event procedure. We need to code the event procedure
InitCommandsPopup to initialize the combobox and split button popup every time the user
clicks on one of them. This event procedure is automatically called when the user clicks on
the combobox or split button popup control. It is passed a CommandBar instead of a
CommnadBarControl. Refer to the following code.

Private Sub CommandBars_InitCommandsPopup(ByVal CommandBar As XtremeCommandBars.ICommandBar)
Dim Control As CommandBarControl, ControlItem As CommandBarControl
Set Control = CommandBar.FindControl(, ID_TOOLS_UNDO)
If Not Control Is Nothing Then
Index = Control.Index
Control.Visible = False

'Remove Previous Items
Do While Index + 1 <= CommandBar.Controls.Count
Set ControlItem = CommandBar.Controls.Item(Index + 1)
If ControlItem.Id = ID_TOOLS_UNDO_ITEM Then

This code only places/removes the check mark next to the item in the
menu. The code to actually hide/unhide the status bar should go in the
Execute event procedure
26

ControlItem.Delete
Else
Exit Do
End If
Loop
'Add Items
For i = 0 To cmbCommands.ListCount - 1
ListItem = cmbCommands.List(i)
Index = Index + 1
CommandBar.Controls.Add xtpControlButton, ID_TOOLS_UNDO_ITEM, ListItem, Index
Next
End If

'if combo list box popuped
If CommandBar.Position = xtpBarListBox Then
If (Not CommandBar.Parent Is Nothing) And (CommandBar.Parent.Type = xtpControlComboBox)
Then
Dim ControlComboBox As CommandBarComboBox
Set ControlComboBox = CommandBar.Parent 'return ComboBox control

CurrentText = ControlComboBox.Text 'store current text
ControlComboBox.Clear

For i = 0 To cmbCommands.ListCount - 1
ControlComboBox.AddItem cmbCommands.List(i)
Next

IndexCurrent = ControlComboBox.FindItem(CurrentText)
If (IndexCurrent > 0) Then ControlComboBox.ListIndex = IndexCurrent 'restore cur text

End If
End If

End Sub

Declare two objects of type CommandBarControl; we call them Control and
ControlItem.

First we want to see if we can find the split button popup control on the extended
toolbar.

Use the command CommandBar.FindControl(,ID_TOOLS_UNDO, and
create a pointer to it called Control.






If you are able to find the control, place the controls index into the variable
Index.

With the pointer, Control still pointing to the dummy control in our split
button popup, use Control.Visible = False to hide the dummy control.

Then remove all of the items from the combobox, if any existed, as below.


This method takes four parameters but only the second parameter, the
controls ID, is required
27

Start a DO While loop that starts at the Index of the dummy control
created in the split button popup.

In the loop, we get a pointer to the next control on the extended toolbar.

If the control has the ID, ID_TOOLS_UNDO_ITEM, which we assign when
creating the control dynamically in the next section, then delete the control
because it is a member of the split button popup.

The loop will go through all of the controls on the extended toolbar, but
only those in the split button popup are affected.

'Remove Previous Items
Do While Index + 1 <= CommandBar.Controls.Count
Set ControlItem = CommandBar.Controls.Item(Index + 1)
If ControlItem.Id = ID_TOOLS_UNDO_ITEM Then
ControlItem.Delete
Else
Exit Do
End If
Loop

With an empty combobox, populate it with a fresh copy of the contents of
the combobox on the main form as in the code below.

Create a For loop that goes through every item in the combobox on the
main form

Add a control of XTPControlType, xtpControlButton to the CommandBar.

Give the control an ID of ID_TOOLS_UNDO_ITEM

Assign the ListItem as the caption, and an Index equal to the Index of the
combobox on the main form.

'Add Items
For i = 0 To cmbCommands.ListCount - 1
ListItem = cmbCommands.List(i)
Index = Index + 1
CommandBar.Controls.Add xtpControlButton, ID_TOOLS_UNDO_ITEM, ListItem, Index
Next
End If

Check to see if the command bar contains a listbox, which means that there is a combobox
or listbox on the toolbar and it is popped up.

If it does, check to see if the type of control is a combobox and if the combobox
exists. If it is:

Declare an object of type CommandBarComboBox; we call ours
ControlComboBox.

Set a pointer to the combobox control with the command Set
ControlComboBox = CommandBar.Parent.

Save a copy of the currently selected text item in the combobox control.
28


Clear the combobox on the toolbar

Populate it with a fresh copy of the content of the combobox on the main
form.

To add items to the combobox control:

1. Create a For loop from 0 to the ListCount of the combobox on the
main form minus 1 (because we start at 0).
2. We can interact with the ControlComboBox control just like a
normal combobox.
3. To add the items use the AddItem method.
4. Use ControlComboBox.AddItem cmbCommands.List(i) to add every
item to the combobox control.

Select the item the user had currently selected

1. Find the index of the text we saved
2. Set the ControlComboBox.ListIndex to the index we found the
saved text at.

'if combo list box popuped
If CommandBar.Position = xtpBarListBox Then
If (Not CommandBar.Parent Is Nothing) And (CommandBar.Parent.Type = xtpControlComboBox)
Then
Dim ControlComboBox As CommandBarComboBox
Set ControlComboBox = CommandBar.Parent 'return ComboBox control

CurrentText = ControlComboBox.Text 'store current text
ControlComboBox.Clear

For i = 0 To cmbCommands.ListCount - 1
ControlComboBox.AddItem cmbCommands.List(i)
Next

IndexCurrent = ControlComboBox.FindItem(CurrentText)
If (IndexCurrent > 0) Then ControlComboBox.ListIndex = IndexCurrent 'restore cur text

End If
End If

To finish, we need a way to add and remove items from the combobox on the main form.

Add the Click event procedure to both the Add and Remove command buttons.

Double-click on the command button in form view and you will be taken to that
buttons Click event procedure. Refer to the code below.

All we do in the Add event procedure is check whether the user entered anything; if
they did, then that item will be added to the combobox.

In the Remove event procedure, we remove the currently selected item as long as an
item exists.

Private Sub cmdAdd_Click()
29

If cmbCommands.Text <> "" Then
cmbCommands.AddItem cmbCommands, Text
End If
End Sub

Private Sub cmdRemove_Click()
If cmbCommands.ListIndex >= 0 Then
cmbCommands.RemoveItem cmbCommands.ListIndex
End If
End Sub


You have now completed this tutorial! If you are unclear on anything covered, you might
want to go back and complete this tutorial again. It might be a good idea to add some
additional functionality to this sample application to make sure you fully understand what is
going on.