MDIDocking Sample
MDIDocking Sample
Learn how to create an MDI application that has docking panes attached to each document
frame
Each new document will contain a docking pane with a property grid on it
Learn how to create an application that uses both docking panes and command bars
The MDI form will have a command bar, and one of the controls on the toolbar will
display a child form. The child form will contain its own command bar and two
docking panes
This tutorial will only illustrate how to incorporate several Codejock controls into the same
application. Each control has a separate in-depth tutorial.
MDI Docking
Figure 3.1.
What you can
create in this
sample
Figure 3.2.
Opening a new
project
Adding Controls
Once the VB Application Wizard is finished, display the toolbox (View->Toolbox).
Right-Click on an open area not occupied by a control and select
Components… from the pop-up menu. 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,
Xtreme PropertyGrid Controls ActiveX Control module, and Xtreme
DockingPane ActiveX Control module. Make sure that the check box is
selected and click OK
4
Figure 3.3.
Adding a new
control
You should now have the CommandBars control, DockingPane control, and
PropertyGrid control added to your Toolbox.
Right-click on the grey area of your main MDI form and select Menu Editor.
In the editor, hit the delete button until all of the menu items are removed from the
list box below.
This will remove the menu created by Visual Basic.
By allowing Visual Basic to create a menu, all of the menu event procedures
that Visual basic created can be used with the menu added to the command
bar.
To delete the toolbar generated by Visual Basic, click on the toolbar control
on your main MDI form and hit the delete key.
Do not delete the ImageList control. It will be used to supply images to the
command bar.
Place a CommandBars control (red box in Figure 3.4.) on any blank area on the
MDI form
Click on the CommandBars control
Go to the properties window
Name it CommandBars
Figure 3.4.
Adding
controls
Each document contained in the MDI application will have a docking pane attached to the
left side of the form that contains a property grid control. A DockingPane control is needed
in each form that will have a docking pane.
Place a DockingPane control (red box in Figure 3.5.) on any blank area of the
frmDocument form.
Click on the DockingPane control
Go to the properties window
Name it DockingPaneManager.
6
Figure 3.5.
Adding
controls
The docking pane attached to the document form will have an icon displayed on its tab
when the pane is docked as in Figure 3.6.
Figure 3.6.
Docking Pane
icon
Figure 3.7.
Opening
Properties
There will not be any images in the Images List box (red box in Figure 3.8.).
To add images:
1. Click on the Insert Picture… button
2. Navigate to the C:\Program Files\Codejock
Software\ActiveX\Suite\samples\Common\MDIDocking\Icons
directory.
3. Insert incon1.bmp into the image list as in Figure 3.8.
8
Figure 3.8.
Inserting
Pictures
The key and tag properties are not important for this ImageList. Leave them
as the default values.
The Index of the image will correspond to the Id of the docking pane.
A MaskColor is needed to mask transparent content of an image.
The image has a background color of green that needs to be set as the
transparent color.
To do this:
1. Click on the Color tab
2. Click on MaskColor (red box in Figure 3.9.) in the Properties box
3. Select Green from the Color Palette (blue box in Figure 3.9.)
4. Click the Apply button
5. Click OK to finish
It is recommended that you use a bitmap for your ImageList. Bitmaps will
look much better than icons when displayed on the docking pane tabs
9
Figure 3.9.
MaskColor
Figure 3.10.
Opening a new
form
10
Figure 3.11.
The New Form
Place a PropertyGrid control (red box in Figure 3.11.) on any blank area on
frmPropertyGrid form
Click on the PropertyGrid control
Go to the properties window
Name it wndPropertyGrid
Change the ToolBar Visible property to True.
A separate child form is created and will contain both a CommandBar and DockingPane
control. The child form is used to illustrate how to incorporate the CommandBar and
DockingPane controls together in the same form.
Add a new form to your project
Click on Project->Add Form
Make sure Form is selected
Click the Open button
11
Figure 3.12.
The New Form
Place a DockingPane control (red box in Figure 3.13) on any blank area of the
frmChild form
Click on the DockingPane control
Go to the properties window
Name it DockingPaneManager
Place a CommandBars control (yellow box in Figure 3.13.) on any blank area on
the frmChild form
Click on the CommandBars control
Go to the properties window
Name it CommandBars.
Figure 3.13.
Property Pages
With the General code section selected in the code view, assign an ID and index to
each and every CommandBar control
Add the following code to the General code section of frmMain
The name of the Id can be anything you want, but it is recommended that you follow
a naming scheme. For example, for the “New File” menu control, it is declared like
this: Const ID_NEW_FILE
Start with the prefix ID followed by the name of the CommandBar control, all
separated by underscores
Assign the CommandBar control ID an index number. The number can be any
integer (a number in the range 100-5700 should do), just make sure each index is
unique or the CommandBar controls items with an identical index will use the same
image and perform the same function
Make sure that the appropriate Tag value is assigned to each CommandBar control
ID if the control will use an image
In the sample, the print image has a Tag value of 113, so in General section of code,
the ID and index would be declared and assigned using the following line of code:
Const ID_FILE_PRINT = 113
Const ID_FILE_PRINT_SETUP = 114
CommandBar controls that do not have an image can be assigned any unique value.
14
This line of code is used to fill some internal parameters (Title, Path,
CompanyName, EXEName) that will be used by the CommandBars control.
The App object contains some useful properties that the CommandBars
control uses such as App.Title, App.Path, and App.EXEName.
The CommandBar will be created via code in this sample
The Toolbar will have a button that will open up a child form that has both a
DockingPane and CommandBars control.
After the CommandBar is complete, the imlToolbarIcons ImageList is loaded
To create the CommandBar, add the code in the diagram below to the
MDIForm_Load event procedure.
CommandBarsGlobalSettings.App = App
Control.BeginGroup = True
End With
CommandBars.AddImageList imlToolbarIcons
LoadNewDoc
End Sub
Case ID_VIEW_STATUSBAR:
sbStatusBar.Visible = Not sbStatusBar.Visible
CommandBars.RecalcLayout
Case ID_FORMAT_BOLD:
17
Case ID_EDIT_CUT:
Clipboard.SetText ActiveForm.rtfText.SelRTF
ActiveForm.rtfText.SelText = vbNullString
Case ID_EDIT_COPY: Clipboard.SetText ActiveForm.rtfText.SelRTF
Case ID_EDIT_PASTE: ActiveForm.rtfText.SelRTF = Clipboard.GetText
Case ID_VIEW_FORM:
Load frmChild
frmChild.Show
End Select
End Sub
Case ID_VIEW_FORM:
Load frmChild
frmChild.Show
This event procedure will be called automatically so you will not directly call
it in your code.
Without this procedure status bar would get drawn over.
Enabling/Disabling Commands
Some of the command buttons or menu selections 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.
The CommandBars_Update event procedure is used to do this
Add the following code to the CommandBars_Update event procedure
Case ID_FORMAT_BOLD:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
19
Control.Checked = ActiveForm.rtfText.SelBold
End If
Case ID_FORMAT_ITALIC:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelItalic
End If
Case ID_FORMAT_UNDERLINE:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelUnderline
End If
Case ID_FORMAT_ALIGNLEFT:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelAlignment = rtfLeft
End If
Case ID_FORMAT_CENTER:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelAlignment = rtfCenter
End If
Case ID_FORMAT_ALIGNRIGHT:
Control.Enabled = Not ActiveForm Is Nothing
If Not ActiveForm Is Nothing Then
Control.Checked = ActiveForm.rtfText.SelAlignment = rtfRight
End If
End Select
End Sub
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.
The frmPropertyGrid form contains a simple property grid that will allow the user to
change the BackColor of the document window. The frmPropertyGrid form will be
attached to a docking pane and the docking pane will be docked to a document frame.
Open the frmPropertyGrid form in Code view
20
A separate subroutine is created that will be called by the frmDocument form and let
the property grid control know which document form it is attached to. This is
necessary so it can change the BackColor of the document.
The subroutine will be passed a reference to the frmDocument form that called the
subroutine and place this reference in a variable that can be used throughout the
frmPropertyGrid form
In the General code section of the frmPropertyGrid form, an object variable of type
frmDocument is declared
This variable will hold a reference to the frmDocument form that has the docking
pane with the property grid control
Add the following code to the General code section of the frmPropertyGrid form.
Dim frmDocument As frmDocument
Figure 3.14.
Add Procedures
Type SetDocument as the name, the type as sub, and scope as public
Click OK
Visual Basic takes you to the new subroutine
Add the following code to the SetDocument subroutine.
This code will set a reference to the calling document and place it in the
frmDocument object pointer.
The property grid will only contain one category called “Settings” with two properties. The
“BackColor” property will bring up a color picker dialog that the user can select the color of
the document background.
Add the following code to the frmPropertyGrid event procedure.
Private Sub Form_Load()
Category.Expanded = True
Exit Sub
Err:
Debug.Print "Error: "; Err.Description
End Sub
Whenever a value is changed in the property grid, the ValueChanged event procedure is
called.
Add the code in the diagram below to the ValueChanged event procedure.
Private Sub wndPropertyGrid_ValueChanged(ByVal Item As XtremePropertyGrid.IPropertyGridItem)
Select Case Item.Caption
Case "BackColor": frmDocument.rtfText.BackColor = Item.Value
End Select
End Sub
The property grid control should take up the entire area of the docking pane. To do this, the
property grid control is resized to the same dimensions as the frmPropertyGrid form it was
placed on.
Add the following code to the frmPropertyGrid.Form_Resize event procedure.
Private Sub Form_Resize()
On Error Resume Next
wndPropertyGrid.Move Me.ScaleLeft, Me.ScaleTop, Me.ScaleWidth, Me.ScaleHeight
End Sub
The Move method is used to resize the property grid control. This will resize
the control each time the frmPropertyGrid form is resized.
This completes the frmPropertyGrid form.
The frmDocument form will have one docking pane attached to the left side of the frame.
The docking pane must be created and docked to the left side of the frame, then the
frmPropertyGrid form must be attached to the docking pane. For each new document, a
new frmPropertyGrid object must be created and attached to the docking pane. An object
variable of type frmPropertyGrid is declared in the General code section and is used to
hold a reference to a new frmPropertyGrid object.
Add the following code to the General code section of the frmDocument form.
Const ID_PANE_PROPERTIES = 1
Set PaneProperties = _
DockingPaneManager.CreatePane(ID_PANE_PROPERTIES, 210, 120, DockLeftOf, Nothing)
PaneProperties.Title = "Properties"
DockingPaneManager.ImageList = imlDockingPanes
frmPropertyGrid.SetDocument Me
End Sub
To attach the frmPropertyGrid frame to the docking pane, edit the DockingPanesManager
AttachPane event procedure. This event procedure will also be called automatically and does
not need to be directly called in your code.
Add the following code to the AttachPane event procedure.
Private Sub DockingPaneManager_AttachPane(ByVal Item As XtremeDockingPane.IPane)
Item.Handle = frmPropertyGrid.hwnd
End Sub
24
The Handle property of the docking pane is set to reference the Handle
property of the frmPropertyGrid frame.
The size of the client area, which is the area not occupied by a docking pane or command
bar, must be known so that the Rich TextBox can be resized and moved to the correct
location. Each time the docking pane is resized, the Rich TextBox must be moved to the
correct location. The DockingPaneManager event procedure Resize is called each time a
docking pane’s size is changed (closing, maximize, minimize, resize, hide, etc). 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 and the toolbar would be displayed over
the docking panes and open document.
Add the following code to the Resize event procedure.
Private Sub DockingPaneManager_Resize()
On Error Resume Next
End Sub
When the user closes the frmDocument window, the frmPropertyGrid form attached to the
docking pane is still in memory. In the fmrDocument.Form_Unload event procedure, the
frmPropertyGrid form must be unloaded.
Add the following code to the fmrDocument.Form_Unload event procedure.
Private Sub Form_Unload(Cancel As Integer)
Unload frmPropertyGrid
End Sub
The Unload method will remove the frmPropertyGrid form from memory.
This will complete the frmDocument form.
25
When the user clicks on the “Child Form” button on the toolbar, a child form with a
command bar and two docking panes is displayed.
To add the command bar and docking panes to the frmChild form, add the
following code to the frmChild.Form_Load event procedure.
DockingPaneManager.SetCommandBars Me.CommandBars
End Sub
This is necessary for correct resizing and layout of controls on the form.
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.