MDI Application

What is an MDI Application?
An application in Visual Basic may be based either on SDI (Single Document Interface) or on MDI (Multiple Document Interface). In MDI application, a single container form maintains a collection of child forms. MDI application allows you to display multiple documents at the same time, with each document displayed in its own window. Applications such as MS-Word, MS-Excel etc, are a few examples of MDI applications.

The main window or the container is called as Parent window or Frame. In Visual Basic, Parent window is an MDIForm. An MDIForm can display multiple child forms in its client area. MDIForm can also arrange child forms.

A child form is a form for which MDIChild property is set to true. At run time the program will create multiple child forms. Each child form will be an instance of the form that has its MDIChild property set to true.

Note: An application in Visual Basic can contain only one MDIForm.

Sample Application
In this chapter, we will develop an editor that works similar to Notepad but allows users to work with multiple documents at the same time. With this application you can open more than one text file and edit those text files at the same time. In other words, it is like an MDI version of Notepad.

To Create an MDI Application take the following steps:

1. Create a new project using File -> New Project and select Standard Exe as the type of the project.
2. At this stage a new project is created with just one form. The form that is created by Visual Basic is a normal form. But as our application is based on MDI, it needs an MDIForm.
3. Add an MDIForm to project using Project -> Add MDIForm.
4. Visual Basic adds an MDIForm to the current project.
5. After MDIForm is added to current project, Add MDIForm option in Project menu will be disabled. Remember there can be only one MDIForm in a Visual Basic project.

Adding Menu to Application
Add required menus to MDIForm by following the steps below.

1. Make MDIForm active form in the project.
2. Select Tools->Menu Editor
3. Add the following menu using Menu Editor

File
New Creates a new document. It creates a new child form and displays empty window.
Open… F3 Allows user to select a text file. Creates a new child window and displays the contents of the text file for editing in that window.
Close Closes the currently active document. Takes confirmation before closing a document, if document was modified but not saved.
Save F2 Saves changes made to current document. If current document is a new document, it will prompt user to enter a filename using Save As dialog box.
Save As Allows current document to be saved under a different filename.
Print Prints the current document to printer.
Exit Terminates the application. Takes confirmation before the application is terminated.

Edit
Cut Ctrl + X Cuts the selected text in the current document and places the text on the clipboard.
Copy Ctrl + C Copies the selected text in the current document to clipboard.
Paste Ctrl + V Extracts text from clipboard and pastes it into current document.

Window
Cascade F5 Arranges all open windows using cascade format, where title bars of all open windows will be displayed.
Tile Horizontal Tiles all open windows horizontally.
Tile Vertically Tiles all open windows vertically.
Arrange Icons Arranges all minimized windows.
Windows list Displays captions of all open child forms.

Help
About Displays about dialog box.


Displaying Window List
One of the common features of an MDI application is Window menu displaying list of open windows. For example, in MS-Word, you get the list of open documents at the end of the window menu. Visual Basic IDE is also an MDI application. If you see Window menu of Visual Basic IDE while working with a project. As you can see at the Window Menu the list of open windows are displayed

To display windows list in MDI application:

1. Invoke Menu Editor of MDIForm using Tools -> Menu Editor when MDIForm is active
2. Select Window menu in the list of menu. As we want to display list of windows at the bottom of Window menu.
3. Turn on WindowList checkbox
That’s all you have to do to display the list of windows at the bottom of Window menu. Visual Basic takes care of adding and removing windows from the list as you open and close documents.

Enabling the display of list of windows at the bottom of Window menu.

Making Form1 MDIChild form
Now our project contains two forms – MDIForm1 and Form1. MDIForm1 is the parent that forms the base for the application. Form1 is the form that displays the contents of the file and allows user to edit. We take multiple copies of Form1 at run time to display multiple documents. In order to display copies of Form1 within MDIForm1, first we have to make Form1 a child form.

To make Form1 an MDI Child form:

1. Invoke Properties Window of Form1 by selecting the form and pressing F4.
2. Change MDIChild property to True.

Child form will display the contents of the selected file and also allows user to edit the contents. To display the contents of the selected file, we place a text box in child form. The textbox will occupy the entire client area of the child form and it also contains scrollbars to allow user to scroll.

Place a textbox and change its property as follows.

1. Place a textbox on the form. The position and size of the textbox are not so important because they are changed at run time using Resize event (see listing 12.1) of the form so that textbox occupies the entire client area of the form.

Private Sub Form_Resize() ‘Make textbox occupy the entire client area’.
Text1.Move 0, 0, Me.ScaleWidth, Me.ScaleHeight
End Sub
Listing 12.1: Filling the entire client area of the form using resize event of the form.

2. Change the MultiLine property to True, and Scrollbars property to 3-both.

Changing Startup Object of the Project
If you run the project now, Form1 will be displayed as the first form. But we want MDIForm to be displayed first. To display MDIForm1 as the first form in the project we have to change Startup Object property of the project.

To change startup object:

1. Select Project -> Project Properties (In place of Project in Project Properties option, the name of the current project name is displayed).
2. Visual Basic displays project properties dialogbox .
3. Select General tab if it is not selected.
4. From Startup Object drop down, select MDIForm1 to make MDIForm1 the startup object.
5. Click on Ok to close properties dialogbox.
Now, if you run the project, MDIForm1 will be displayed as the first form

Writing code for Options in File menu
The following section will explain the code for options of File menu.

Writing code for New option
We will now write code for New option of File menu. When user selects New option from File menu a new window is to be displayed so that user can start typing text. Subsequently, if user chooses Save option then the typed contents will be saved under the given name.

New option creates a new copy of Form1 and displays that copy with Noname as the caption of the form. As we have to prompt user, if user is trying to close the document without saving changes, we use Tag property of the form. Tag property of the form will be set to 0 in the beginning. Tag property is set to 1 whenever user makes a change to the content. Again Tag is set to 0 when user saves changes. That means at the time of closing document if Tag is set to 1, it means user is trying to close a document that was modified but not saved. In this case, program has to prompt user to save pending changes. We will create code for close option later.

Here is code for new option.

Private Sub mnunew_Click()
Dim f As New Form1 ‘ create a new copy of Form1
f.Caption = "Noname"
f.Tag = 0 ' not modified
f.Show ‘ display form
End Sub
Listing 12.2: Code for new option of file menu.

Writing code for Open Option
For this option, as we have to prompt the user to select a filename. First of all to use open dialog, we have to load common dialog control into project.

To load common dialog control:

1. Select Project-> Components
2. Move down until you get to Microsoft Common Dialog Control 6.0 and select it (turn on the checkbox).
3. Click on Ok button
Visual Basic places the control in Toolbox.
4. Place common dialog control on MDIForm1.
Open option of File menu does the following:

• Accepts a filename from user through Open common dialog box.
• Creates a new instance of Child form (Form 1).
• Loads the content of selected file into the text box of child form.
• Displays the child form.
Here is the code for Open option of File menu.
Private Sub mnuopen_Click()
‘Create a New instance of form
Dim nf As New Form1
Dim oneline As String, filecontent As String

' trap error that might occur
On Error GoTo errlbl

' display open dialog box to user
With CommonDialog1
.Filter = "Text files|*.txt|All files|*.*"
'cause error if user doesn't select any file
.CancelError = True
.ShowOpen
' user has selected a file. Read the content and display content
' in textbox
' change mouse pointer to indicate system is busy
Screen.MousePointer = vbHourglass
' open file
Open .FileName For Input As #1

Do Until EOF(1)
' read one line at a time
Line Input #1, oneline
' concatenate line along with new line to lines read so far
filecontent = filecontent & oneline & vbCr & vbLf
Loop
Close #1

' load the text into textbox of child form
nf.Text1 = filecontent
' set Tag to 0 to indicate that content is not modified
nf.Tag = 0
' change caption to file name
nf.Caption = .FileName
'display child form
nf.Show
' reset mouse pointer
Screen.MousePointer = vbDefault
End With

Exit Sub

errlbl:
' ignore the error and free memory allocation to nf and quit
Set nf = Nothing
End Sub
Listing 12.3: Code for Open option of File menu.


Writing code for Save and Save As options
Save option saves the changes made to current form. If current form contains a new document (with caption property set to Noname) then Save option works like Save As, otherwise Save saves the changes made to current document.

Save As prompts the user to enter a new filename and then saves the contents in the new filename.
This is also invoked by Save option when user is saving a new document.

As both Save and Save As options write the document into a file, it is better to implement code as a separate procedure.

General procedures such as SaveFile in this case, are accessed generally from more than one form. So it is better to create a code module and place all such general procedures into code module because procedure placed in code module can be accessed through the project.

Creating SaveFile procedure in Code module
First let us create a new code module and then create a SaveFile procedure in code module.

To add a code module to project:

1. Select Project -> Add Module.
2. Visual Basic adds a code module to project with default name Module1.

To create SaveFile procedure:

1. Make code module active.
2. Select Tools -> Add Procedure option.
3. When Visual Basic displays Add Procedure dialog box, enter SaveFile as the name of the procedure and click on Ok.
4. In code window enter the code shown in listing .

Public Sub SaveFile(fn As String, content As String)
Open fn For Output As #1
Print #1, content
Close #1
' set tag property to 0 to indicate that
' changes are saved
MDIForm1.ActiveForm.Tag = 0
End Sub
Listing 12.4: Code for SaveFile procedure.

The following is the code for Save and Save As options.

Private Sub mnusave_Click()
' call Save As if name of the file is Noname
With MDIForm1.ActiveForm
If .Caption = "Noname" Then
' call save as
mnusaveas_Click
Else
SaveFile .Caption, .Text1.Text
End If
End With

End Sub

Private Sub mnusaveas_Click()

'trap error that might occur
On Error GoTo errlbl

'display save as dialog box to user
With CommonDialog1
' set the file name as the default
.FileName = MDIForm1.ActiveForm.Caption
.Filter = "Text files|*.txt|All files|*.*"
'cause error if user doesn't any file
.CancelError = True
.ShowSave
' set new file to caption
MDIForm1.ActiveForm.Caption = .FileName
' save file contents to new filename
SaveFile .FileName, MDIForm1.ActiveForm.Text1.Text
End With

Exit Sub

errlbl:
'ignore errors and continue
End Sub
Listing 12.5: Code for Save and Save As options of File menu.

As you can see from the code, both these event procedures make use of SaveFile procedure created in code module.

Note: ActiveForm property of MDIForm refers to the form that is currently active among child forms.

Code for Close option of File menu
Whenever user chooses Close option from File menu, the active form is to be closed. But if active form has modifications that were not saved then you should prompt the user to save the modifications.

Clicking on close button (X) may also close a child form. In this case also user should be prompted to save modifications.

Prompting user to save changes using QueryUnload event
QueryUnload event occurs just before a form is unloaded. QueryUnload event can cancel unloading form if you set Cancel parameter to True. We use QueryUnload event to prompt the user and take necessary action, as this event occurs in both cases – user clicking on close button of the form and form is getting unloaded because of program executing Unload statement. The second method is used for Close option of File menu.

The following is the code for Close option of file menu.

Private Sub mnuclose_Click()
' unload active form
Unload MDIForm1.ActiveForm

End Sub
Listing 12.6: Code for close option of file menu.

The following is the code for Change event of Text box in child form. This event occurs whenever text in the textbox changes. At this event we set Tag property of the form to 1 to indicate the content of the textbox has changed.

The final in this context is the code for QueryUnload event of the child form.

Private Sub Form_QueryUnload(Cancel As Integer, UnloadMode As Integer)

' check whether changes are pending
If Me.Tag = 1 Then
' display confirmation box
resp = MsgBox("Do you want to save changes?", vbYesNoCancel _
+ vbQuestion, "Save Changes")
‘ if user has selected Cancel button
If resp = vbCancel Then
' cancel unload process
Cancel = True
‘ if user has selected Yes to save changes
ElseIf resp = vbYes Then ' save changes and then quit
SaveFile Me.Caption, Text1.Text
End If
End If
End Sub
Listing 12.7: Code for Queryunload event of form.


Private Sub Text1_Change()
' change tag property to indicate modification
Me.Tag = 1
End Sub
Listing 12.8: Code for change event of text box.

The prompt displayed by MsgBox function will be identical

Message box displayed when user tries to quit without saving changes.

The following will be the action taken for each of the buttons.

Yes Saves the modification and then closes the form.
No Closes the form without saving the modifications.
Cancel Cancels closing process.

Writing code for Print option in File menu
Print option prints the contents of current document to default printer. Printer object is used to print to default printer.

Here is the code to print current document.

Private Sub mnuprint_Click()
' print current document to printer object
Printer.Print MDIForm1.ActiveForm.Text1.Text
Printer.EndDoc
End Sub
Listing 12.9: Code for print option of file menu.

Writing code for Edit menu
Code for edit menu is much like the code that we have written in chapter 11 for clipboard object. I do not feel any need to explain the code here. For details, please see chapter 11(System Objects).

The code for Cut, Copy and Paste options and Edit menu is given in listing 12.10.

Private Sub mnuedit_Click()

' disable all options
mnucut.Enabled = False
mnucopy.Enabled = False
mnupaste.Enabled = False

If MDIForm1.ActiveForm.Text1.SelText <> "" Then
' disable all options
mnucut.Enabled = True
mnucopy.Enabled = True
End If

If Clipboard.GetFormat(vbCFText) Then
mnupaste.Enabled = True
End If
End Sub

Private Sub mnucopy_Click()
'copy the selected text on to clipboard
Clipboard.SetText MDIForm1.ActiveForm.Text1.SelText
End Sub

Private Sub mnucut_Click()
'copy the selected text on to clipboard
Clipboard.SetText MDIForm1.ActiveForm.Text1.SelText
'cut the selected text
MDIForm1.ActiveForm.Text1.SelText = ""
End Sub

Private Sub mnupaste_Click()
'Place the text that is existing in clipboard at
'the cursor position
MDIForm1.ActiveForm.Text1.SelText = Clipboard.GetText
End Sub
Listing 12.10: Code for Edit menu and its options.


Writing code for Window menu
All options in window menu make use of Arrange method of MDIForm. Arrange method is used to arrange child forms of MDIForm in the specified format. Here is the complete syntax of Arrange method.

Arrange arrangement

The arrangement may be any of the values given below.

Constant Value Description
vbCascade 0 Cascades all nonminimized MDI child forms
vbTileHorizontal 1 Tiles all nonminimized MDI child forms horizontally
vbTileVertical 2 Tiles all nonminimized MDI child forms vertically
vbArrangeIcons 3 Arranges icons for minimized MDI child forms

Here is the code for options in Window menu.
Private Sub mnucascade_Click()
MDIForm1.Arrange vbCascade
End Sub

Private Sub mnuth_Click()
MDIForm1.Arrange vbTileHorizontal
End Sub

Private Sub mnutv_Click()
MDIForm1.Arrange vbTileVertical
End Sub

Private Sub mnuai_Click()
MDIForm1.Arrange vbArrangeIcons
End Sub

Listing 12.11: Code for options in Window menu.

Creating About dialog box
Visual Basic provides a template for About dialog box. All you have to do is change the required properties of labels that are placed in the about dialog box. This is the process to add about dialog box to the project.

To add About dialog box to project:

1. Select Project -> Add Form.
Visual Basic displays a list of predefined forms.
2. Select About dialog and click on Open button.
Visual Basic adds an about dialog to current project and form is given name frmAbout.
At design time, About dialog box that is added

To invoke About dialog box:

Write code for click event of About option in Help menu. About dialog box is to be displayed as a modal window (by using vbModal option for Show method).

Private Sub mnuabout_Click()
frmAbout.Show vbModal
End Sub
Listing 12.12: Code to invoke about dialog box.

Note: About dialog box takes properties of current project and fills some of the labels on the form. You have to fill the remaining with the required information.

Test Run
Now we have reached the end of the development. Now it is time to run the application and test all its features.

1. Run project using Run-> Start option or F5 or by clicking on Start icon in toolbar.
2. When Visual Basic displays MDIForm, choose File->New option to create a new document . Enter some text in the text box.
3. Now try to save this document by pressing F2 or by selecting File -> Save.
4. As the document is new document, Save option will prompt you to enter the name of the file in which the document is to be saved.
5. Enter filename Sample.txt.
6. Close the file by choosing File->Close.
7. Open the file sample.txt using File-> Open.
8. Enter one more line to the document.
9. Try to close the file using File->Close. As we are trying to close without saving the changes, program displays message box prompting you to save changes.
10. Choose Cancel to cancel closing operation.
11. This time click on Close button of the child form.
12. This will also result in the same prompt. Select Yes button in message box to save changes and then quit.
13. Now choose File->New options for a few times to create a few new MDI child windows.
14. Choose Window->Tile Vertical to file windows vertically.
At this stage MDIForm .
15. Exit MDIForm using File->Exit.
Prompting user to save when user is trying to close a document without saving.
Vertical tiling of MDIChild forms.
Areas to be Enhanced
The following areas of the sample application can be improved. If you can complete all enhancements then the sample application will be quite useful editor, and you can even use it instead of notepad to work with multiple text files at the same time.

• Automatically enable and disable menu options such as Save, Print etc. For example, Save options should be disabled until a document is opened or a new document is modified.
• Provide Search menu with following options.

Option What it does?
Search Searches for the given string. Places cursor at the first location of the string.
Search Next Continues search initiated by Search option. Should be disabled until search is initiated by Search option.
Search and Replace Replaces the given search string with the given replace string.

• Take confirmation form user when user is trying to quit application either by selecting File->Exit or by clicking on close button of MDIForm1.

Adding a toolbar to MDIForm
The last thing in this sample application development process is adding a toolbar to MDIForm so that common tasks can be invoked using Toolbar.

To create a Toolbar:

• Add ImageList control to MDIForm and place required icons in it
• Add Toolbar control to MDIForm and get icons from ImageList.
• Write code for button in Toolbar.

ImageList and Toolbar are not part of standard controls. They are ActiveX controls. So load these control into project.

To Load ImageList and Toolbar Controls:

1. Select Project-> Components.
2. Select Microsoft Windows Common Controls 6.0.
3. Click on Ok button to add a set of controls to current project.

Microsoft Windows Common Controls 6.0 contains a collection of ActiveX controls. ImageList and Toolbar controls are part of it.

Working with ImageList
ImageList control is used to contain a list of images. These images will be used later as icons for buttons in Toolbar.

To load images into ImageList:

1. Place ImageList on MDIForm.
2. Select popup menu using right button and select Properties option to invoke Property Pages.
3. Select 16 x 16 as the size of the image in General tab
4. Select Images tab.
5. Click on Insert Picture command button. ImageList displays Select Picture dialog box .
6. Select a picture using Select Picture Dialog box.
7. Repeat the process of selecting picture for each picture that you want to have in your toolbar. Property Pages of ImageList control after three images are loaded into it.
8. Click on Ok button in Property Pages.

Note: Image file may be any of the commonly used graphics files such as .bmp, .ico and .gif.

Images property page after three images are loaded into ImageList control.

Working with Toolbar
After images are placed into ImageList control, now let us concentrate on using those images in toolbar.

The following are the steps required to add a toolbar to MDIForm1.

1. Select MDIForm1 and place Toolbar on it.
2. Visual Basic automatically places Toolbar at the top of the form.
3. Invoke property pages of the Toolbar using Properties option of Context menu.
4. In General Tab change ImageList property to ImageList1.
5. Select Buttons tab
6. Click on Insert Button to add a button to Toolbar.
7. For the first button enter the following details.

Index 1
Key New
ToolTipText New Document
Image 1 (Indicates first image from ImageList is to be taken)

For the second button enter the following details.

Index 2
Key Open
ToolTiopText Open Document
Image 2
The same will be the case for third command button

Index 2
Key Save
ToolTiopText Save Document
Image 2

Buttons property page of Toolbar control.

Write code for Toolbar
When user clicks on any button of the toolbar, ButtonClick event for Toolbar occurs. This event procedure has a parameter - Button - that references the button on which user clicked. We use Key property of the button to identify which button is clicked by the user.

For each button, we call the corresponding option's event procedure. That means, if user clicks on Open button then we call event procedure for Click event of mnuOpen.

Here is the code for ButtonClick property of the Toolbar control.

Private Sub Toolbar1_ButtonClick(ByVal Button As ComctlLib.Button)
Select Case Button.Key
Case "New"
mnunew_Click
Case "Open"
mnuopen_Click
Case "Save"
mnusave_Click
End Select
End Sub
Listing 12.13: Code for ButtonClick event of Toolbar.


That completes our MDI application. With a few modifications you can make it a complete editor. In fact, it could be an MDI version of Notepad of Windows. If you run your project, the initial screen