Home

Controls Containers

 

Dialog Boxes

 

Introduction

A dialog box is a form with particular properties. Like a form, a dialog box is referred to as a container. It is the primary interface of user interaction with the computer. By itself, a dialog box means nothing. The controls it hosts accomplish the role of dialog between the user and the machine. Here is an example of a dialog box:

A dialog box has the following characteristics:

  • It is equipped with the system Close button . As the only system button, this button allows the user to dismiss the dialog and ignore whatever the user would have done on the dialog box
  • It cannot be minimized, maximized, or restored. A dialog box does not have any other system button but Close
  • It is usually modal, in which case the user is not allowed to continue any other operation on the same application until the dialog box is dismissed
  • It provides a way for the user to close or dismiss the dialog. Most dialog boxes have an OK and a Cancel buttons, although this depends on the application developer. When the dialog has the OK and the Cancel buttons, the OK button is configured to behave as if the user had pressed Enter. In that case, whatever the user had done would be acknowledged and transferred to the hosting dialog box, window, or application. Pressing Esc applies the same behavior as if the user had clicked Cancel.

Dialog Box Creation

There are two main actions you can perform on a form to qualify it as a dialog box; but normally, these are only suggestions, not rules. Based on the Microsoft Windows design and standards, to create a dialog box:

  • You should set a form’s BorderStyle property to bsDialog. Setting this property automatically removes the system Minimize and Maximize buttons and preserves only the system Close button . This fulfills the first suggested design of a dialog box. If you insist on having other system buttons, you can add them using the BorderIcons property.
  • The second action you should take is to provide a way for the user to close the dialog box. A dialog box should have at least one button labeled OK. This button allows the user to acknowledge the message of the dialog box and close it by clicking the button. If the user press Enter, the dialog box should also be closed as if the OK button was clicked. To fulfill this second requirement, from the Standard section of the Tool Palette, you can click the button Button and click the dialog box

Often the user will be presented with various options on a dialog box and may be asked to make a decision on the available controls. Most of the time, if you are creating such a dialog box, besides the OK button, it should also have a Cancel button. The OK button should be the default so that if the user presses Enter, the dialog box would be closed as if the user had clicked OK. Clicking OK or pressing Enter would indicate that, if the user had made changes on the controls of the dialog box, those changes would be acknowledged and kept when the dialog box is closed and usually the changed values of the control would be transferred to another dialog box or form.

The Cancel button is used to allow the user to dismiss whatever changes would have been made on the controls of the dialog box. The dialog box should also be configured so that if the user presses Esc, the dialog box would be closed as if the user had clicked Cancel.

To fulfill these rules for the OK and the Cancel buttons, the Default property of the OK button should be set to true and the Cancel property of the Cancel button should be set to true.

Besides the OK and the Cancel buttons, a dialog box can be created with additional buttons such as Finish or Help, etc. It depends on its role and the decision is made by the application developer.

Modal Dialog Boxes

There are two types of dialog boxes: modal and modeless. A Modal dialog box is one that the user must first close in order to have access to any other framed window or dialog box of the same application.

One of the scenarios in which you use a dialog box is to create an application that is centered around one. In this case, if either there is no other form or dialog box in your application or all the other forms or dialog boxes depend on this central dialog box, it must be created as modal. Such an application is referred to as dialog-based.

Some applications require various dialog boxes to complete their functionality. When in case, you may need to call one dialog box from another and display it as modal. Here is an example:

The Paragraph dialog box of WordPad is a modal dialog box: when it is displaying, the user cannot use any other part of WordPad unless he or she closes this object first

After creating a dialog used as an addition to an existing form or an existing dialog box, to call it as modal, use the ShowModal() method. 

Modeless Dialog Boxes

A dialog box is referred to as modeless if the user does not have to close it in order to continue using the application that owns the dialog box:

The Find (and the Replace) dialog box of WordPad (also the Find and the Replace dialog boxes of most applications) is an example of a modeless dialog box. If it is opened, the user does not have to close it in order to use the application or the document in the background.

Since the modeless dialog box does not display its button on the task bar, the user should know that the dialog box is opened. To make the presence of a modeless dialog box obvious to the user, it typically displays on top of its host application until the user closes it.

Just like the Modal dialog box, to create a modeless dialog box, once you have added a form to your application, to call it as a modeless dialog box, simply call the Show() method. The only thing you need to take care of is the fact that the dialog box can disappear behind the form that called it.

The fundamental difference between the ShowModal() and the Show() methods is that the first displays a modal dialog box, which makes sure that the called dialog box cannot go in the background of the main application. By contrast, the Show() method only calls the dialog box every time it is requested. For this reason, it is your responsibility to make sure that the modeless dialog box always remains on top of the application. This is easily taken care of by setting the FormStyle property of the form to fsStayOnTop.

There are two main ways a normal modeless dialog box can be dismissed:

  • If the user has finished using it, he can close it and recall it at will
  • When the form or application that owns the modeless dialog box is closed, the form or application closes the modeless dialog if it is opened; this means that you do not need to find out whether a modeless dialog box is still opened when the application is being destroyed: either the user or the application itself will take care of cleaning it

C++ Builder Template Dialog Boxes

To make your development experience a little faster, C++ Builder ships with a lot of dialog boxes ready for use. These dialog boxes are created as modal and are equipped with an OK and a Cancel buttons. These dialogs are available on the Dialogs property page of the New Items dialog box.

To use a C++ Builder dialog template, on the Standard toolbar, you can click the New button . In the New Items dialog box, click the Dialogs tab, select the desired template and click OK. Most dialog boxes are equipped with a bevel for aesthetic purposes and two or three buttons. The OK buttons are configured with the Default property set to true and the ModalResult property set to mrOk. The Cancel buttons have their Cancel property set to true and their ModalResult set to mrCancel. You can reposition the controls and add new ones to the form as you wish. You can add one of the template dialog boxes to your application. Alternatively, if you want to base your application on one of these templates, you can remove the default form from your application.

Practical Learning Practical Learning: Using a Template Dialog Box

  1. Start a new project with the default form
  2. On the main menu, click File -> New -> Other…On the New Items dialog box, click the Dialogs tab. Click Standard Dialog (Vertical):
     
  3. Click OK
  4. Press F12 to access the Code Editor. Click Unit1.cpp to display its code
  5. Once Unit1.cpp is displaying, right-click in the Code Editor and click Close Page. You will be asked whether you want to Save the changes of the Unit1 unit:
     
  6. Click No
  7. To test the dialog box, on the main menu, click Run -> Run
  8. After using the application, close it and return to Borland C++ Builder

The Frame

 

Introduction

A frame is a type of control container that resembles a form. Like a form, when you create a frame, it possesses its own unit where its children can be programmatically managed. Unlike a form, and like all the other containers we will review after this one except the data module, a frame should be embedded on a form that would act as its ultimate parent. Unlike most other containers except for the data module, users do not see a frame and are not aware of its presence. It is used only by the programmer.

A frame is used for better management of controls because, like a form, a frame is created as a separate entity with a body independent of a form.

Practical Learning Practical Learning: Introducing Frames

  1. Start a new project with its default form
  2. Save it in a new folder named InterestAndDiscount1
  3. Save the unit as Exercise and save the project as InterestDiscount
  4. Set its properties as follows
    Caption: Interest and Discount
    BorderStyle: bsDialog
    Name: frmMain
    ShowHint: true
  5. Save All

Frame Creation

There are two general steps to making a frame available to your application

  1. You must create a “physical” frame. This can be done from the main menu where you would click File -> New -> Frame. You can also click File -> New -> Other… Then, in the New Items dialog box, you would select Frame. Any of these actions would position an empty rectangular object on the screen. In the same way, you can create additional frames as needed. Once a frame is available, you can position and design controls on it as you would proceed for a form. There is no restriction on the types of controls you can place on a frame.
  2. Once the frame exists, to embed it onto a form, from the Standard section of the Tool Palette, you can click the Frame button and click the form. As soon as you click the form, you would be asked, from a dialog box, to specify what frame would be placed where you clicked.

After creating and embedding a frame, you can change its controls in either the form or the frame. Anything you do in one, such as adding, removing, or resizing controls, would be automatically updated on the other.

When a frame has focus at design time, you can change its controls as you see fit. From the form on which a frame is embedded, to programmatically access a control placed on that frame, do so indirectly through the frame. For example, the following code would change to blue the background color of an edit control named Edit2 that is placed on a frame named Frame21 and created in Unit2:

//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
#include "Unit2.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma link "Unit2"
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::FormDblClick(TObject *Sender)
{
	Frame21->Edit2->Color = clBlue;
}
//---------------------------------------------------------------------------

A frame control is based on the TFrame class which is in turn based on TCustomtFrame.

Practical Learning Practical Learning: Using Frames

  1. On the main menu, click File -> New -> Frame
  2. Change the Name of the frame to fraSimpleInterest
  3. Design the frame as follows:
     
    Control Caption/Text Name
    Label Principal lblPrincipal
    Edit 0 edtPrincipal
    Label Interest Rate lblInterestRate
    Edit 0 edtInterestRate
    Label Months lblMonths
    Edit 0 edtMonths
    Button C&alculate btnCalculate
    Label Interest Earned lblInterestEarned
    Edit 0 edtInterestEarned
    Label Amount Earned lblAmountEarned
    Edit 0 edtAmountEarned
  4. On the Standard toolbar, click the New button and, on the New Items dialog box, double-click Frame
  5. Change its Name to fraDeptStore and design it as follows:
     
    Control Caption/ Text Name
    Label Marked Price lblMarkedPrice
    Edit 0 edtMarkedPrice
    Label Tax Rate lblTaxRate
    Edit 0 edtTaxRate
    Button C&alculate btnCalculate
    Label Tax Amount lblTaxAmount
    Edit 0 edtTaxAmount
    Label Net Price lblNetPrice
    Edit 0 edtNetPrice
  6. To select the main form, on the View toolbar, click the View Form button. In the list, double-click frmMain
  7. While the form is displaying, in the Standard section of the Tool Palette, click the Frames button 
  8. Click on the top-left section of the form
  9. In the Select Frame To Insert dialog box, click fraSimpleInterest
     
  10. Click OK
  11. Once again, on the Standard section of the Tool Palette, click the Frame button and click an unoccupied area on the right section of the form
  12. In the Select Frame To Insert dialog box, double-click fraDeptStore
  13. Adjust the positions of the frames as you see fit, using the same techniques we reviewed for moving controls
     
  14. Test the application. Then close it and return to Borland C++ Builder
  15. Save All

The Data Module

 

Introduction

Like the form and the frame controls, a data module is a control container that is created independent of a form. Like the form and the frame, once created, a data module has its own unit that can be used to support its child controls. Unlike all other containers we will review here, a data module can receive or host only non-visual controls; that is, controls that the user does not see.

Data Module Creation

A data module is particularly easy to create and manage since there is no true graphical design to perform on its children. This simply means that the controls placed on a data module do not have a location or dimensions. They can be placed anywhere in its window: the user will see neither the data module nor its children.

To create a data module, on the main menu, you can click File -> New -> Data Module. Alternatively, you can open the New Items dialog box from where you would select Data Module. Any of these two actions would place a rectangular window with a white background on your screen.

To use a data module, you can position only non-visual controls to it. In fact, when the data module window is selected or has focus and you click a tab of the Tool Palette, only non-visual controls would be available. For example, here is the Standard property page of the Tool Palette when a data module is the top window:

To use a control, click it from the Tool Palette and place it on the data module. Here is an example with various controls:

To access a control placed on a data module, do so indirectly through the data module as a control. For example, the following code accesses the ColorDialog1 object from a data module named DataModule2 when the user double-clicks the form. If the user clicks OK after changing the color of the dialog box, the new color would be used to paint the form:

//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
#include "Unit2.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::FormDblClick(TObject *Sender)
{
	if( DataModule2->ColorDialog1->Execute() )
		Color = DataModule2->ColorDialog1->Color;
}
//---------------------------------------------------------------------------

The Panel Control

 

Introduction

A panel is a visible rectangular object that can provide two valuable services for application design. A panel allows you to design good-looking forms by adjusting colors and other properties such as Align and Style. A panel is also a regularly used control container because it holds and carries controls placed on it. When a panel moves, it does so with the controls placed on it. Panels are not transparent. Therefore, their color can be changed to control their background display. A panel is a complete control with properties, methods, and events.

Characteristics of a Panel

Unlike the form, the frame, and the data module, during design, a panel must primarily be positioned on another container, which would be a form, a frame, or another panel. At run time, you can “detach” a panel from its parent, which is not possible at design time. To add a panel to a container, you can click the Panel control from the Standard section of the Tool Palette. Then click in the desired location on an existing container.

After adding the panel to a container, you may want to “glue” it to one border or corner of its host, as you would do with the Anchors property. Unlike anchoring a control, the Align property allows you to fix a control to one border of its host.

Some text-based controls that use a caption allow you to control how such text would be aligned as a paragraph. The Alignment property is a TAlignment enumerator that lets you align text to the left, the center, or the right. If the control, such as a panel would not display a caption, you can leave this property “as is”. To change the Alignment property, click it on the Object Inspector to reveal its combo box. Click the arrow and select the desired value: taLeft, taCenter, or taRight.

A panel object is drawn with two borders: an inner and an outer borders. The characteristic of a border is referred to as a bevel effect, which controls the border appearance of a panel. The effects of this characteristic are managed through the BevelInner and the BevelOuter properties. Using their combination, you can produce special effects as follows:

The other property to take into consideration is the BevelWidth value. This is an integer that controls the border of a panel by setting the distance between the inner and outer bevels. Here is the effect of a 2 value on the above pre-selections:

The BorderStyle property controls the line used to draw the border of the panel. It can have one of two values. The bsNone value, which is its default, indicates that there will not be a line drawn on the border. When the BorderStyle property is set to a bsSingle value, a line of 1 pixel is drawn around the panel. The above panels were drawn with a bsNone value for the BorderStyle. Here is the effect produced on panels that have a BorderWidth value of 2 and the BorderStyle set to bsSingle:

A panel can be used as a button, in which case the user would click it to initiate an action. A panel can also simply display a message to the user. In any case, if you want to display a word or a group of words, you can use the Caption property to show it.

A property that is highly used on panels (and forms) is the Color. If you change the Color property, the new color would cover the face of the panel.

Practical Learning Practical Learning: Using Panel Controls

  1. Start a new application with its default form
  2. In the Object Inspector, click Caption and type Dockable Windows
  3. From the Standard page of the Tool Palette, double-click the Panel control
  4. Set the Align property of the new Panel to alLeft. Set the BevelOuter property to bvLowered. Also set the DockSite property to true
  5. Delete the Caption value
  6. While Panel1 is still selected, from the Standard page, double-click the Panel control . Set the Align property to alClient. Set the DragKind to dkDock and the DragMode to dmAutomatic. Optionally set the BevelOuter to bvNone and its Caption to Window Floater
  7. While the Panel2 control is still selected, from the Standard section of the Tool Palette, double-click the Memo control . Set its Align property to alClient
  8. To test it, press F9. At this time, the Memo1 control is dockable but there is a problem. When the application starts, the Memo does not appear the way we want it, even though we can drag it away and bring it back. Close the form
  9. Double-click an empty area on the form to access the form's OnCreate event. Implement it as follows:
     
    //---------------------------------------------------------------------------
    void __fastcall TForm1::FormCreate(TObject *Sender)
    {
    	TRect Recto(Left, Top, Left + Panel1->Width, Top + ClientHeight);
    	Panel2->ManualFloat(Recto);
    	Panel2->ManualDock(Panel1, Panel1, alClient);
    }
    //---------------------------------------------------------------------------
  10. To test the program again, press F9
  11. Press F12 to display the form
  12. Remember that, at this time, if the user closes the docking or floating window, it disappears completely. To recover from that, you can provide a menu or a button that would easily toggle the appearance or disappearance of the docking window.
    From the Standard section of the Tool Palette, click Panel and click an unoccupied area on the form
  13. On the Object Inspector, click Caption and type Toggle
  14. On the form, double-click Toggle to access its OnClick event and implemented it as follows (remember that, in our example, Panel2 is the real docking window while Panel1 is just the host of the floating window):
     
    //---------------------------------------------------------------------------
    void __fastcall TForm1::Button1Click(TObject *Sender)
    {
    	Panel2->Visible = !Panel2->Visible;
    }
    //---------------------------------------------------------------------------
  15. Test the program

Property Sheets and Property Pages

 

Overview

As your application becomes crowded with various controls, you may find yourself running out of space. To solve such a problem, you can create many controls on a form or container and display some of them only in response to some action from the user. The alternative is to group controls in various containers and specify when the controls hosted by a particular container must be displayed. This is the idea behind the concept of property pages.

A property page is a control container that appears as a form or a frame. A property page can appear by itself, as one. Here is an example:

Date/Time Properties

In most other cases, a property page appears in a group with other pages. It functions like a group of pieces of paper placed on top of each other. Each piece is represented by a tab that allows the user to identify them:

To use a property page, the user clicks the header, called a tab, of the desired page. This brings that page up and sends the others in the background:

If the user needs access to another page, he can click the desired tab, which would bring that page in front and send the previously selected to the back.

The pages are grouped and hosted by an object called a property sheet. Like a form, the pages of a property sheet are simply used to carry or hold other controls. The major idea of using a property sheet is its ability to have many controls available in a smaller container.

Property Sheet Creation

Property pages of a property sheet are also referred to as tab controls. In the VCL, a property sheet is created using the TPageControl class. The control from this class, the PageControl control, serves as the property sheet. To implement a property sheet in your application, from the Win32 tab of the Tool Palette, you can click PageControl and click in the form that would be used as the property sheet platform. To create, add, or remove the actual property pages of the property sheet, you can right-click the PageControl control:

  • To create or add a property page, you can click New Page; you can do this continuously until you have added all desired pages.
  • If you had added a page by mistake or you do not want a particular page anymore, you can remove it. To do this, first click the page's tab. Then right-click in the middle of the PageControl control and click Delete Page.

Many of the effects you will need on pages have to be set on the PageControl and not on individual pages. This means that, to manage the characteristics of pages, you will change the properties of the parent PageControl control. At any time, whether working on the PageControl control or on one of its property pages, you should first know what object you are working on by selecting it.

To select the PageControl control itself, you have two main options:

  • Any time you want to select the PageControl, click an unoccupied area on the right side of the most right tab
  • While one tab is selected, click another tab

If you want the property sheet to occupy the whole form or to occupy a section of it, you can specify this using the Align property. A PageControl by itself can be used as a control and you can place the necessary controls on it, but this is usually not the reason you would need a PageControl control.

If you want the property pages to have bitmaps on their tabs, you should first add a series of images using an ImageList control and then assign that control to the Images property of the PageControl object.

If you have many property pages and the width of the PageControl cannot show all tabs at the same time, the control would add two navigation arrow buttons to its top right corner to let the user know that there are more property pages:

By default, the navigation buttons would come up because the control uses a property that controls their availability. If you do not want the navigation arrows, you can set the MultiLine property of the PageControl control to true. This would create cascading tabs and the user can simply select the desired property page from its tab:

As you are adding pages to a PageControl control, the tabs of the pages are positioned on the top border of the PageControl area. You can reposition them to the left, the right, or the bottom borders of the control. The placement of the tab is set using the TabPosition property of the PageControl. The possible values of this property are tpTop, tpLeft, tpRight, and tpBottom:

TabPosition: tpLeft TabPosition: tpTop
TabPosition: tpBottom TabPosition: tpRight

If you want to create a discrete property sheet and do not want to display the traditional tabs, you can replace the tabs with buttons. This option works only if the TabPosition property is set to tbTop, that is, only if the tabs would have been positioned to the top border of the control. To display buttons instead of tabs, use the Style property. Its values are tsTabs, tsButtons, and tsFlatButtons. The button options produce the following effects:

Style: tsButtons Style: tsFlatButtons

If you attempt to set the Style property to a buttons value when the tabs are not positioned on top, you would receive an error message:

After adding the PageControl control to your form and after adding one or more property pages, the property pages are created where the PageControl control is positioned and its dimensions are used by the eventual property pages. This means that, if you want a smaller or larger property sheet, you must modify the dimensions of the PageControl control and not those of the property pages, even though each property page has a location (Left and Top properties) and dimensions Height and Width properties).

Property Pages Creation

We saw that, to add property pages to a PageControl object, you can right-click it and click New Page. You can also add pages programmatically, of course. To make use of a property page, for example to add controls to it, you must first select the desired property page. A page is selected when its tab is in front. If there are other property pages, their tabs would be in the back. The page whose tab is in front or selected is also referred to as the Active Page. To select a property page, you have three main options:

  • Right-click the PageControl control on the form and click Next Page or Previous Page. The pages are considered items of a rotating array. If the second page out of three is displaying and you click Next Page, the third page would be selected. If you are on the third page out of three and you click Next Page, the first page would be selected.
  • Clicking Previous Page would have the reverse effect of Next Page
  • On the form, you can click its tab. This would bring the page to the front and send the other(s), if any, to the back
  • With the PageControl itself having focus on the form, on the Object Inspector, you can select the desired page using the ActivePage property
  • While the PageControl control is selected, on the Object Inspector, type the array index of the page in the TabIndex property. The pages are store in a zero-based array with the first having an index of 0 and the second an index of 1, etc. If you do not want any tab selected, set this property to a negative integer. If you type a value higher than the total number of pages - 1, the previous page selected, if any, would be selected again.
    Like all other controls, the names of property pages are cumulative. As you add them, the first would be named TabSheet1, the second would be TabSheet2, etc. If you plan to programmatically refer to the property pages, you should give them more explicit names. As done with any other control, to set the name of a property page, after selecting it, on the Object Inspector, change the value of the Name property.

If you have added pages but do not like their sequence, especially after adding the desired controls, you can move the page and change their sequence. The property pages are stored in a zero-based array. Each page has an index represented by the PageIndex property. The first page has a PageIndex value of 0, the second, if available, has a value of 1, etc. To move the property page, after selecting it, on the Object Inspector, change its PageIndex value. The value must be an unsigned integer less than the total number of pages.

Probably the first obvious characteristic of a property page is the word or string that identifies it to the user. That is, the string that displays on the tab of a property page. This is known as its title or caption. By default, the captions are set cumulatively as the pages are added. Usually you will not use these titles because they are meaningless. To display a custom title for a property page, first select it and, on the Object Inspector, change the value of the Caption property. You can also change the title of a property page programmatically, for example, in response to an intermediary action. To change the title of a page, assign a string to its Caption property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	pgeSecurity->Caption = "Security Issues";
}
//---------------------------------------------------------------------------

If you had associated an ImageList control with the PageControl object and you want to use images on the title of a property page, specify the desired image using the ImageIndex property. You can use the images on some or all property pages. If you do not want an image on a certain property page, set its ImageIndex value to -1.

If for some reason you do not want to show a property page but do not want to delete it, you can hide it by setting its TabVisible property to false.

Practical Learning Practical Learning: Creating a Property Sheet

  1. Start a new project with its default form
  2. Change the Caption of the form to Algebra and Geometry
  3. Set its BorderStyle property to bsDialog
  4. Set the dimensions as follows (if you are using Windows XP, at the end of these instructions, resize the dialog box to adapt, instead of using the following dimensions):
    Height = 402
    Width = 460
  5. From the Standard section of the Tool Palette, add a button with the following properties:
    Caption = OK
    Default = true
    Left = 280
    Name = btnOK
    Top = 344
  6. Add another button with the following properties:
    Cancel = true
    Caption = Cancel
    Left = 364
    Name = btnCancel
    Top = 344
  7. Double-click the Cancel button, press Tab and type Close();
  8. To save the project, on the Standard toolbar, click the Save All button
  9. Create a folder called AlgebraGeometry1
  10. Save the unit as Main and save the project as Geometry
  11. On the Tool Palette, click the Win32 tab. Click PageControl and click on the form
  12. While the new PageControl object is still selected, on the Object Inspector, set its properties as follows:
    Height = 328
    Left = 8
    Name = shtGeometry
    Top = 8
    Width = 432
  13. Right-click in the middle of the PageControl on the form and click New Page
  14. Add two more property pages
  15. Click TabSheet1 then click in the body of TabSheet1 to select the first property page
  16. Make sure the top combo box of the Object Inspector displays TabSheet1. Click Caption and type Quadrilateral
  17. Click Name and type pgeQuadrilateral
  18. On the form, click TabSheet2 then click the large area under TabSheet2. Type pgeCircular (for the Name) and change its Caption to Circular
  19. Click TabSheet3 and click the wide area under TabSheet3. Change its caption to 3-Dimensional and its name to pge3Dimensional
  20. Click the empty area on the right-side of the 3-Dimensional tab to select the PageControl control. On the Object Inspector, set the ActivePage to pgeQuadrilateral
  21. From the Additional tab of the Tool Palette, click Image and click in the body of the Quadrilateral property page
  22. While the Image1 control is still selected, on the Object Inspector, double-click the right area of Picture and, using the Load button, select the Quadrilateral image from the Pictures folder of the resources that accompany this ebook
  23. Set its properties as follows:
    Height=297
    Left=0
    Top=0
    Width=161
     
  24. In the same way, add an Image control to the Circular property page and set its Picture to Circular. Set the following properties:
    Height=297
    Left=0
    Top=0
    Width=161
     
  25. Add an Image control to the 3-Dimensional property page and set its Picture to Dimension3. Set the following properties:
    Height=297
    Left=0
    Top=0
    Width=161
     
  26. Execute the application to see the result

Wizard Pages

 

Overview

A wizard is a series of dialog pages that display in sequence, one after another. A wizard is usually used to guide a user through a process of performing a task.

Wizard Creation

Although wizards are (still) popular, the VCL does not offer strong support for them. That is because in the VCL, like many scenario implementations, wizards are not particularly difficult. Everything depends on what you want to do with a wizard.

The Multiple Document Interface (MDI)

 

Introduction to MDI-Based Applications

A multiple document interface, abbreviated MDI, is an application whose main form directly "owns" other forms. The main form is also considered the parent. The forms that the parent form owns can display only within the rectangular borders of the parent form. The main idea behind an MDI is to allow the user to open different documents and work on them without having to launch another instance of the application:

Corel Draw is an example of an MDI. The user can create one document, open another without closing the previous one, and create or open as many documents as the computer memory allows it

As opposed to an MDI, a Single Document Interface (SDI) allows only one document at a time in the application.

WordPad is an example of an SDI. The user can open only one document at a time. If he wants another WordPad document, he must open an additional instance of WordPad.

Each form that is child of the main form in an MDI can be a fully functional form and most, if not all, child forms are of the same kind. There are two main ways a child document of an MDI displays. To provide information about its state, a child form is equipped with a title bar. The title bar of a child form displays an icon, the name of its document, and its own system buttons. Since it can be confined only within the parent form, it can be minimized, maximized, or restored within the parent form. When a child form is not maximized, it clearly displays within the parent form. If it gets closed and there is no other child form, the parent would appear empty. If there are various child forms, they share the size of the client area of the parent form. If one of the child forms is maximized, it occupies the whole client area of the main main form and it displays its name on the title bar of the main form.

MDI Creation

Creating an MDI application is not the most difficult assignment you will perform in C++ Builder. Any regular form can be made into an MDI. This is simply taken care of by setting its FormStyle property to fsMDIForm and that's it. A form whose style is set as MDI has a sunken client area that indicates that it can host other form:

Visually creating an MDI is so simple that the only thing necessary is to add another form and set its FormStyle property to fsMDIChild. If you run such an application, it would provide all the basic functionality required of an MDI:

The first challenge of creating an MDI consists of performing the various assignments that, on one hand, allow a parent and a child to communicate, and on the other hand, allow the children to communicate.

C++ Builder ships with a wizard that allows you to quickly create an MDI-based application. Unfortunately, this wizard creates only a text-based application. It does not give you the option to specify the type of application you want.

Previous Copyright © 2005-2007 Yevol Next