Home

SDI & MDI Applications

 

SDI and MDI Fundamentals

 

Introduction

A single-document interface, SDI, is an application primarily made of a form equipped with a menu. An example is Notepad:

Notepad

In some cases, an SDI can also have a toolbar and/or a status bar. Here is an example from Microsoft Works Spreadsheet:

Microsoft Works

All these features are left to the programmer to add and configure.

Although Notepad is text-based, an SDI can be any type of application: text, graphics, spreadsheet, anything. Therefore, to create an SDI, start from a normal form, add a menu to it, and configure it to do what you want.

To create a document using an SDI, the user launches the application. The SDI then presents a rectangular window with one frame and the inside is the document the user will use. In most cases, the application itself creates the document. The user can work on it and do whatever the application allows. To create another document of the same type, the user must open another instance of the application.

ApplicationPractical Learning: Introducing MDI Applications

  1. Start Microsoft Visual Studio
  2. To create a new application, on the main menu, click File -> New Project...
  3. In the middle list, click Windows Forms Application
  4. Change the Name to Notice2 and click OK
  5. From the Dialogs section of the Toolbox, click the OpenFileDialog button OpenFileDialog and click the form
  6. In the Properties window, click (Name) and type dlgFileOpen
  7. From the Menus & Toolbars section of the Toolbox, click the MenuStrip button OpenFileDialog and click the form
  8. In the Properties window, change its (Name) to mnuMain
  9. On the form, right-click the menu strip and click Insert Standard Items
  10. In the File group, click Type Here, type Close and press Enter
  11. On the form, click the Close menu item and, in the Properties window, double-click Enabled to set it to False
  12. Move that new menu item and position it under Open
  13. Under the form, click mnuMain. In the Properties window, click Items and click its browse button
  14. Change the names of the items as follows:

    Top Menu Item DropDownItems
    Old Name New Name Old Name New Name
    fileToolStripMenuItem mnuFile    
        newToolStripMenuItem mnuFileNew
        openToolStripMenuItem mnuFileOpen
        closeToolStripMenuItem mnuFileClose
          Separator
        saveToolStripMenuItem mnuFileSave
        saveAsToolStripMenuItem mnuFileSaveAs
          Separator
        printToolStripMenuItem mnuFilePrint
        printPreviewToolStripMenuItem mnuFilePrintPreview
          Separator
        exitToolStripMenuItem mnuFileExit
    editToolStripMenuItem mnuEdit    
        undoToolStripMenuItem mnuEditUndo
        redoToolStripMenuItem mnuEditRedo
          Separator 
        cutToolStripMenuItem mnuEditCut
        copyToolStripMenuItem mnuEditCopy
        pasteToolStripMenuItem mnuEditPaste 
          Separator 
        selectAllToolStripMenuItem mnuEditSelectAll
    toolsToolStripMenuItem mnuTools    
        customizeToolStripMenuItem mnuToolsCustomize
        optionsToolStripMenuItem mnuToolsOptions
    helpToolStripMenuItem mnuHelp    
        contentsToolStripMenuItem mnuHelpContents
        indexToolStripMenuItem mnuHelpIndex
        searchToolStripMenuItem mnuHelpSearch
          Separator
        aboutToolStripMenuItem mnuHelpAbout
     
    Items Collection Editor
  15. Click OK and OK
  16. From the Menus & Toolbars section of the Toolbox, click ToolStrip Tool Strip and click the form
  17. While the tool strip is still selected, in the Properties window, change its Name to tbrStandard
  18. On the form, right-click the tool strip and click Insert Standard Items
  19. Under the form, click tbrStandard. Under the Properties window, click Edit Items
  20. Change the names of the items as follows:
     
    Old Name New Name
    newToolStripButton tbrStandardNew
    openToolStripButton tbrStandardOpen
    saveToolStripButton tbrStandardSave
    printToolStripButton tbrStandardPrint
    Separator  
    cutToolStripButton tbrStandardCut
    copyToolStripButton tbrStandardCopy
    pasteToolStripButton tbrStandardPaste
    Separator  
    helpToolStripButton tbrStandardHelp
  21. Click OK
  22. From the Menus & Toolbars section of the Toolbox, click StatusStrip Status Strip and click the form
  23. While the tool strip is still selected, in the Properties window, change its Name to stbAppStatus
  24. Set its AutoSize to False
  25. Click the + button of Size and change the Width to 28
  26. On the form, to create a section, click the button that displays
  27. While the new label is still selected, in the Properties window, change the following characteristics:
    (Name): pnlMessage
    AutoSize: False
    BorderSides: All
    BorderStyle: Sunken
    DisplayStyle: None
    Size -> Width: 200
  28. On the form, click the new button on the right side of the previous label
  29. While the new label is still selected, in the Properties window, change the following characteristics:
    (Name): pnlStatus
    AutoSize: False
    BorderSides: All
    BorderStyle: Raised
    DisplayStyle: None
    Size -> Width: 150
  30. On the form, click the new button on the right side of the previous label
  31. While the new label is still selected, in the Properties window, change the following characteristics:
    (Name): pnlZoom
    BorderSides: All
    BorderStyle: SunkenOuter
    DisplayStyle: None
    Spring: True

MDI Fundamentals

A multiple-document interface (MDI) is an application that primarily has a form and a menu. Some, if not most, MDIs also have one or more toolbars and/or a status bar. Here is an example:

Multiple-Document Interface

Like a normal application, to use an MDI, the user must launch it. In some cases, when the application starts, it is empty; that is, no document is created and the title bar displays a caption, usually the name of the application.

Usually, there are steps the user must follow to create a document. In some other cases, when the application is launched, it automatically creates a document. A document resides inside the parent frame of the application. That is, a child document can use only the area reserved for it. The child document has its own system icon, its own title bar, and its system buttons (Minimize, Maximize/Restore, and Close).

To use the whole area, the user can maximize the child document. When this is done, the child merges its title bar with the parent's. The new caption of the title bar becomes made of the text of the parent, followed by -, and followed by the caption the child window was using. The system buttons of the child document display under those of the parent frame:

MDI

Once a document has been created, the user can use it. Normalement, the application must give the user the ability to create other documents while still using the application. If many documents have been created, all of them are confined in the frame of the Topic Applied:

Multiple Document Interface

The user can maximize the child forms. If so, the document that was in front occupies the whole area devoted to child documents. The other child forms stay in the back but become invisible.

One of the differences between an SDI and an MDI is that, because the document and the application don't share a frame, the user can close the document and keep the application open.

Creating an MDI Application

As mentioned already, there is nothing magical with creating an SDI. You start with a form, add a menu to it, and specify what the application should allow a user to do with a document. As we will see, an MDI requires more steps.

You start an MDI application with a normal form. You can create a Windows Forms Application using Microsoft Visual Studio or derive a class from Form. Here is an example:

#include <windows.h>

#using <System.dll>
#using <System.Windows.Forms.dll>

using namespace System;
using namespace System::Windows::Forms;

public ref class CCommonParent : public Form
{
public:
    CCommonParent()
    {
	InitializeComponent();
    }

private:
    void InitializeComponent()
    {
        Text = L"Exercise";
        StartPosition = FormStartPosition::CenterScreen;
    }
};

int APIENTRY WinMain(HINSTANCE hInstance,
		     HINSTANCE hPrevInstance,
		     LPSTR lpCmdLine,
		     int nCmdShow)
{
    Application::Run(gcnew CCommonParent);

    return 0;
}

The primary form of an MDI application is referred to as the parent or MDI container. It provides the frame inside of which the documents will reside. To provide this functionality, the Form class is equipped with a Boolean property named IsMdiContainer. Therefore, after creating the first form of your application, to indicate that it acts as the main frame, set this property to true. You can do this in the Properties window if you are visually creating your application, or programmatically. Here is an example:

public ref class CCommonParent : public Form
{
public:
    CCommonParent()
    {
	InitializeComponent();
    }

private:
    void InitializeComponent()
    {
	IsMdiContainer = true;

        Text = L"Exercise";
        StartPosition = FormStartPosition::CenterScreen;
    }
};

This would produce:

Multiple-Document Interface

The primary characteristic of an MDI is that it contains other forms. These forms must be created and made available to the parent. Each form can be created using a predefined form or you can programmatically create one by declaring an object of type Form. To allow you to specify that a form has a parent and will act as a child, the Form class is equipped with a property named MdiParent. This is a read-write property. The set accessor indicates what form acts as this one's parent. To provide this information, assign the main form this form's MdiParent. After doing this, you can display the form when you are ready, by calling its Show() member function. Here is an example:

public ref class CCommonParent : public Form
{
public:
    CCommonParent()
    {
	InitializeComponent();
    }

private:
    void InitializeComponent()
    {
	IsMdiContainer = true;

        Form ^ frmChild = gcnew Form;
        frmChild->MdiParent = this;

        frmChild->Show();

        Text = L"Exercise";
        StartPosition = FormStartPosition::CenterScreen;
    }
};

This would produce:

Multiple-Document Interface

ApplicationPractical Learning: Creating an MDI Application

  1. Click the form to give it focus
  2. In the Properties window, change the following characteristics:
    IsMdiContainer: True
    StartPosition: CenterScreen
    Text: Notice
     
    Notice
  3. To add a new form, on the main menu, click Project -> Add Windows Form...
  4. Set the Name to SingleDocument
  5. Click Add
  6. From the Common Controls section of the Toolbox, click RichTextBox Rich Text Box and click the form
  7. In the Properties window, change the following characteristics:
    (Name): rtbNotice
    Dock: Fill
    Modifiers: Public
  8. Display the first form
  9. On the form, click File and double-click New
  10. In the top section of the file, include the SingleDocument.h header file:
    #pragma once
    
    #include "SingleDocument.h"
    
    namespace Notice2 {
  11. Scroll down and implement the event as follows:
    System::Void mnuFileNew_Click(System::Object^  sender, System::EventArgs^  e)
    {
        SingleDocument ^ document = gcnew SingleDocument;
        document->Text = "Untitled";
                
        document->MdiParent = this;
        document->Show();
    
        mnuFileClose->Enabled = true;
    }
  12. Return to the form
  13. On its toolbar, click the first button (New)
  14. Click the Events button Events of the Properties window. Click the Click field and, on the right side, select mnuFileNew_Click
  15. On the form, click File and double-click Open
  16. Implement the event as follows:
    System::Void mnuFileOpen_Click(System::Object^  sender, System::EventArgs^  e)
    {
        if( dlgFileOpen->ShowDialog() == System::Windows::Forms::DialogResult::OK )
        {
            for each( String ^ strFile in dlgFileOpen->FileNames )
            {
                SingleDocument ^ document = gcnew SingleDocument;
    
                document->rtbNotice->LoadFile(strFile);
    
                document->MdiParent = this;
                document->Show();
            }
        }
    }
  17. Return to the form
  18. On its toolbar, click the second button (Open)
  19. Click the Events button Events of the Properties window. Click the Click field and, on the right side, select mnuFileOpen_Click
  20. Return to the form
 
 
 

MDI Characteristics

 

Introduction to the Children of an MDI

When you create an MDI application, you must make sure you provide your users with the ability to create documents. In fact, probably one of your first assignments is to make sure the user can create as many documents as necessary. As the documents are created, you need a way to programmatically keep track of the child forms. For example, you can store the documents in a collection. To assist you with this, the Form class is equipped with a property named MdiChildren, which is a read-only array. Each element of the MdiChildren[] array is of type Form. Therefore, to access a child form of an MDI application, you can pass an index to this property.

The Layout of Child Forms

Based on the standards defined in the operating system, as child forms are created in an MDI application, they are positioned each on top of the previous one but below the next one. The arrangement uses a 3-D coordiniate system whose origin is on the lower-left corner of the parent's frame just under the title bar (or the menu, if any; or the toolbar, if any), with the Z axis moving from the monitor towards you:

Layout

The operating system allows the user to choose among different arrangements. For example, you can position the documents as vertical columns, as horizontal rows, or as tiles. To support this, the Form class is equipped with a method named LayoutMdi. Its syntax is:

public:
    void LayoutMdi(MdiLayout value);

The LayoutMdi() method takes an argument that is a member of the MdiLayout enumeration. The members of this enumeration are:

  • ArrangeIcons: The child forms display to fit within the parent form. Here is an example:
     
    System::Void mnuArrangeIcons_Click(System::Object^  sender,
    			           System::EventArgs^  e)
    {
        LayoutMdi(MdiLayout::ArrangeIcons);
    }
  • Cascade: The child form are cascaded to display the title bar and a left portion of each, provided the client area of the parent form is wide and tall enough. Here is an example:
     
    System::Void mnuCascade_Click(System::Object^  sender,
    			      System::EventArgs^  e)
    {
        LayoutMdi(MdiLayout::Cascade);
    }
  • TileHorizontal: The child forms are shrunk so that they can be positioned one above the other and each would use the whole width of the parent client area. Here is an example:
     
    System::Void mnuTileHorizontal_Click(System::Object^  sender,
    			             System::EventArgs^  e)
    {
        LayoutMdi(MdiLayout::TileHorizontal);
    }
  • TileVertical: The child forms are narrowed so that they can be positioned adjacent each other and each would use the whole height of the parent client area. Here is an example:
     
    System::Void mnuTileVertical_Click(System::Object^  sender,
    			 System::EventArgs^  e)
    {
    	 LayoutMdi(MdiLayout::TileVertical);
    }

ApplicationPractical Learning: Laying Out the Documents

  1. Make sure the Notice form is displaying.
    Under the form, click mnuMain
  2. Under the Properties window, click Edit Items...
  3. In the Select Item And Add To List Below, make sure MenuItem is selected and click Add
  4. Change its Text to &Window and its (Name) to mnuWindow
  5. Use the up button up to move and position it just above mnuHelp
     
    Items Collection Editor
  6. While mnuWindow is selected, in the right list, click DropDownItems and click its button
  7. Use the same button to create items with the following characteristics:
     
    Text (Name)
    &Arrange mnuWindowArrange
    &Cascade mnuWindowCascade
    Tile &Horizontal mnuWindowTileHorizontal
    Tile &Vertical mnuWindowTileVertical
  8. Click OK
  9. Click OK
  10. On the form, click Window and double-click Arrange
  11. Implement the event as follows:
    System::Void mnuWindowArrange_Click(System::Object^ sender, System::EventArgs^ e)
    {
        LayoutMdi(MdiLayout::ArrangeIcons);
    }
  12. Return to the form
  13. Double-click Cascade
  14. Implement the event as follows:
    System::Void mnuWindowCascade_Click(System::Object^ sender, System::EventArgs^ e)
    {
        LayoutMdi(MdiLayout::Cascade);
    }
  15. Return to the form
  16. Double-click Tile Horizontal
  17. Implement the event as follows:
    System::Void mnuWindowTileHorizontal_Click(System::Object^  sender, 
    					   System::EventArgs^  e)
    {
        LayoutMdi(MdiLayout::TileHorizontal);
    }
  18. Return to the form
  19. Double-click Tile Vertical
  20. Implement the event as follows:
    System::Void mnuWindowTileVertical_Click(System::Object^  sender,
    		 			 System::EventArgs^  e)
    {
        LayoutMdi(MdiLayout::TileVertical);
    }
  21. Return to the form

Activating a Child

In most MDI applications, a user can create as many documents as necessary. This also means that the application can hold many child forms. To access a child form, the user can click its title bar. You can also provide options on a menu item named Window that would display a list of open documents.

When a child window is activated, it fires an event named MdiChildActivate:

public:
    event EventHandler^ MdiChildActivate {
	void add (EventHandler^ value);
    	void remove (EventHandler^ value);
    }

The MdiChildActivate event is of type EventArgs.

The document that is currently active has a brighter title bar. To identify this document, the form has a property named ActiveMdiChild. This read-only property allows you to know what document is the current active one. This property is of type Form, which means its produces a Form object. When you enquire about this property, if its value is null, it means there is no current active document.

If the value of the ActiveMdiChild property is not null, a document is active and you can use it. If you want to access the objects (Windows controls) that are positioned on a child form, remember that the child form is somehow foreign. Therefore, you should set the Modifiers property of its hosted controls approppriately. For example, if you want the parent frame to access a control on the child frame, set the Modifiers of that control to Public.

ApplicationPractical Learning: Getting the Active Document

  1. Under the form, click mnuMain
  2. On the form, click File and double-click Close
  3. Implement the event as follows:
    System::Void mnuFileClose_Click(System::Object^  sender, System::EventArgs^  e)
    {
        SingleDocument ^ document = static_cast<SingleDocument ^>(ActiveMdiChild);
    
        if( document  != nullptr )
        {
            document->Close();
        }
    
        if( MdiChildren->Length == 0 )
            mnuFileClose->Enabled = false;
    }
  4. Return to the form

Arranging the Minimized Children

In an MDI application, if the user doesn't want to display a document but doesn't want to close it, he can minimise the window. In the same way, the user can minimize as many child forms as necessary. When a child form has been minimized, it shows a button in the lower part of the parent. The buttons of the other minimized child forms are usually positioned next to each other:

Minimized Buttons

The user can move the buttons at will:

Minimized Buttons

A user can also close a child form using the Close button of its minimized button. At one time the minimized buttons may display as a "mess". To let you rearrange them, call the LayoutMdi method of the Form class and pass the argument as ArrangeIcons. When you do this, the application will visit all buttons, if any, that represent minimized child documents, and position them from the left to the right, adjacently.

 
 
   
 

Home Copyright © 2010-2012 FunctionX