Controls Containers
|
|
Controls Containers |
|
Dialog Boxes |
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:
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:
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.
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:
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.
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:
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.
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
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.
There are two general steps to making a frame available to your application
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.
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.
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 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;
}
//---------------------------------------------------------------------------
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.
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.
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:
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 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:
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:
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:
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:
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).
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:
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.
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.
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.
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.
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.
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 |
. 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
and click the dialog
box
. 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: Using a Template Dialog Box
and click an unoccupied area on the right section of the form
