Tutorial 2

The Designer
In this sample program you will:

Learn how to create an application that loads the default designer command bar

Learn how to add functionality to the command bar via event procedures

Learn how to add the CommandBars ActiveX control module to your application

You can add more toolbars and controls to this default command bar via code. You will learn how
to create command bars and controls via code in another tutorial.
2

Using the Designer

Figure 2.1.
What you can
create with the
Designer

Start Visual Basic and select new project from the file menu. Select Standard EXE
from the new project dialog box and click OK.

Figure 2.2.
Opening a new
project
3

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:

Figure 2.3.
Adding a new
control

Now you must add the Rich Textbox Control IF it is not already in your toolbox.

Follow the steps outlined previously to add a new control made in the previous
directions (page 3), this time adding the Microsoft Rich Textbox Control 6.0. You
should have a new control in your toolbox:
4

Figure 2.4.
Adding the
Rich Text Box
Control

Add the Microsoft Windows Common Controls 5.0 (SP4) and Microsoft Windows
Common Controls-3 6.0 (SP5) components.

Figure 2.5.
Adding common
controls

You should now have several new controls added to your toolbox; you will
be using the Status Bar control in this project.
5

Adding Controls to Your Form

Add the CommandBars, Status Bar, and Rich Textbox controls to the form.
 Place a CommandBars control (red box in Figure 2.6.) on any blank area
 Click on the CommandBars control, go to the properties window and name
it CommandBars
 Add a Status Bar control (green box in Figure 2.6.) to your form
 Click on the control, and go to the properties window and change the name
to sbStatusBar.
 Add a Rich Textbox control (blue box in Figure 2.6.) to your form
 Click on the control, go to the properties window and change the name to
rtfText, change the ScrollBars property to 3-rtfBoth, and delete the text in
the Text property as in the properties diagram in Figure 2.6.

Figure 2.6.
Adding
controls to the
form

You are now ready to start adding code for the CommandBars component. To load
the default designer command bar, add the code CommandBars.LoadDesignerBars
to the Form_Load event procedure:

Private Sub Form_Load()

Me.Left = GetSetting(App.Title, "Settings", "MainLeft", Me.Left)

Me.Top = GetSetting(App.Title, "Settings", "MainTop", Me.Top)
Me.Width = GetSetting(App.Title, "Settings", "MainWidth", Me.Width)
Me.Height = GetSetting(App.Title, "Settings", "MainHeight", Me.Height)

CommandBars.LoadDesignerBars
CommandBars.LoadCommandBars "Codejock Software ActiveX Demos", App.Title, "Layout"

End Sub
6

The LoadDesignerBars method loads a command bar layout from a file. If no

parameters are given, the default designer command bar is loaded. You will not pass
any parameters because we want to use the default designer command bar.

Loading the Custom Settings

Because users will be able to customize the command bar (i.e. Add and remove buttons),
you will need to load their custom settings. This way the users do not have to go back and
customize the command bar every time they open the application. To do this, you need to
read the previous settings from the system registry in which they are saved (This is explained
below). You do this with the CommandBars.LoadCommandBars method.

CommandBars.LoadCommandBars "Codejock Software ActiveX Demos", App.Title, "Layout"

This method takes three string parameters, which are the Registry key, Application Name,
and the Section (folder) in which the settings will be saved. This completes the Form_Load
event procedure.

You should now be able to compile your application and see your new menu and
command bar. However, it will not have any functionality.

Run your application to make sure everything is in order. If not, go back through the
previous steps until you can run your application and see your command bar and
menu.

Make sure you save the users command bar settings. Because users will be able to
customize the command bar (i.e. Add and remove buttons) you need a way to save
their settings for the next time they open the application. To do this, your settings
are saved to the systems registry. You do this with the
CommandBars.SaveCommandBars method.

Private Sub Form_Unload(Cancel As Integer)

CommandBars.SaveCommandBars "Codejock Software ActiveX Demos", App.Title, "Layout"

If Me.WindowState <> vbMinimized Then

SaveSetting App.Title, "Settings", "MainLeft", Me.Left
SaveSetting App.Title, "Settings", "MainTop", Me.Top
SaveSetting App.Title, "Settings", "MainWidth", Me.Width
SaveSetting App.Title, "Settings", "MainHeight", Me.Height
End If

End Sub

This method takes three string parameters, which are the Registry key, Application
Name, and the Section (folder) in which the settings will be saved. The following line
of code will save your application’s command bar settings in the system registry
under HKEY_CURRENT_USER\Software\Codejock Software ActiveX
Demos\DesignerSample. This should be the first line of code in your main
application’s Form_Unload event procedure:
7

CommandBars.SaveCommandBars "Codejock Software ActiveX Demos", App.Title, "Layout"

You should now be able to save and load your command bar settings. Try this now
to make sure everything is in order. If not, repeat all previous steps to figure out
what went wrong.

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 2.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.
8

#2
 Go to your code view by hitting F7

Figure 2.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.

Adding Event Procedures

Before you can code CommandBars event procedures, you need a way to know
what control has been clicked. This is done by assigning an ID and index number to
each control. This same ID is used to assign an icon to a control. Because you are
using the default designer command bar, IDs and index numbers have already been
predefined. These IDs and index numbers are displayed in the diagram below and
are included in a .bas module.

Public Const ID_APP_ABOUT = 57664

Public Const ID_FILE_PROPERTIES = 1020
Public Const ID_WINDOW_TILE_HORZ = 57651
Public Const ID_EDIT_PASTE = 57637
Public Const ID_APP_EXIT = 57665
Public Const IDR_MENUBAR = 1
Public Const ID_WINDOW_CASCADE = 57650
Public Const IDR_STANDARD = 143
Public Const ID_FILE_CLOSE = 57602
Public Const ID_EDIT_CUT = 57635
Public Const ID_FILE_SAVE_AS = 57604
Public Const ID_FILE_PRINT = 57607
Public Const ID_FILE_SAVEALL = 1023
Public Const ID_VIEW_STATUS_BAR = 59393
Public Const ID_FILE_OPEN = 57601
Public Const ID_EDIT_COPY = 57634
Public Const ID_EDIT_UNDO = 57643
Public Const ID_FILE_NEW = 57600
Public Const IDR_UNTITLED = 1021
Public Const IDR_EDIT_BAR = 1022
Public Const ID_WINDOW_ARRANGE = 57649
Public Const ID_FILE_SAVE = 57603

These values are all predefined and cannot be changed. You will learn how to change
IDs when you create your own custom command bar.
9

To create a new module:

 Add the file to your project
 Make sure you are displaying the project explorer
 Right-click on the open area under the Forms folder
 Select Add from the pop-up menu
 Select Module from the second pop-up menu.

Figure 2.9.
Display project
explorer

From the open dialog, click the Open button to open the new module in code view

Type in the control IDs and index numbers listed in the first diagram in this step or
cut and paste from the module included with this sample.

You have now added your resource file and can begin associating your command bar
controls with their IDs and Index number.

Caution: DO NOT change the ID or Index number in the resource file;

these values were generated in the Xtreme designer and changing a value
will cause your command bar to malfunction. If you decide to add
controls to the command bar via code, you will need to add an ID and
Index number for the control. You can assign any values you like, just
make sure they are unique.
10

Now you 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)

On Error Resume Next

Select Case Control.Id

Case ID_APP_ABOUT: MsgBox "Version " & App.Major & "." & App.Minor & "." & App.Revision

Case ID_FILE_NEW: MsgBox Control.Caption & " Clicked"

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

Case ID_APP_EXIT: Unload Me

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

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

End Select
End Sub

In this event procedure, you will set up a Select statement that will check to see which
command bar/ menu item was selected. The switch statement will accept and compare the
Command Bar IDs. You will be using the IDs that were defined in the .bas module.

Create an entry in your switch statement for each ID you defined in the .bas resource
module.

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 a save file dialog when
the save button is clicked:
 Display a message box stating that the toolbar button was clicked when the
New File, Open, Close, and Save controls are 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 you can get from Control, but you are only interested in
the command ID for this example. If you would like to know all the available
11

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
 Place the appropriate code for each Case in your switch statement.
Now you should be able to run your application and have your command buttons
execute the code you supplied for their ID.

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.

Make sure that your rich text box is the same size as the open document window not
occupied by controls. This means the rich text box will fill the entire form area not occupied
by the status bar, toolbars, or menubar.

Add the following code to the CommandBars_Resize event procedure

Private Sub CommandBars_Resize()

On Error Resume Next

12

Dim Left As Long

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

CommandBars.GetClientRect Left, Top, Right, Bottom

rtfText.Move Left, Top, Right - Left, Bottom - Top

rtfText.RightMargin = IIf(rtfText.Width > 400, rtfText.Width - 400, rtfText.Width)

End Sub

This event procedure takes the same parameters as GetClientBordersWidth

explained previously.
 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.
 The rtfText.Move method is used to resize the rich text box to the size of the
open form.

If you need help with the rich text box and its methods, it is well
documented in the Microsoft help documentation.

 To determine the right margin of the rich text box, you need to make a
decision based on whether or not the width is greater than 400.
 The Immediate-If function (IIF) is used to evaluate the width of the rich
textbox. The IIF function takes three parameters: the first is the expression
to evaluate, the next is what should be done if the expression is true, and the
last happens if the expression is false

Check the Microsoft help files for more help using the IIf function.
13

Now we must take care of 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:

To do this we will create the CommandBars_Update event procedure. This event

procedure is automatically passed the same object as the Execute event procedure.
Refer back to page 10 for a more detailed explanation of this parameter. This event
procedure should be set up exactly the same as the Execute event procedure as
below:

Private Sub CommandBars_Update(ByVal Control As XtremeCommandBars.ICommandBarControl)

On Error Resume Next

Select Case Control.Id
Case ID_EDIT_CUT, ID_EDIT_COPY:
Control.Enabled = Not rtfText.SelLength = 0
Case ID_EDIT_PASTE: Control.Enabled = True
Case ID_VIEW_STATUS_BAR: 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 control 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 controls based on whether the user has some
text in the rich textbox selected. When we update the checkmarks next to the
controls that can have checkmarks next to them, we will check if the user has hidden
the status bar, standard toolbar, or themes toolbar. Finally, we set the properties if
the rich text box based on which of the rich textbox formatting and editing controls
were clicked. 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 check/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 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.