sdi sample

7/31/2019 Sdi Sample

1/25

TTTuuutttooorrriiiaaalll 222

SDI Sample

In this sample program you will:

Learn how to attach docking panes to an application. Learn how to attach panes create three docking panes that can be displayed in any combination

along with the applications main document.

Learn how to tell when a docking pane performs an action like open, close, or floatYou will create three docking panes that can be displayed in any combination along with the applicationsmain document. The main document can be hidden from view so only the docking panes are in the clientwindow. The splitter tracker is used when resizing a docking pane; the splitter tracker will only display a

line indicating where the new docking pane boundary will be when the mouse button is let up.


2/25

2

Figure 2.1.What you cancreate in thissample

Creating SDI

Opening the Application

Open Visual Basic and Select new projectfrom the file menu. Select VB ApplicationWizardfrom the new project dialog box and clickOK

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

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

ClickFinish For this sample you will use the default command bar that Visual Basic creates


3/25

3

Adding Controls

Once the VB Application Wizardis 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 seeXtremeDockingPaneActiveXControlmodule, make sure thatthe check box is selected and clickOK

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

Now, add the Rich Text Box Control if it is not already in your toolbox. Follow the same steps asyou did above, adding theMicrosoft Rich Textbox Control 6.0.

You should now have a new control in your toolbox that looks like this:

Adding the Controls to the Form

You will need to add theDockingPane,ImageList, andRich TextBox controls to the main form.

Place aDockingPane control (Red box in Figure 2.3.) on any blank area on your form. Click on theDockingPane control Go to the properties window Name itDockingPaneManager.

Figure 2.2.Adding a newcontrol


4/25

4

Add aRichTextbox control (Blue box in Figure 2.3.) to your form Click on the control Go to the properties window Change the name to rtfText Change the ScrollBars property to 3-rtfBoth Delete the text in the Textproperty as in the properties diagram in Figure 2.3.

Add anImageListcontrol (Green box in Figure 2.3.) to your form Click on the control Go to the properties window Change the name to imlPaneIcons Change theImageHeightandImageWidth to 16.

Visual Basic will create two controls: A CommonDialogcontrol (Purple box in Figure 2.3.) An ImageListcontrol (Purple box in Figure 2.3.) Leave them on the form. You will not need to modify them.

Icons

Each docking pane will have an icon displayed on its tab when the pane is docked as in Figure2.4.

Figure 2.3.Controls


5/25

5

Right-click on the imlPaneIcons ImageListcontrol and selectproperties from the pop-upmenu.

There will not be any icons in theImages: List box (red box in Figure 2.6.) To add images, click on theInsert Picture button and navigate to the

C:\Program Files\Codejock

Software\ActiveX\Suite\samples\DockingPane\SDISample\Icons directory.

Figure 2.4.Docking PaneTabs

Figure 2.5.DisplayingProperties


6/25

6

Insert incon1.bmp, incon2.bmp, and icon3.bmp as in Figure 2.6.

The key and tagproperties are not important in this project. Leave them as the defaultvalues.

The index of the image will correspond to the ID of each docking pane. AMaskColoris needed to mask transparent content of an image. Each image has a

background color of green that must be set as the transparent color.

To do this click on the Colortab. Click on MaskColor(red box in Figure 2.7.) in the Properties box Select Green from the Color Palette (blue box in Figure 2.7.) Click the Apply button ClickOKto finish.

Figure 2.6.Inserting Icons

It is recommended that you use a bitmap for yourImageList. Bitmaps willlook much better than icons when displayed on the docking pane tabs.


7/25

7

Adding the Pane Controls

There will be a control in the menu to access each docking pane.

You will need to add three controls to the menu, one for each pane. The panes will be namedPaneA,PaneB, andPaneC. To create the controls:

Right-click on the grey area of your main form SelectMenu Editor Scroll through the list of menu controls Click on theRefresh control Click the Insert button.

Figure 2.7.Setting the

MaskColor


8/25

8

Enter Pane A as the caption (red box in Figure 2.9.) Enter mnuPaneA as theName (blue box in Figure 2.9.) The name is used as the

Clickevent procedure. Click the Next button Click the Insertbutton

Enter Pane B as the caption, and mnuPaneB as theName. Do the same for Pane C.

Click the Next button Click the Insert button

Figure 2.8.Opening the

Menu Editor

Figure 2.9.The MenuEditor


9/25

9

Enter a separator under Pane C by entering a hyphen ( - ) as the caption. Enter Hide Client as the Caption, and mnuHideClientas theName. Click the Next button Click the Insert button Enter Use Splitter Tracker as the Caption, mnuUseSplitterTrackeras the

Name, and make sure the Checkedoption (green box in Figure 2.9.) has a checkmark.

Delete theRefresh, Options, and WebBrowsercontrols from the menu. Click the OKbutton when you are finished entering all three controls. Your menu should look like Figure 2.10. below.

Creating New Docking Panes

A separate form is used to create new docking panes.

Add a new form to your project. Click onProject->Add Form Make sureForm is selected

Figure 2.10.Your Menu


10/25

10

Click the Open button

Visual Basic will display a new form. With the new form selected, go to the properties window and change:

1. Name tofrmPane2. BackColortoButtonShadow3. BorderStyle to 0-None4. MaxButton toFalse5. MinButton toFalse6. ScaleMode to 3-Pixel

Place a textbox control on the form (see Figure 2.13.) With the textbox selected, go to the properties window and change:

Figure 2.11.

Adding a NewForm

Figure 2.12Properties offrmPane


11/25

11

Figure 2.14.Displayingavailable events

1. Name to txtContent2. BorderStyle to 1-Fixed Single3. Delete the description in the Textproperty

Available Events

Look at all of the available events theDockingPane control provides. There are two waysto do this:

#1

Open up the object browser by hittingF2 SelectXtremeDockingPane from the library list drop down menu

Figure 2.13txtContextProperties


12/25

12

Select theDockingPane entry in the list box. Now you can see all of the availablemembers, methods, events, properties, functions, and subs. If you click on amember 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 eventprocedures available for those controls.

Select theDockingPaneManageroption from the left drop down list and browsethe right drop down list for a list of event procedures available to theDockingPane control. It is this second method that we will be using to add codeto the differentDockingPane event Procedures.

Creating the PanesThree panes of typefrmPane must be created.

Declare an array of three elements of typefrmPane in the Generalcode section. Name the arrayarrPanes.

Dim arrPanes(1 To 3) As frmPane

This array will contain the three panes that you will be docking in the application.

With the array of panes declared, create three panes and dock them to the application.

To do this, start coding theForm_Loadevent procedure of the main form as inthe following code

Private Sub Form_Load()

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

Me.Top = GetSetting(App.Title, "Settings", "MainTop", 1000)

Me.Width = GetSetting(App.Title, "Settings", "MainWidth", 6500)

Me.Height = GetSetting(App.Title, "Settings", "MainHeight", 6500)

Dim A As Pane, B As Pane, C As Pane

Set A = DockingPaneManager.CreatePane(1, 200, 120, DockLeftOf, Nothing)

A.Title = "Pane A"

Figure 2.15.Displayingavailable events


13/25

13

Set B = DockingPaneManager.CreatePane(2, 200, 120, DockTopOf, A)

B.Title = "Pane B"

Set C = DockingPaneManager.CreatePane(3, 200, 120, DockTopOf, B)

C.Title = "Pane C"

DockingPaneManager.ImageList = imlPaneIcons

DockingPaneManager.LoadState "Codejock Software Demos", "SDISample", "Layout"

End Sub

Start by declaring three objects of typePane, which represents a docking pane. Name them A, B, and C Create the three docking panes Use theDockingPaneManager.CreatePane method to create and dock the pane. The CreatePane method takes five parameters:

1. The ID of the pane2. The initial width of the pane in pixels3. The initial height of the pane in pixels4. The direction in which to dock the pane5. The neighboring pane that the pane will be docked to

The fifth parameter can be the keywordNothingwhen you want to use the mainframe as a neighbor.

The ID should be the same as the index of the corresponding icon in theImageList.

In the example, Pane A is docked toNothing. This will dock the pane to the main form. DockLeftOfis passed as a parameter. This places the docked pane on the left side

of the main form.

The pane will have an initial width of 200 pixels and height of 120 pixels.

Set A = DockingPaneManager.CreatePane(1, 200, 120, DockLeftOf, Nothing)

A.Title = "Pane A"

Next, create panes B and C.Set B = DockingPaneManager.CreatePane(2, 200, 120, DockTopOf, A)

B.Title = "Pane B"

Set C = DockingPaneManager.CreatePane(3, 200, 120, DockTopOf, B)

C.Title = "Pane C"

Pane B is docked to the top of Pane A


14/25

14

Pane C is docked to the top of Pane B

Now associate the imlPaneIconsImageListwith the docking panes using the followingcode

DockingPaneManager.ImageList = imlPaneIcons

In the sample, the last state/position the docking panes were in when the application wasclosed will be loaded from the systems registry (how to save your settings to the registry inexplained later in this tutorial).

To do this, use theLoadState method.DockingPaneManager.LoadState "Codejock Software Demos", "SDISample", "Layout"

This method takes three string parameters:1. TheRegistrykey2. TheApplicationName3. The Section (folder) in which the settings will be saved.

So far, the panes have been created. Each element of thefrmPane array needs to beassociated/attached with a docking pane.

Saving the Users Settings

The next step is to make sure you save the state and position the docking panes were in when theuser closed the application. Because the user will be able to close, hide, move, and resize thedocking panes, you need a way to save their settings for the next time they open the application.

Use theDockingPaneManager.SaveState method. The SaveState method saves the pane layout to the registry. The layout will be saved to the registry key path built from theRegistryKey,

AppName and Section parameters as follows:HKEY_CURRENT_USER\Software\ + RegistryKey + AppName +

"DockingPaneLayouts" + Section.

Private Sub Form_Unload(Cancel As Integer)

Dim i As Integer

DockingPaneManager.SaveState "Codejock Software Demos", "SDISample", "Layout"

All of these panes can be closed and hidden. The MDI sample explains

how to change this default behavior.


15/25

15

'close all sub forms

For i = Forms.Count - 1 To 1 Step -1

Unload Forms(i)

Next

If Me.WindowState vbMinimized Then

SaveSetting App.Title, "Settings", "MainLeft", Me.Left

SaveSetting App.Title, "Settings", "MainTop", Me.Top

SaveSetting App.Title, "Settings", "MainWidth", Me.Width

SaveSetting App.Title, "Settings", "MainHeight", Me.Height

End If

End Sub

This method takes three string parameters:1. Registrykey2. ApplicationName3. Section (folder) in which the settings will be saved.

The following line of code will save your applications command bar settings in thesystem registry under HKEY_CURRENT_USER\Software\Codejock Software

Demos\SDISample

DockingPaneManager.SaveState "Codejock Software Demos", "SDISample", "Layout"

This should be the first line of code in your main applicationsForm_Unloadevent procedure.

The Action Event ProcedureEach time an action is performed on a docking pane, the Action event procedure is called.

An action occurs when the docking pane is being attached, attaching, closed, closing,docked, docking, floated, floating, pinned, and pinning.

When theAction event is triggered, it is passed the type of action, the pane performing theaction, and whether the action was canceled.

One use for this event might be if a user decides to close a docking pane, a dialog could bedisplayed with an appropriate message.

To demonstrate how theAction event procedure works, add the code below to theDockingPaneManager_Action event procedure

Private Sub DockingPaneManager_Action(ByVal Action As XtremeDockingPane.DockingPaneAction, _

ByVal Pane As XtremeDockingPane.IPane, Cancel As Boolean)

On Error Resume Next

Dim Actions

Actions = Array("PaneActionFloating", "PaneActionFloated", _

"PaneActionClosing", "PaneActionClosed", "PaneActionDocking", "PaneActionDocked", _

"PaneActionAttaching", "PaneActionAttached", "PaneActionPinning", "PaneActionPinned")

Debug.Print "Action = "; Actions(Action); "; Title = "; Pane.Title

End Sub


16/25

16

The type of action is passed in as an integer that is used as an index in theActionsarray.

For example, when a pane is closed, the Action event is triggered two times.1. The first time, the index 2 is passed indicating the pane is closing.2. The second time, the Action event is triggered an index of 3 is passed

indicating the pane was closed.

A Debug.Print line is used to display each action in theImmediate window of theVisual Basic development environment.

Figure 2.16. shows theImmediate window after a few docking pane actions aretriggered.

Height of the Status Bar and ToolbarThe height of the status bar and toolbar must be found before the docking panes and rich text boxcan be sized and positioned on the form.

TheDockingPaneManagerevent procedure GetClientBordersWidth is where thepositions of the docking panes and rich text box are determined.

This event procedure will be called automatically so you will not directly call it in yourcode.

Without this procedure, you would not see your status bar and the toolbar would bedisplayed over the docking panes and open document.

To edit the GetClientBordersWidth event procedure: Go into the main forms code view by hitting F7 SelectDockingPaneManagerfrom the left drop-down list Select GetClientBordersWidth from the right drop-down list

Figure 2.16.Immediatewindow


17/25

17

Figure 2.17.Selecting

GetClientBordersWidth

GetClientBordersWidth takes four parameters of typeLong. These parameters represent the top, bottom, left, and right borders of the

application window as below

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

Bottom As Long)

If sbStatusBar.Visible Then

Bottom = sbStatusBar.Height

End If

If tbToolBar.Visible ThenTop = tbToolBar.Height

End If

End Sub

In the event procedure, the Top andBottom parameters are updated based onwhether the status bar or toolbar are visible.

The parameters let theDockingPane control know where it can position thedocking panes.

To ensure the rich text box is the same size as the open document window, change therich text boxs border size as in the code below.

This means the rich text box will fill the entire form area not occupied by thestatus bar, toolbars, menubar, or docking panes.

To do this, add theDockingPaneManagerevent procedureResize, just as youadded the GetClientBordersWidth.

This event procedure will be called automatically so you will not directly call it inyour code.

Private Sub DockingPaneManager_Resize()


Dim Left As Long

Dim Top As Long

Dim Right As Long

Dim Bottom As Long

DockingPaneManager.GetClientRect Left, Top, Right, Bottom

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

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

End Sub

This event procedure takes the same parameters as the GetClientBordersWidthevent procedure.


18/25

18

1. Call the GetClientRectmethod passing in the parametersLeft, Top,Right,andBottom.

This event procedure retrieves the dimensions of the client rectangle, that is, thearea on the form which does not have any docking panes.

The rich text box should fill the open area of the form. To do this, you use the methods of the rich text box. The rtfText.Move method is used to resize the rich text box with the Left, Top,

Right, and Bottom parameters retrieved by the GetClientRectmethod, which willsize the rich text box to fill the forms open area.

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

To determine the right margin of the rich text box, you need to make a decisionbased on whether the width is greater than 400.

TheImmediate-Iffunction (IIF) is used to evaluate the width of the rich textbox. TheIIFfunction takes three parameters

1. The expression to evaluate2. What should be done if the expression is true3. The last happens if the expression is false.

Check the Microsoft help files for more help using theIIffunction.

Attaching the Frames to the Docking Panes

To attach the frames to the docking panes, edit theDockingPanesManagereventprocedureAttachPane as done in the previous steps.

This event procedure will also be called automatically and does not need to be directlycalled in your code.

Private Sub DockingPaneManager_AttachPane(ByVal Item As XtremeDockingPane.IPane)'If Form not create yet.

If arrPanes(Item.Id) Is Nothing Then

Set arrPanes(Item.Id) = New frmPane

End If

'Attach Form to Pane

Item.Handle = arrPanes(Item.Id).hwnd

End Sub

TheAttachPane event procedure is passed an object of typePane calledItem. This event procedure will be called for each docking pane created in the

Form_Load.


19/25

19

In the event procedure, a new frame of typefrmPane will be created and added tothe arrPanes array.

The array index will correspond with the ID of the docking paneIf arrPanes(Item.Id) Is Nothing Then

Set arrPanes(Item.Id) = New frmPane

End If

After a frame has been created, the frame is attached to the docking pane with thefollowing code:

'Attach Form to Pane

Item.Handle = arrPanes(Item.Id).hwnd

Set theHandle property of the docking pane to theHandle property of thefrmPane frame in the array.

TheHandle property of the docking pane is the handle of the child windowdisplayed in the pane.

Creating a Border

The Textbox placed on thefrmPane form needs to fill the entire open form. You will resize theTextbox just as the rich text box resized.

To do this, edit theForm_Resize event procedure of thefrmPane frame as in the codebelow

Private Sub Form_Resize()


txtContent.Move Me.ScaleLeft + 1, Me.ScaleTop + 1, Me.ScaleWidth - 2, Me.ScaleHeight - 2

End Sub

The txtContentcontrol is being sized to fill the entire form. ThefrmPane form is using a pixel coordinate system. The txtContent.Move method is passed the Left, Top, Width, and Height of theframe. By adding one to the top and left and subtracting two from the width and height,

you create a small visible area around the textbox that looks like a border.


20/25

20

Opening and Closing each Docking Pane Separately

The first time the application is run, all ten docking panes will be displayed with theoptions/properties that were set in theForm_Load. If the user closes them, they need a way toopen them back up.

Add some code to each Clickevent procedure of the menu controls for each pane. Open the code view of the main form and select mnuPaneA from the left drop-down list.

This control will only have a Clickevent procedure. In each event procedure, you will want to invoke the appropriate ShowPanemethod. Add the codeDockingPaneManager.ShowPane1 in the mnuPaneA_Clickevent

procedure

Private Sub mnuPaneA_Click()

DockingPaneManager.ShowPane 1

End Sub

The only parameter passed is the panes ID. Repeat these steps forPaneB passing in 2, andPaneCpassing in 3. With these event procedures complete, the user can open and close each docking pane

individually.

Figure 2.18.SelectingmnuPaneA


21/25

21

Hiding the Client Window

The client window can be hidden, allowing the docking panes to be displayed in the area the clientwindow occupied. In Figure 2.19., the client window is visible, and it is hidden in Figure 2.20.

Open the code view of the main form Select mnuHideClientfrom the left drop-down list.

This control will only have a Clickevent procedure

Figure 2.19.Visible ClientWindow

Figure 2.20.Hidden ClientWindow


22/25

22

Add the following code to toggle the visibility of the client.Private Sub mnuHideClient_Click()

DockingPaneManager.Options.HideClient = Not DockingPaneManager.Options.HideClientmnuHideClient.Checked = DockingPaneManager.Options.HideClient

End Sub

This will hide the entire client area, meaning the area not occupied byCommandBars, Docking Panes, StatusBar, etc.

The Option.HideClientproperty of theDockingPane control is toggled toTrue/False each time the control is clicked.

Then the checkmark next to the menu control Hide Client is toggled to indicatethat the control is on or off.

Resizing the Border of a Docking Pane

When resizing the border of a docking pane that is attached to a form or other docking pane, asplitter (named for the mouse icon that appears) is displayed as the border is dragged to thedesired position.

There are two ways the splitter can be displayed when the border of the docking pane isresized.

When using a splitter tracker, only a bar will be displayed as the border is resized. The barwill move indicating where the new border will be once the mouse button is released.

The original border does not resize until the mouse button release. In Figure 2.21, splitter tracking is enabled as the top border of Pane B is resized. Only

a bar is displayed.


23/25

23

If splitter tracking is disabled, then the border of the docking pane is resized in real-time. As the border is dragged, the pane will constantly be resized until the mouse

button is released.

In Figure 2.23 as Pane B is resized, the whole border is moved, not just a bar

Figure 2.21.Splitter Tracking

Enabled

Figure 2.22.The resized

pane


24/25

24

Open the code view of the main form Select mnuUseSplitterTrackerfrom the left drop-down list. This control will only have a Clickevent procedure. Add the following code to toggle the use of the Splitter Tracker.

Private Sub mnuUseSplitterTracker_Click()

DockingPaneManager.Options.UseSplitterTracker = Not DockingPaneManager.Options.UseSplitterTracker

mnuUseSplitterTracker.Checked = DockingPaneManager.Options.UseSplitterTracker

End Sub

Figure 2.23.Splitter Tracking

Disabled

Figure 2.24.Splitter TrackingDisabled


25/25

25

The Option.UseSplitterTrackerproperty of theDockingPane control is toggledto True/False each time the control is clicked.

Then the checkmark next to the menu control Use Splitter Tracker is toggledto indicate that the control is on or off.

When the toolbar or status bar is hidden/unhidden, theDockingPane control needs to get thenew dimensions of the window and resize the docking panes to fit in the new area that was freedup or removed from the form.

To do this, call theRecalLayoutmethod each time the status bar or toolbar ishidden/unhidden.

Edit the mnuViewStatusBarand mnuViewToolbarClickevent procedures the same wayyou edited the mnuPane event procedures.

Add the codeDockingPaneManager.RecalLayoutto the end of each event procedure asin the following code

Private Sub mnuViewStatusBar_Click()

mnuViewStatusBar.Checked = Not mnuViewStatusBar.Checked

sbStatusBar.Visible = mnuViewStatusBar.Checked

DockingPaneManager.RecalcLayout

End Sub

Private Sub mnuViewToolbar_Click()

mnuViewToolbar.Checked = Not mnuViewToolbar.Checked

tbToolBar.Visible = mnuViewToolbar.Checked

DockingPaneManager.RecalcLayout

End Sub

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

sdi sample

Documents