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:

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.

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();

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:

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

1. On the Tool Palette, click the Win32 tab
2. Click TPageControl 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

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

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

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.

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   &Side: TEdit edtSquareSide 0.00 TButton btnCalcSquare Calc&ulate TLabel   &Perimeter: TEdit edtSquarePerimeter 0.00 TLabel   &Area: TEdit edtSquareArea 0.00 TLabel   &Length: TEdit edtRectLength 0.00 TLabel   &Height: TEdit edtRectHeight 0.00: TButton btnCalcRectangle Calcula&te TLabel   Peri&meter: TEdit edtRectPerimeter 0.00 TLabel   A&rea: TEdit edtRectArea 0.00

   Control Name Caption/Text TLabel   Ra&dius: TEdit edtCircleRadius 0.00 TButton btnCalcCircle Calcula&te TLabel   &Circumference: TEdit edtCircleCircumference 0.00 TLabel   &Area: TEdit edtCircleArea 0.00 TLabel   rad&ius: TEdit edtEllipseSRadius 0.00 TLabel   Radiu&s: TEdit edtEllipseLRadius 0.00 TButton btnCalcEllipse Calc&ulate TLabel   Circu&mference: TEdit edtEllipseCircumference 0.00 TLabel   A&rea: TEdit edtEllipseArea 0.00

   Control Name Caption/Text TLabel   &Side: TEdit edtCubeSide 0.00 TButton btnCalcCube Calc&ulate TLabel   &Area: TEdit edtCubeArea 0.00 TLabel   &Volume: TEdit edtCubeVolume 0.00 TLabel   &Base: TEdit edtBoxBase 0.00 TLabel   &Height: TEdit edtBoxHeight 0.00 TLabel   &Width: TEdit edtBoxWidth 0.00 TButton btnCalcBox Calcula&te TLabel   A&re: TEdit edtBoxArea 0.00 TLabel   V&olume: 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

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

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.

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

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:

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

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.