Dynamic Pop Up Sample

TTTuuutttooorrriiiaaalll 333

Dynamic Popup In this sample program you will:

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

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

Learn how to add a dynamic combo box to your toolbar

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

Learn how to create key bindings/accelerators via code It is recommended that you complete either the Designer or Customizable tutorial before completing this tutorial, as they contain many of the same techniques used here.

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

2

Figure 3.1. What you can create in this sample

Creating Dynamic Popup

3

Opening the Application

Open Visual Basic and Select new project from the file menu. Select VB Application

Wizard from the new project dialog box and click OK.

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

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

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

document if you included it in the menu). Click Next to continue.

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

Adding Controls to Your Toolbox

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

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

Select the Controls tab if it is not already selected and scroll down to the

bottom. You should see Xtreme CommandBars ActiveX Control module, make sure that the check box is selected and click OK

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

this:

4

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

Click on the CommandBars control

Go to the properties window

Name the control CommandBars.

Figure 3.2. Adding a new control

Figure 3.3. CommandBars component added

5

Right-click on the grey area of your main form

Select Menu Editor

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

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

You might not be able to see your ImageList control because it is directly behind your CommonDialog control. It is recommended that

you drag your CommonDialog control off of the ImageList control like in the diagram because you will have to interact with the ImageList control.

- ImageList control

- CommonDialog control

Figure 3.4. Menu Editor

6

To delete the toolbar generated by Visual Basic:

Click on the toolbar control on your main form

Hit the delete key

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

You are now ready to start coding the application.

IDs for the Controls

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

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

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

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

With the General section selected in the code view, you will have to assign an ID

to each and every command bar control.

Const ID_FILE_NEW = 100

Const ID_FILE_OPEN = 101

Const ID_FILE_CLOSE = 102

Const ID_FILE_SAVE = 103

Const ID_FILE_EXIT = 104

Const ID_EDIT_UNDO = 105

Const ID_EDIT_COPY = 106

Const ID_EDIT_PASTE = 107

Const ID_EDIT_CUT = 108

Const ID_VIEW_TOOLBAR_EXTENDED = 130

Const ID_VIEW_TOOLBAR_STANDARD = 109

Const ID_VIEW_STATUSBAR = 110

Const ID_VIEW_OPTIONS = 111

Const ID_HELP_ABOUT = 112

Const ID_FILE_PRINT = 113

Const ID_FILE_PRINT_SETUP = 114

Const ID_TOOLS_UNDO = 140

Const ID_TOOLS_UNDO_ITEM = 141

Const ID_TOOLS_UNDO_COMBO = 142

Const FCONTROL = 8

7

The name can be anything you want, but it is recommended that you follow a

naming scheme. For example, for the New File menu selection, declare it like this: Const ID_NEW_FILE

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

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

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

1. Select your main form in the object view.

2. Right-click on the ImageList control 3. Select properties from the pop-up menu

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

Figure 3.5. Properties

8

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

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

of 113, so in the General section of your code you would enter the

definition: Const ID_FILE_PRINT = 113.

Const ID_FILE_PRINT = 113

Const ID_FILE_PRINT_SETUP = 114

You can change the 113 to whatever you want; just make sure that all the

tags are unique and that the Tag value corresponds with the definition you created in the General code section.

There are two more images that must be added that Visual Basic did not

create that look like this:

To add images:

1. Click on the Insert Picture button

2. Navigate to the C:\Program Files\Codejock Software\ActiveX\Suite\samples\CommandBars\DynamicPopups\

Icons directory.

3. Add the help.bmp and undo.bmp images to the ImageList.

4. Make sure you set the Tag value to the same ID that was used in the General code section.

Figure 3.6. Property Pages

9

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

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

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

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

Add two command buttons, naming them cmdAdd and cmdRemove

You could design the menu and toolbar exactly how you want it in the Xtreme Command Bar Designer and generate the resource file like we did in the Designer tutorial. However, you will have to open the

ImageList properties and assign the appropriate Tag values that the Xtreme Designer generated. You might do this because you dont want to have the external .xcb file for your command bar. The advantage here would be that you get to see what your menu/toolbar will look like, and you can generate the resource file that already has appropriate IDs and Indexes. Just remember to change the Tag values in the ImageList control.

Figure 3.7. Controls on your form

10

Change their caption to Add and Remove.

Add a combo box

1. Name it cmbCommands

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

This completes the form setup.

Available Events

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

#1 Open up the object browser by hitting F2

Select XtremeCommandBars from the library list drop down menu

Figure 3.8. Sizing the control

11

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

icon next to them. #2 Go to your code view by hitting F7

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

Select the CommandBars option from the left drop down list and browse the right drop down list for a list of event procedures available to the

Figure 3.9. Displaying available events

Figure 3.10. Displaying available events

12

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

Coding the Menu and Toolbar

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

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

with the CommandBars control.

CommandBars.ActiveMenuBar.ModifyStyle &H400000, 0 'Remove gripper

CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched 'Prevent docking

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

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

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

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

Use CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched to disable

docking. The flag xtpFlagStretched indicates the menu bar can be stretched but not moved.

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

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

controls with the keyword Set.

Dim Control As CommandBarControl

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

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

13

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

"&File", -1, False)

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

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

With ControlFile.CommandBar.Controls

The CommandBar.Controls property represents a collection of controls related to

the ControlFile popup control with caption File located in the ActiveMenuBar. The Add method adds controls to the File control located in the ActiveMenuBar.

Using the keyword With, all below controls will be added to Files control. In the

example, controls of XTPControlType xtpControlButton are added to the Files control. These are the submenu controls in the popup File menu. The following

code adds the Save control button to the File popup button on the ActiveMenuBar.

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

In the process of creating the ActiveMenuBar, control popups are added to the

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

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

type CommandBarControl

In our example we call it Control as below

Private Sub Form_Load()

CommandBars.ActiveMenuBar.ModifyStyle &H400000, 0 'Remove gripper

CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched 'Prevent docking

Dim Control As CommandBarControl

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

"&File", -1, False)

With ControlFile.CommandBar.Controls

Set Control = .Add(xtpControlButton, ID_FILE_NEW, "&New", -1, False)

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

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

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

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

14

Control.BeginGroup = True

.Add xtpControlButton, ID_FILE_PRINT_SETUP, "Print Set&up...", -1, False

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


End With

Next you must create the &File control popup in the ActiveMenuBar by using the

Set command with CommandBars.ActiveMenuBar.Controls.Add(Type As XTPControlType, Id As Long, Caption As String, Before As Variant, Temporary

As Variant), which takes five parameters:

The first parameter specifies the type of control which is xtpControlPopup

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

Next is the caption that will be displayed.

Then we have two optional fields:

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

In the example, the control popup is named ControlFile. Now that the &File

control button is created in the ActiveMenuBar, submenu controls can be added. The previous Set statement created an xtpControlPopup with caption File in the

ActiveMenuBar.

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

primed with ControlFile.CommandBar.Controls.

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

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

"Files" control popup.

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

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

BeginGroup code after this line of code).

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

15

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

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

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

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

"&Edit", -1, False)

With ControlEdit.CommandBar.Controls

Set Control = .Add(xtpControlButton, ID_EDIT_UNDO, "&Undo", -1, False)

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


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)


End With

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

Set the XTPControlType to xtpControlPopup for the submenu control that will

have the popup menu. The &Toolbars submenu control will have the popup.

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

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

Use the pointer you just set to access the CommandBar.Controls.Add method from the CommandBarControl interface you called Control with

the command Control.CommandBar.Controls.Add as in the code shown.

16

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

When you are done adding popup menu controls, use the .Add method as

you did when creating the &File and &Edit submenu controls.

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

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

"&Undo", -1, False)

With ControlUndo.CommandBar.Controls

.Add xtpControlButton, ID_TOOLS_UNDO, "Undo", -1, False

End With

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

"&Help", -1, False)

With ControlHelp.CommandBar.Controls

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

End With

Creating the Standard Toolbar/Command Bar

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

Declare a CommandBar object variable of type CommandBar.

Name it ToolBar.

Do this with Dim ToolBar As CommandBar as well.

Now you must create the toolbar with the command

CommandBars.Add(Standard, xtpBarTop). You are creating a standard toolbar and docking it at the top of the application.

Begin adding controls to the ToolBar as in the following: Dim ToolBar As CommandBar

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

With ToolBar.Controls

Set Control = .Add(xtpControlButton, ID_FILE_NEW, "&New", -1, False)

Control.DescriptionText = "Create a new document"


Control.DescriptionText = "Open an existing document"

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

Control.DescriptionText = "Save the active document"

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

17

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


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


Set Control = .Add(xtpControlButton, ID_HELP_ABOUT, "&About", -1, False)


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:


Control.DescriptionText = "Open an existing document"

You are using the pointer to the control, Control, to assign a description to the toolbar button with the command Control.DescriptionText = Open an existing

document. This is the text that will be displayed in the statusbar.

Creating an Extended Toolbar

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

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

Figure 3.11. Extended Toolbar

18

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

Start by defining your CommandBar object interface

Name it ExtendedBar.

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

Dim ExtendedBar As CommandBar

Set ExtendedBar = CommandBars.Add("Extended", xtpBarTop)

With ExtendedBar.Controls

Set Control = .Add(xtpControlSplitButtonPopup, ID_TOOLS_UNDO, "Undo")

Control.CommandBar.Controls.Add xtpControlButton, ID_TOOLS_UNDO, "Undo"

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

End With

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

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

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

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

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

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

CommandBars.AddImageList imlToolbarIcons

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

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

CommandBars.KeyBindings.Add FCONTROL, Asc("N"), ID_FILE_NEW

CommandBars.KeyBindings.Add FCONTROL, Asc("O"), ID_FILE_OPEN

CommandBars.KeyBindings.Add FCONTROL, Asc("S"), ID_FILE_SAVE

CommandBars.KeyBindings.Add FCONTROL, Asc("X"), ID_EDIT_CUT

CommandBars.KeyBindings.Add FCONTROL, Asc("C"), ID_EDIT_COPY

19

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

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

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

The second parameter is the ASCII value of the keybinding

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

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

Const FCONTROL = 8

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

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

CommandBars.Options.ShowExpandButtonAlways = False

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

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

Pass it two of type CommandBar.

Pass the subroutine the ExtendedBar and ToolBar as parameters with the

command DockRightOf ExtendedBar, ToolBar as in the following:

Figure 3.12. Disabling the expand button

20

DockRightOf ExtendedBar, ToolBar

cmbCommands.AddItem "Undo Edit"

cmbCommands.AddItem "Undo Resize"

cmbCommands.Text = ""

Code the DockRightOf subroutine.

Click somewhere on your code view window

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

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

Click OK

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

Private Sub DockRightOf(BarToDock As CommandBar, BarOnLeft As CommandBar)

Dim Left As Long

Dim Top As Long

Dim Right As Long

Dim Bottom As Long

CommandBars.RecalcLayout

BarOnLeft.GetWindowRect Left, Top, Right, Bottom

Figure 3.13. Adding Procedures

Figure 3.14. Adding Procedures (cont.)

21

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

End Sub

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

Now we want to recalculate the entire area of the docking panes on the form with

the command CommandBars.RecalLayout. This ensures that the standard toolbar will be in the correct position before docking the extended toolbar.

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

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

The first parameter is the toolbar we are docking

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

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

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

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

Adding Event Procedures

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

Start by adding the Execute event procedure:

Go into your code view by hitting F7

Select CommandBars from the first drop-down list

Select Execute from the second drop-down list. Private Sub CommandBars_Execute(ByVal Control As XtremeCommandBars.ICommandBarControl)

Select Case Control.Id

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

Case ID_VIEW_TOOLBAR_STANDARD: CommandBars(2).Visible = Not CommandBars(2).Visible

Case ID_VIEW_TOOLBAR_EXTENDED: CommandBars(3).Visible = Not CommandBars(3).Visible

Case ID_VIEW_STATUSBAR:

sbStatusBar.Visible = Not sbStatusBar.Visible

CommandBars.RecalcLayout

Case ID_FILE_NEW: MsgBox Control.Caption & " Clicked"

Case ID_FILE_OPEN: MsgBox Control.Caption & " Clicked"

22

Case ID_FILE_CLOSE: MsgBox Control.Caption & " Clicked"

Case ID_FILE_SAVE: MsgBox Control.Caption & " Clicked"

Case ID_TOOLS_UNDO_ITEM: MsgBox Control.Caption & " Clicked"

Case ID_TOOLS_UNDO_COMBO:

If Control.Type = xtpControlComboBox Then

CurrentIndex = Control.ListIndex

If (CurrentIndex > 0) Then MsgBox Control.List(CurrentIndex)

End If

Case ID_FILE_EXIT: Unload Me

End Select

End Sub

In this event procedure, we will set up a switch statement that will check to see which command bar/ menu item was selected. The switch statement will accept and compare the

Command Bar IDs. We will be using the IDs that we defined in the General section of our code.

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

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

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

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

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

As you can see in the event procedure header, the variable is called Control

and is of type XtremeCommandBars.ICommandBarControl.

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

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

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

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

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

23

We need to use some code to take into account the size of the status bar when drawing the

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

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

Private Sub CommandBars_GetClientBordersWidth(Left As Long, Top As Long, Right As Long, _

Bottom As Long)

If sbStatusBar.Visible Then

Bottom = sbStatusBar.Height

End If

End Sub

GetClientBordersWidth(Left As Long, Top As Long, Right As Long, Bottom As

Long) takes 4 parameters of type Long. These parameters represent the top, bottom, left, and right borders of the application window.

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

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

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

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

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

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

Add the CommandBars event procedure Resize

Private Sub CommandBars_Resize()

On Error Resume Next

Dim Left As Long

Dim Top As Long

Dim Right As Long

Dim Bottom As Long

CommandBars.GetClientRect Left, Top, Right, Bottom

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

End Sub

This event procedure takes the same parameters as GetClientBordersWidth.

24

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

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

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

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

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

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

20.

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

Private Sub CommandBars_ControlSelected(ByVal Control As XtremeCommandBars.ICommandBarControl)

If Not Control Is Nothing Then

sbStatusBar.Panels(1).Text = Control.DescriptionText

Else

sbStatusBar.Panels(1).Text = ""

End If

End Sub

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

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

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

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

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

Create the CommandBars_Update event procedure. This event procedure is passed

the same object as the Execute event procedure.

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

25

Private Sub CommandBars_Update(ByVal Control As XtremeCommandBars.ICommandBarControl)

On Error Resume Next

Select Case Control.Id

Case ID_EDIT_CUT: Control.Enabled = False

Case ID_EDIT_COPY: Control.Enabled = False

Case ID_VIEW_TOOLBAR_STANDARD: Control.Checked = CommandBars(2).Visible

Case ID_VIEW_TOOLBAR_EXTENDED: Control.Checked = CommandBars(3).Visible

Case ID_VIEW_STATUSBAR: Control.Checked = sbStatusBar.Visible

End Select

End Sub

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

In our example, we are enabling/disabling our Cut and Copy command

button/menu items based on whether the user has some text in the combobox selected.

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

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

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

This will be the last CommandBars event procedure. We need to code the event procedure

InitCommandsPopup to initialize the combobox and split button popup every time the user clicks on one of them. This event procedure is automatically called when the user clicks on the combobox or split button popup control. It is passed a CommandBar instead of a

CommnadBarControl. Refer to the following code.

Private Sub CommandBars_InitCommandsPopup(ByVal CommandBar As XtremeCommandBars.ICommandBar)

Dim Control As CommandBarControl, ControlItem As CommandBarControl

Set Control = CommandBar.FindControl(, ID_TOOLS_UNDO)

If Not Control Is Nothing Then

Index = Control.Index

Control.Visible = False

'Remove Previous Items

Do While Index + 1

26

ControlItem.Delete

Else

Exit Do

End If

Loop

'Add Items

For i = 0 To cmbCommands.ListCount - 1

ListItem = cmbCommands.List(i)

Index = Index + 1

CommandBar.Controls.Add xtpControlButton, ID_TOOLS_UNDO_ITEM, ListItem, Index

Next

End If

'if combo list box popuped

If CommandBar.Position = xtpBarListBox Then

If (Not CommandBar.Parent Is Nothing) And (CommandBar.Parent.Type = xtpControlComboBox)

Then

Dim ControlComboBox As CommandBarComboBox

Set ControlComboBox = CommandBar.Parent 'return ComboBox control

CurrentText = ControlComboBox.Text 'store current text

ControlComboBox.Clear


ControlComboBox.AddItem cmbCommands.List(i)

Next

IndexCurrent = ControlComboBox.FindItem(CurrentText)

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

End If

End If

End Sub

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

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

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

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

Index.

With the pointer, Control still pointing to the dummy control in our split

button popup, use Control.Visible = False to hide the dummy control.

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

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

27

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

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

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

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

'Remove Previous Items

Do While Index + 1

28

Clear the combobox on the toolbar

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

To add items to the combobox control:

1. Create a For loop from 0 to the ListCount of the combobox on the main form minus 1 (because we start at 0).

2. We can interact with the ControlComboBox control just like a normal combobox.

3. To add the items use the AddItem method.

4. Use ControlComboBox.AddItem cmbCommands.List(i) to add every item to the combobox control.

Select the item the user had currently selected

1. Find the index of the text we saved

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

'if combo list box popuped

If CommandBar.Position = xtpBarListBox Then

If (Not CommandBar.Parent Is Nothing) And (CommandBar.Parent.Type = xtpControlComboBox) Then

Dim ControlComboBox As CommandBarComboBox

Set ControlComboBox = CommandBar.Parent 'return ComboBox control

CurrentText = ControlComboBox.Text 'store current text

ControlComboBox.Clear


ControlComboBox.AddItem cmbCommands.List(i)

Next

IndexCurrent = ControlComboBox.FindItem(CurrentText)

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

End If

End If

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

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

Double-click on the command button in form view and you will be taken to that

buttons Click event procedure. Refer to the code below.

All we do in the Add event procedure is check whether the user entered anything; if

they did, then that item will be added to the combobox.

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

Private Sub cmdAdd_Click()

29

If cmbCommands.Text "" Then

cmbCommands.AddItem cmbCommands, Text

End If

End Sub

Private Sub cmdRemove_Click()

If cmbCommands.ListIndex >= 0 Then

cmbCommands.RemoveItem cmbCommands.ListIndex

End If

End Sub

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

Documents

Dynamic Pop Up Sample