Tutorial 4

MDI Sample
In this sample program you will:

Learn how to create a menu and two command bars, a standard command bar and a
command bar, that will control the visual theme, via code

Learn how to create a pop-up menu when you right-click on a child window

Learn how to create tabbed workspace that works just like the well known Mozilla tabbed
browsing. Each individual tab will respond to a right mouse click event by displaying a
popup menu

Learn how to create key bindings/accelerators via code

It is recommended that you complete either the Designer or Customizable tutorials 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 for those who do not want to code; refer to the
Designer tutorial.
2

Creating MDI

Figure 4.1.
What you can
create in this
sample

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 MDI 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.
3

In the previous step, Visual Basic created an Image List that contains all of the toolbar icons.
It also created fully functional event procedures for most of the menu commands. To create
your own menu and toolbar via code, as done in this tutorial, you will need to get rid of the
ones Visual Basic created. You will learn how to do this later in the tutorial.

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:

Figure 4.2.
Adding a new
control

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

Figure 4.3.
CommandBars
component
added

 Click on the CommandBars control

 Go to the properties window
 Name the control CommandBars.

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

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.

You are doing this because you will be adding your own custom menu and toolbar via code
and you don’t want the menu Visual Basic created. By allowing Visual Basic to create the
5

menu, you can now use all of the menu event procedures that Visual basic created for your
custom menu and command bar.

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.

In the Designer tutorial, we created a resource file. We still need to have a .bas resource
file with all of our menu item IDs, but this time we have to create it ourselves. We must
also assign an ID and Index number for each of the buttons on the command bar and
menu.

To create a new module:
 Make sure you are displaying the project explorer
 Right-click on the Modules folder
 Select Add from the pop-up menu
 Select Module from the second pop-up menu.

Figure 4.4.
Display project
explorer

 Module should be selected

6

 Click the Open button.

 You can give the module an appropriate name, but the default will be fine.
 With the new module open, you will have to assign an ID to each and every
control/menu item

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:
Public 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. Add the control item declarations in the
diagram below to the new module.

Public Const ID_FILE_NEW = 100

Public Const ID_FILE_OPEN = 101
Public Const ID_FILE_CLOSE = 102
Public Const ID_FILE_SAVE = 103
Public Const ID_FILE_EXIT = 104

Public Const ID_EDIT_UNDO = 105

Public Const ID_EDIT_COPY = 106
Public Const ID_EDIT_PASTE = 107
Public Const ID_EDIT_CUT = 108

Public Const ID_VIEW_TOOLBAR_STANDARD = 109

Public Const ID_VIEW_TOOLBAR_THEMES = 115
Public Const ID_VIEW_STATUSBAR = 110
Public Const ID_VIEW_OPTIONS = 111

Public Const ID_HELP_ABOUT = 112

Public Const ID_FILE_PRINT = 113

Public Const ID_FILE_PRINT_SETUP = 114

Public Const ID_FORMAT_BOLD = 120

Public Const ID_FORMAT_ITALIC = 121
Public Const ID_FORMAT_UNDERLINE = 122

Public Const ID_FORMAT_ALIGNLEFT = 123

Public Const ID_FORMAT_CENTER = 124
Public Const ID_FORMAT_ALIGNRIGHT = 125

Public Const ID_THEME_OFFICE = 130

Public Const ID_THEME_DEFAULT = 131
Public Const ID_THEME_OFFICE2003 = 132
Public Const ID_THEME_NATIVEXP = 133

Public Const ID_WINDOW_CASCADE = 140

Public Const ID_WINDOW_TILE_HORIZANTALLY = 141
Public Const ID_WINDOW_TILE_VERTICALLY = 142
7

 You must careful here: If the control/menu item will have a toolbar button
and a corresponding icon, you have to make sure that Visual Basic did not
assign a different index to the corresponding picture in the ImageList.
 Visual Basic associates a control/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

Figure 4.5.
Properties

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

Figure 4.6.
Property
Pages

 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 General section of your code you would enter the definition:
Const ID_FILE_PRINT = 113.

Public Const ID_FILE_PRINT = 113

Public 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.

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 don’t 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.
9

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 4.7.
Displaying
available events

 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
10

Figure 4.8.
Displaying
available events

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
CommandBars control. It is this second method that we will be using to add
code to the CommandBars different event Procedures.

In our example, you will notice that the child window starts out maximized. To do this:

Select the frmDocument (Child window)

Click anywhere on the form

Go to the properties box

Change the Window State to maximized.

Figure 4.9.
Maximizing the
child window

Coding the Menu and Toolbar

Start by coding the MDIForm_Load event procedure of the main form. You will be creating
the menu and toolbar via code. The first and easiest thing to do is add the tabbed workspace
capability.

The CommandBars.ShowTabWorkspace method is used to turn the tabbed
workspace on and off.

This method can be called from any function or subroutine that can access the
CommandBars object.

In the sample project, tabbed workspace is turned on in the MDIForm_Load event
procedure.

Add the following code to turn on tabbed workspace.
Set Workspace = CommandBars.ShowTabWorkspace(True)
11

A new TabWorkspace object called Workspace is created and is set to point to

CommandBars.ShowTabWorkspace.

With the pointer, there are several other features that can be applied to the tabs such
as appearance and location.

The ShowTabWorkspace ( ) method takes a Boolean value of true to turn on tabbed
workspace and false to turn it off. You should be able to run your application and
see an application with one tabbed workspace.

Figure 4.10.
One tabbed
workspace

A TabWorkspace contains a collection of controls of type TabControlItem that represent

each tab.

When a tab is right-clicked, a context popup menu is displayed.

The TabWorkspace object can respond to right-clicks with the RClick event
procedure.

Because there is not a TabWorkspace control on the main form, an object of type
TabWorkspace must be declared.
 When declaring the object, you must use the keyword WithEvents.
 This will allow the object to respond to the events triggered.
 Declare an object of type TabWorkspace called Workspace using the
keyword WithEvents in the General code section.
12

 Now that the Workspace object is created, you can start to edit the
Workspace event procedures.
 In the RClick event procedure, a context popup menu with two controls will
be diaplayed.
 Add the code below to the Workspace_RClick event procedure:
Private Sub Workspace_RClick(ByVal Item As XtremeCommandBars.ITabControlItem)
If Not Item Is Nothing Then
Debug.Print Item.Caption
Item.Selected = True
Workspace.Refresh

Dim Popup As CommandBar

Set Popup = CommandBars.Add("Popup", xtpBarPopup)

With Popup.Controls
.Add xtpControlButton, ID_FILE_NEW, "&New", -1, False
.Add xtpControlButton, ID_FILE_CLOSE, "Close", -1, False
End With

Popup.ShowPopup
Workspace.Refresh

End If
End Sub

 The RClick method is triggered each time the TabWorkspace is right-

clicked, not just if a tab is right-clicked.
 Figure 4.11. shows the TabWorkspace in the red box.
13

Figure 4.11.
TabWorkspace

 If a TabControlItem is right-clicked, then that control is passed to the

RClick event procedure.
 The first line of code checks to make sure a TabControlItem was right-
clicked.
 Then the appearance of the TabControlItem is changed by setting the
Selected property to True and refreshing the workspace with the
Workspace.Refresh method.
Item.Selected = True
Workspace.Refresh

 In Figure 4.12., “Document 3” is selected and “Document 1” is not

selected.
14

Figure 4.12.
Documents

 After the TabControlItem is selected, the popup menu is created and

displayed.
 Refer to pages 15 and 25 for a more detailed explanation of CommandBar
creation.
Set Popup = CommandBars.Add("Popup", xtpBarPopup)

With Popup.Controls
.Add xtpControlButton, ID_FILE_NEW, "&New", -1, False
.Add xtpControlButton, ID_FILE_CLOSE, "Close", -1, False
End With

 CommandBars of type xtpBarPopup are a temporary command bar that will

be destroyed once the menu is closed.
 A CommandBar of type xtpBarPopup is added to the CommandBars
control’s collection of command bars, and a pointer called Popup is used to
reference the new command bar.
 Using the Popup pointer, controls of type xtpControlButton are added to the
Popup command bar’s collection of controls.
 Only two controls are added to the popup menu, the user can open a new
document, or close an existing document.
 The controls of the popup menu use the same control Id of the
corresponding controls in the main CommandBar created on page 15.
15

 Once the Popup command bar is created, it has to be displayed. This is done
using the ShowPopup method.
Popup.ShowPopup

 After the popup menu is displayed, the Workspace needs to be refreshed so

the appearance of the TabControlItem does not still appear selected.

Before you begin creating the command bar, it will be helpful to examine 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.

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
ActiveMenuBar’s 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
16

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 as in the following code. 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.

Dim Control As CommandBarControl

Dim ControlFile As CommandBarPopup, ControlEdit As CommandBarPopup
Dim ControlView As CommandBarPopup
Dim ControlWindow As CommandBarPopup, ControlHelp As CommandBarPopup

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)

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:
17

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
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 14) for the &Edit control popup in the
ActiveMenubar as 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
18

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.

 Use the command Control.CommandBar.Controls.Add as below:

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_THEMES, _
"&Themes", -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

 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.

Create the &Window and &Help control popups in the ActiveMenuBar as below:

Set ControlWindow = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, _

"&Window", -1, False)
With ControlWindow.CommandBar.Controls
.Add xtpControlButton, ID_FILE_NEW, "&New Window", -1, False
.Add xtpControlButton, ID_WINDOW_TILE_HORIZANTALLY, "Tile &Horizontally", -1, False
.Add xtpControlButton, ID_WINDOW_TILE_VERTICALLY, "Tile &Vertically", -1, False
.Add xtpControlButton, ID_WINDOW_CASCADE, "&Cascade", -1, False
.Add xtpControlButton, 35000, "&Window List", -1, False
End With

Set ControlHelp = CommandBars.ActiveMenuBar.Controls.Add(xtpControlPopup, 0, "&Help", _

-1, False)
With ControlHelp.CommandBar.Controls
19

.Add xtpControlButton, ID_HELP_ABOUT, "&About", -1, False

End With

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

The only thing to note here is the last .Add call in the “&Window” submenu
creation code. Here, we are creating the window list that will hold the names of all
the open documents in the application. The ID, 35000 passed is a special Id used for
Window Lists and cannot be changed.

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 below:

Dim ToolBar As CommandBar, ThemesBar As CommandBar

Set ToolBar = CommandBars.Add("Standard", xtpBarTop)

With ToolBar.Controls
.Add xtpControlButton, ID_FILE_NEW, "&New", -1, False
.Add xtpControlButton, ID_FILE_OPEN, "&Open", -1, False
.Add xtpControlButton, ID_FILE_SAVE, "&Save", -1, False

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

Control.BeginGroup = True

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

Control.BeginGroup = True

.Add xtpControlButton, ID_EDIT_COPY, "&Copy", -1, False

.Add xtpControlButton, ID_EDIT_PASTE, "&Paste", -1, False

Set Control = .Add(xtpControlButton, ID_FORMAT_BOLD, "Bold", -1, False)

Control.BeginGroup = True
.Add xtpControlButton, ID_FORMAT_ITALIC, "Italic", -1, False
.Add xtpControlButton, ID_FORMAT_UNDERLINE, "Underline", -1, False

Set Control = .Add(xtpControlButton, ID_FORMAT_ALIGNLEFT, "Align Left", -1, False)

Control.BeginGroup = True
20

.Add xtpControlButton, ID_FORMAT_CENTER, "Center", -1, False

.Add xtpControlButton, ID_FORMAT_ALIGNRIGHT, "Align Right", -1, False
End With

Create a With/End With statement that is primed with ToolBar.Controls.

Once in the With/End With structure, add the controls exactly as you did when
creating the menu.

With the toolbar/commandbar complete you must load the images from the
ImageList control. To do this, add the code below.

CommandBars.AddImageList imlToolbarIcons

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

Now you need to create the Themes toolbar. This is done exactly the same way you created
the standard toolbar previously. Refer to the code below.

Set ThemesBar = CommandBars.Add("Themes", xtpBarTop)

With ThemesBar.Controls
.Add xtpControlButton, ID_THEME_OFFICE, "Office XP", -1, False
.Add xtpControlButton, ID_THEME_DEFAULT, "Default", -1, False
.Add xtpControlButton, ID_THEME_OFFICE2003, "Office 2003", -1, False
.Add xtpControlButton, ID_THEME_NATIVEXP, "Native XP", -1, False
End With

To illustrate how to change the properties of a control, we are going to change the
XTPControlType of the ThemesBar controls. Because the theme buttons do not have an
icon, their style should be xtpButtonCaption, which displays only text. We are looping
through all of the ThemesBar buttons and changing their styles. This technique can be used
on all of the menu and toolbar controls. You can change properties such as caption, type,
and style.

For Each Control In ThemesBar.Controls

If Control.Type = xtpControlButton Then
Control.Style = xtpButtonCaption
End If
Next

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
CommandBars.KeyBindings.Add FCONTROL, Asc("V"), ID_EDIT_PASTE
21

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 resource file using the predefined values in the
diagram below. This will complete your menu and commandbar/toolbar.

Public Const FSHIFT = 4

Public Const FCONTROL = 8
Public Const FALT = 16

You can also disable the expand button feature at the end of your toolbar that allows you to
add or remove buttons

The functionality to add/remove buttons via code is available as of version 8.62.

To disable the expand button feature, add this line of code
CommandBars.Options.ShowExpandButtonAlways = False

Adding Event Procedures

Now we are ready to start adding code to the CommandBars event procedures.

Start by adding code to 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)

On Error Resume Next

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_THEMES: CommandBars(3).Visible = Not CommandBars(3).Visible

Case ID_FILE_NEW: LoadNewDoc

Case ID_FILE_OPEN: mnuFileOpen_Click
Case ID_FILE_SAVE: mnuFileSave_Click
Case ID_FILE_PRINT: mnuFilePrint_Click
Case ID_FILE_CLOSE: mnuFileClose_Click
22

Case ID_FILE_EXIT: Unload Me

Case ID_THEME_OFFICE: CommandBars.VisualTheme = xtpThemeOfficeXP

Case ID_THEME_DEFAULT: CommandBars.VisualTheme = xtpThemeOffice2000
Case ID_THEME_OFFICE2003: CommandBars.VisualTheme = xtpThemeOffice2003
Case ID_THEME_NATIVEXP: CommandBars.VisualTheme = xtpThemeNativeWinXP
Case ID_VIEW_STATUSBAR:
sbStatusBar.Visible = Not sbStatusBar.Visible
CommandBars.RecalcLayout

Case ID_FORMAT_BOLD:
ActiveForm.rtfText.SelBold = Not ActiveForm.rtfText.SelBold
Case ID_FORMAT_ITALIC:
ActiveForm.rtfText.SelItalic = Not ActiveForm.rtfText.SelItalic
Case ID_FORMAT_UNDERLINE:
ActiveForm.rtfText.SelUnderline = Not ActiveForm.rtfText.SelUnderline

Case ID_FORMAT_ALIGNLEFT: ActiveForm.rtfText.SelAlignment = rtfLeft

Case ID_FORMAT_CENTER: ActiveForm.rtfText.SelAlignment = rtfCenter
Case ID_FORMAT_ALIGNRIGHT: ActiveForm.rtfText.SelAlignment = rtfRight

Case ID_EDIT_CUT:
Clipboard.SetText ActiveForm.rtfText.SelRTF
ActiveForm.rtfText.SelText = vbNullString
Case ID_EDIT_COPY: Clipboard.SetText ActiveForm.rtfText.SelRTF
Case ID_EDIT_PASTE: ActiveForm.rtfText.SelRTF = Clipboard.GetText

Case ID_WINDOW_CASCADE: Me.Arrange vbCascade

Case ID_WINDOW_TILE_HORIZANTALLY: Me.Arrange vbTileHorizontal
Case ID_WINDOW_TILE_VERTICALLY: Me.Arrange vbTileVertical
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 our resource file

You will want to create an entry in your switch statement for each Command
Button/menubar control ID in the resource file

For each Case statement you can do anything you want, like 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 like new file, save, print, and close.

In this example:
 The CommandBars_Execute event procedure is passed the
ICommandBarControl 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.
23

 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.

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
child windows would display over it.

Add the code 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.
 What this did what tell 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 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.

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

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

Private Sub CommandBars_Update(ByVal Control As XtremeCommandBars.ICommandBarControl)

On Error Resume Next

Select Case Control.Id
Case ID_FILE_SAVE: Control.Enabled = Not ActiveForm Is Nothing
Case ID_FILE_PRINT: Control.Enabled = Not ActiveForm Is Nothing
Case ID_EDIT_CUT:
If ActiveForm Is Nothing Then
Control.Enabled = False
Else
Control.Enabled = Not ActiveForm.rtfText.SelLength = 0
End If
Case ID_EDIT_COPY:
If ActiveForm Is Nothing Then
Control.Enabled = False
Else
Control.Enabled = Not ActiveForm.rtfText.SelLength = 0
End If
Case ID_EDIT_PASTE: Control.Enabled = Not ActiveForm Is Nothing
Case ID_VIEW_TOOLBAR_STANDARD: Control.Checked = CommandBars(2).Visible
Case ID_VIEW_TOOLBAR_THEMES: Control.Checked = CommandBars(3).Visible

Case ID_THEME_OFFICE:
Control.Checked = CommandBars.VisualTheme = xtpThemeOfficeXP
Case ID_THEME_DEFAULT:
Control.Checked = CommandBars.VisualTheme = xtpThemeOffice2000
Case ID_THEME_OFFICE2003:
Control.Checked = CommandBars.VisualTheme = xtpThemeOffice2003
Case ID_THEME_NATIVEXP:
Control.Checked = CommandBars.VisualTheme = xtpThemeNativeWinXP

Case ID_VIEW_STATUSBAR: Control.Checked = sbStatusBar.Visible

Case ID_FORMAT_BOLD:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then Control.Checked = ActiveForm.rtfText.SelBold
Case ID_FORMAT_ITALIC:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then Control.Checked = ActiveForm.rtfText.SelItalic
Case ID_FORMAT_UNDERLINE:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then Control.Checked = ActiveForm.rtfText.SelUnderline
Case ID_FORMAT_ALIGNLEFT:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then Control.Checked = _
ActiveForm.rtfText.SelAlignment = rtfLeft
Case ID_FORMAT_CENTER:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then Control.Checked = _
ActiveForm.rtfText.SelAlignment = rtfCenter
Case ID_FORMAT_ALIGNRIGHT:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then Control.Checked = _
ActiveForm.rtfText.SelAlignment = rtfRight

End Select
End Sub
25

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 Paste command button/menu
items based on whether the user has some text in the combobox selected (Which is
really a rich text box inside a window, thus the rtf method calls).

Then we want to enable the Paste command button/menu item if there is something
on the clipboard to paste

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

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

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).

You still have to code the frmDocument.

First, delete the rtfText_SelChange() event procedure in the diagram below.

Private Sub rtfText_SelChange()
fMainForm.tbToolbar.Buttons("Bold").Value = IIf(rtfText.SelBold, tbrPressed, tbrUnpressed)
.
.
.
End Sub

Now you will want to ensure that your rich text box is the same size as your
document window. To do this, change your rich text box’s border size as below.

Private Sub Form_Resize()

On Error Resume Next
rtfText.Move 0, 0, Me.ScaleWidth - 0, Me.ScaleHeight - 0
rtfText.RightMargin = rtfText.Width - 400
End Sub

With that out of the way, you can move on to code the pop-up menu for the
documents window.
26

Here you want to show a pop-up menu when the user right-clicks anywhere on the open
document. To do this, you will need to edit the rtfText_MouseUp event procedure as in the
following code:

Private Sub rtfText_MouseUp(Button As Integer, Shift As Integer, x As Single, y As Single)

If (Button = 2) Then
ZOrder

Dim Popup As CommandBar

Dim Control As CommandBarControl

Set Popup = fMain.CommandBars.Add("Popup", xtpBarPopup)

With Popup.Controls
.Add xtpControlButton, ID_FILE_NEW, "&New", -1, False
.Add xtpControlButton, ID_FILE_OPEN, "&Open", -1, False
.Add xtpControlButton, ID_FILE_SAVE, "&Save", -1, False

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

Control.BeginGroup = True

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

Control.BeginGroup = True

.Add xtpControlButton, ID_EDIT_COPY, "&Copy", -1, False

.Add xtpControlButton, ID_EDIT_PASTE, "&Paste", -1, False
End With

Popup.ShowPopup
End If

End Sub

Make sure that it was the right mouse button (Button = 2) that was clicked.

The ZOrder command is used to bring the document that requested the popup to
the front of the GUI interface (I.e. You have several documents open within your
application and they are not maximized, you can right-click a document in the
background and it will be placed at the front of the GUI.).

Create a pop-up menu just like you did when creating the &Toolbars submenu
popup.

Start off by adding the popup menu specifying the XTPControlType as
xtpBarPopup and set a pointer to it called Popup.

When creating the CommandBar/menu, notice the CommandBars control on the
main frame is being used.

The other notable difference is that you are calling the CommandBars.Add method,
which takes only two parameters: the name of the command bar and the
XTPControlType, which needs to be xtpBarPopup.

Notice that this was done the same way when creating the popup in the
ActiveMenuBar, only you were using a different .add method.

Create the With/End With structure and prime it with Popup.Controls.
27

Add the menu items just as you did on pages starting on page 14.

Now all you have to do is call the ShowPopup method to show your popup menu.

Look at the Customizable sample to see another way to add a right-click

popup menu, you can just copy existing controls from the CommandBar to
the popup menu.

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.