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, it looks like figure 12.1. As you can see at the Window Menu the list of open windows are displayed

 

Figure 12.1: Window List from Window menu of Visual Basic IDE.

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 as shown in figure .12.2.

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.

Figure 12.2: 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 (see figure12.3).

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 (see figure 12.4)

Writing code for Options in File menu

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

 

Figure 12.3: Changing startup object of the project.

Figure 12.4: MDIForm1 when it is run.

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 to the one shown in figure 12.5.

 

Figure12.5: 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 would look like figure 12.6.

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.

 

Figure 12.6:About dialog box at design time.

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 as shown in figure 12.7. 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. See figure 12.8.

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 looks like figure 12.9.

15.  Exit MDIForm using File->Exit.

Figure 12.7: Application after a new document is created.

Figure 12.8: Prompting user to save when user is trying to close a document without saving.

Figure 12.9: 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 (see figure 12.11).

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. Figure 12.11 shows 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.

Figure 12.11: 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

Figure 12.12:  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 should look like figure 12.13.

Figure 12.13: Initial screen of the MDI project when cursor is on Open button in toolbar.