Home

Property Sheets and Property Pages

 

Property Sheets and Property Pages

 

Description

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

 

     

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.

Practical LearningPractical Learning: Introducing Property Sheets

  1. To start a new project, on the main menu, click File -> New -> VCL Forms Application - C++Builder
  2. Change the Caption of the form to Algebra and Geometry
  3. Set its BorderStyle property to bsDialog
  4. Set the dimensions as follows:
    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();

Creating a Property Sheet

Property pages of a property sheet are also referred to as tab controls. In the VCL, a property sheet is based on a class named TPageControl. The TPageControl class implements the TCustomTabControl class that is derived from TWinControl:

TPageControl Inheritance

To visually create a property sheet, from the Win32 section of the Tool Palette, click TPageControl Tab Control and click 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:

Page Control

Practical LearningPractical Learning: Creating a Property Sheet

  1. On the Tool Palette, click the Win32 tab
  2. Click TPageControl Tab Control and click the form
  3. While the new page control is still selected, in the Object Inspector, set its properties as follows:
    Height = 328
    Left = 8
    Name = shtGeometry
    Top = 8
    Width = 432

Creating Property Pages

  • 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 page control and not on individual pages. This means that, to manage the characteristics of pages, you will change the properties of the parent page control control. At any time, whether working on the page control control or on one of its property pages, you should first know what object you are working on by selecting it.

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

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

We saw that, to add property pages to a page control object, you can right-click it and click New Page. Of course, you can also add pages programmatically. To make use of a property page, for example to add controls to it, you must first select the desired property page.

Practical LearningPractical Learning: Creating a Property Page

  1. Right-click in the middle of the page control on the form and click New Page
  2. Make sure the top combo box of the Object Inspector displays TabSheet1.
    Click Caption and type Quadrilateral
  3. Click Name and type pgeQuadrilateral

Selecting Property Pages

Each page of a property is an object based on the TTabSheet class. This class is derived from TWinControl.

At any time, one property 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, in the Object Inspector, type the array index of the page in the TabIndex property. The pages are stored 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.

Practical LearningPractical Learning: Creating Property Pages

  1. Add two more property pages
  2. On the form, click TabSheet2 then click the large area under TabSheet2
  3. In the Object Inspector, click Name and type pgeCircular
  4. Click Caption and type Circular
  5. Click TabSheet3 and click the wide area under TabSheet3
  6. Change its caption to 3-Dimensional and its name to pge3Dimensional
  7. Click the empty area on the right-side of the 3-Dimensional tab to select the PageControl control
  8. In the Object Inspector, set the ActivePage to pgeQuadrilateral
  9. Complete the design of the tab controls as follows:
     
    Control Name Caption/Text
    TLabel TLabel   &Side:
    TEdit TEdit edtSquareSide 0.00
    TButton TButton btnCalcSquare Calc&ulate
    TLabel TLabel   &Perimeter:
    TEdit TEdit edtSquarePerimeter 0.00
    TLabel TLabel   &Area:
    TEdit TEdit edtSquareArea 0.00
    TLabel TLabel   &Length:
    TEdit TEdit edtRectLength 0.00
    TLabel TLabel   &Height:
    TEdit TEdit edtRectHeight 0.00:
    TButton TButton btnCalcRectangle Calcula&te
    TLabel TLabel   Peri&meter:
    TEdit TEdit edtRectPerimeter 0.00
    TLabel TLabel   A&rea:
    TEdit TEdit edtRectArea 0.00
    Control Name Caption/Text
    TLabel TLabel   Ra&dius:
    TEdit TEdit edtCircleRadius 0.00
    TButton TButton btnCalcCircle Calcula&te
    TLabel TLabel   &Circumference:
    TEdit TEdit edtCircleCircumference 0.00
    TLabel TLabel   &Area:
    TEdit TEdit edtCircleArea 0.00
    TLabel TLabel   rad&ius:
    TEdit TEdit edtEllipseSRadius 0.00
    TLabel TLabel   Radiu&s:
    TEdit TEdit edtEllipseLRadius 0.00
    TButton TButton btnCalcEllipse Calc&ulate
    TLabel TLabel   Circu&mference:
    TEdit TEdit edtEllipseCircumference 0.00
    TLabel TLabel   A&rea:
    TEdit TEdit edtEllipseArea 0.00
    Control Name Caption/Text
    TLabel TLabel   &Side:
    TEdit TEdit edtCubeSide 0.00
    TButton TButton btnCalcCube Calc&ulate
    TLabel TLabel   &Area:
    TEdit TEdit edtCubeArea 0.00
    TLabel TLabel   &Volume:
    TEdit TEdit edtCubeVolume 0.00
    TLabel TLabel   &Base:
    TEdit TEdit edtBoxBase 0.00
    TLabel TLabel   &Height:
    TEdit TEdit edtBoxHeight 0.00
    TLabel TLabel   &Width:
    TEdit TEdit edtBoxWidth 0.00
    TButton TButton btnCalcBox Calcula&te
    TLabel TLabel   A&re:
    TEdit TEdit edtBoxArea 0.00
    TLabel TLabel   V&olume:
    TEdit TEdit edtBoxVolume 0.00
  10. Display the Quadrilateral tab and double-click the top Calculate button
  11. Implement its event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnCalcSquareClick(TObject *Sender)
    {
        double side, perimeter, area;
    
        try {
            side = this->edtSquareSide->Text.ToDouble();
            perimeter = side * 4;
            area = side * side;
    
            this->edtSquarePerimeter->Text = FloatToStr(perimeter);
            this->edtSquareArea->Text = FloatToStr(area);
        }
        catch(EConvertError *err)
        {
            ShowMessage("The value you provided is an invalid number.");
            this->edtSquareSide->Text = "0.00";
            this->edtSquarePerimeter->Text = "0.00";
            this->edtSquareArea->Text = "0.00";
        }
    }
    //---------------------------------------------------------------------------
  12. Return to the Quadrilateral property page
  13. Double-click the bottom Calculate button
  14. Implement its event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnCalcRectangleClick(TObject *Sender)
    {
        double length, height, perimeter, area;
    
        try {
            length = this->edtRectLength->Text.ToDouble();
            height = this->edtRectHeight->Text.ToDouble();
            perimeter = (length + height) * 2;
            area = length * height;
    
            this->edtRectPerimeter->Text = FloatToStr(perimeter);
            this->edtRectArea->Text = FloatToStr(area);
        }
        catch(EConvertError *err)
        {
            ShowMessage("Incorrect value(s). Please try again."); 
            this->edtRectPerimeter->Text = "0.00";
            this->edtRectArea->Text      = "0.00";
        }
    }
    //---------------------------------------------------------------------------
  15. Return to the form and click the Circular tab
  16. Double-click the top Calculate button
  17. Implement its event as follows:
    const double myPI = 3.14159;
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnCalcCircleClick(TObject *Sender)
    {
        double radius, circumference, area;
    
        try {
            radius = this->edtCircleRadius->Text.ToDouble();
            circumference = radius * 2 * myPI;
            area = radius * radius * myPI;
    
            this->edtCircleCircumf->Text = FloatToStr(circumference);
            this->edtCircleArea->Text    = FloatToStr(area);
        }
        catch(EConvertError *err)
        {
            ShowMessage("The value you provided for the radius is incorrect.");
            this->edtCircleRadius->Text  = "0.00";
            this->edtCircleCircumf->Text = "0.00";
            this->edtCircleArea->Text    = "0.00";
        }
    }
    //---------------------------------------------------------------------------
  18. Return to the Circular property page
  19. Double-click the bottom Calculate button
  20. Implement its event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::edtCalcEllipseClick(TObject *Sender)
    {
        double smallRadius, largeRadius, circumference, area;
    
        try {
            smallRadius = this->edtEllipseSRadius->Text.ToDouble();
            largeRadius = this->edtEllipseLRadius->Text.ToDouble();
            circumference = (smallRadius + largeRadius) * myPI;
            area = smallRadius * largeRadius * myPI;
    
            this->edtEllipseCircumf->Text = FloatToStr(circumference);
            this->edtEllipseArea->Text    = FloatToStr(area);
        }
        catch(EConvertError *err)
        {
            ShowMessage("Invalid Value(s): Please try again."); 
            this->edtEllipseCircumf->Text = "0.00";
            this->edtEllipseArea->Text    = "0.00";
        }
    }
    //---------------------------------------------------------------------------
  21. Return to the form and click the 3-Dimensional tab
  22. Double-click the top Calculate button
  23. Implement its event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::edtCalcCubeClick(TObject *Sender)
    {
        double side, area, volume;
    
        try {
            side   = this->edtCubeSide->Text.ToDouble();
            area   = side * side * 6;
            volume = side * side * side;
    
            this->edtCubeArea->Text = FloatToStr(area);
            this->edtCubeVolume->Text = FloatToStr(volume);
        }
        catch(EConvertError *err)
        {
            ShowMessage("The value you provided for the Side is invalid.");
            this->edtCubeSide->Text   = "0.00";
            this->edtCubeArea->Text   = "0.00";
            this->edtCubeVolume->Text = "0.00";
        }
    }
    //---------------------------------------------------------------------------
  24. Return to the 3-Dimensional property page
  25. Double-click the bottom Calculate button
  26. Implement its event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnCalcBoxClick(TObject *Sender)
    {
        double base, height, width, area, volume;
    
        try {
            base   = this->edtBoxBase->Text.ToDouble();
            height = this->edtBoxHeight->Text.ToDouble();
            width  = this->edtBoxWidth->Text.ToDouble();
            area   = 2 * ((base*height) + (height*width) + (base*width));
            volume = base * height * width;
    
            this->edtBoxArea->Text   = FloatToStr(area);
            this->edtBoxVolume->Text = FloatToStr(volume);
        }
        catch(EConvertError *err)
        {
            ShowMessage("Invalid Value(s): Please try again."); 
            this->edtBoxArea->Text   = "0.00";
            this->edtBoxVolume->Text = "0.00";
        }
    }
    //---------------------------------------------------------------------------
  27. Execute the application and test each geometric figure
  28. Close the form and return to your programming environment
  29. On the main menu, click File -> Close All
  30. When asked whether you want to save the changes, click Yes
  31. Execute the application and test each geometric figure
  32. Close the form and return to your programming environment
  33. On the main menu, click File -> Close All
  34. When asked whether you want to save the changes, click Yes

Characteristics of Property Sheets and Property Pages

 

Introduction

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.

IIf 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.

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).

The Index of a Page

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.

The Caption of a Property Page

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.

Showing or Hiding a Property Page

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 Property Sheet With Navigation Buttons

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:

Navigation Buttons Property Pages

Using Multiple Rows

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:

Multiline

This would create cascading tabs and the user can simply select the desired property page from its tab:

Multiline

The Position of Tabs

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.

Tabs or Buttons

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 button's value when the tabs are not positioned on top, you would receive an error message.

The Template Property Sheet

To assist you with creating a property sheet, Embarcadero C++Builder provides a template. To get it, display the New Items dialog box. In the left list, click C++Builder Files. In the right list, click Tabbed pages:

New Items

Click OK. This would create a dialog box showing a property sheet that is equipped with three property pages and three buttons:

Tabbed Notebook Dialog Box

You can then customize any of its aspects as you see fit. For example, you can one one or more property pages. You can delete one or more property pages, you can change the names and captions of the property pages. And you can add controls either to the property pages or to the bottom section of the dialog box.

 
 
 
 

Home Copyright © 2010-2011 FunctionX, Inc.