Tutor ial 3 3 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 appl ication can be done using the Xtreme Commandbar designer. Commandbar designer. If you do not want to code, refer to the Customizable tutorial.
2
Creating Dynamic Popup Figure 3.1. What you can create in this sample
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
Figure 3.2. Adding a new control
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 application’s main form.
Figure 3.3. CommandBars component added
Click on the CommandBars control
Go to the properties window
Name the control CommandBars.
5
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. Your menu should look like Figure 3.4.
Figure 3.4. Menu Editor
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 menu, you can now use all of the menu event procedures that Visual basic created for your custom menu and command bar.
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 Const Const Const Const
ID_FILE_NEW = 100 ID_FILE_OPEN = 101 ID_FILE_CLOSE = 102 ID_FILE_SAVE = 103 ID_FILE_EXIT = 104
Const Const Const Const
ID_EDIT_UNDO = 105 ID_EDIT_COPY = 106 ID_EDIT_PASTE = 107 ID_EDIT_CUT = 108
Const Const Const Const
ID_VIEW_TOOLBAR_EXTENDED = 130 ID_VIEW_TOOLBAR_STANDARD = 109 ID_VIEW_STATUSBAR = 110 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
Declare a Const when included as part of an object module. They must be Public Const in a .bas 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
Figure 3.5. Properties
8
4. From the properties page dialog, select the Images tab. You will see all of your toolbar icons.
Figure 3.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 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 Vi sual 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.
9
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.
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
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.
Figure 3.8. Sizing the control
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
11
Figure 3.9. 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
Figure 3.10. 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
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 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 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 i s 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
Refer to the previous steps (beginning on page 12) if you need help.
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"
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.
Figure 3.11. Extended Toolbar
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
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 CommandBars.KeyBindings.Add CommandBars.KeyBindings.Add CommandBars.KeyBindings.Add CommandBars.KeyBindings.Add
FCONTROL, FCONTROL, FCONTROL, FCONTROL, FCONTROL,
Asc("N"), Asc("O"), Asc("S"), Asc("X"), Asc("C"),
ID_FILE_NEW ID_FILE_OPEN ID_FILE_SAVE ID_EDIT_CUT 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.
Figure 3.12. Disabling the expand button
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:
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.
Figure 3.13. Adding Procedures
Type DockRightOf as the name, the type as sub, and it will be private (as in Figure 3.14. ) Click OK
Figure 3.14. Adding Procedures (cont.)
Private Dim Dim Dim Dim
Type in two parameters of type ICommandBar called BarToDock and BarOnLeft as shown:
Sub DockRightOf(BarToDock As CommandBar, BarOnLeft As CommandBar) Left As Long Top As Long Right As Long Bottom As Long
CommandBars.RecalcLayout BarOnLeft.GetWindowRect Left, Top, Right, Bottom
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 wh ich 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: Case ID_FILE_OPEN:
MsgBox Control.Caption & " Clicked" MsgBox Control.Caption & " Clicked"
22
Case ID_FILE_CLOSE: Case ID_FILE_SAVE:
MsgBox Control.Caption & " Clicked" 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 ea ch 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 Dim Dim Dim
Left As Long Top As Long Right As Long 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 control’s 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: Case ID_EDIT_COPY:
Control.Enabled = False 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
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). 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
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 ControlComboBox.Clear
'store current text
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 .
This method takes four parameters but only the second parameter, the control’s ID, is required
If you are able to find the control, place the control’s 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.
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 ControlComboBox.Clear
'store current text
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 button’s 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.
