Introduction to the Labeled Edit Box

Description

It is by an unavoidable habit that almost every edit control is accompanied by a label. The reason is that, as stated already when reviewing the edit control, a text box has no mechanism of indicating what it is used for. That information is usually handled by a label. To make it easy, there is a control that combines an edit control and its accompanying label: the LabeledEdit control.

Practical Learning: Introducing Labeled Edit Controls

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 Clarksville Ice Cream

To support labeled edit box, the VCL provides the TLabeledEdit class that is derived from the TCustomLabeledEdit class, that itself is based on the TCustomEdit class:

To visually create a labeled edit control, in the Additional tab of the Tool Palette, click the TLabeledEdit button and click a container on your project. To programmatically create a labeled edit box, create a pointer to TLabeledEdit and initialize it using its constructor. As always, in the parentheses of the constructor, enter the name of the parent.

1. In the Tool Palette, click Additional
2. Click TLabeledEdit
3. Click the form
4. In the Object Inspector, click Name, type ledFlavor and press Enter

As mentioned already, the LabeledEdit control is an object of type TLabeledEdit. This control shares its ancestry with the edit control: their parent is the TCustomEdit class.  Based on its ancestry, the LabeledEdit control inherits the same functionality as the edit control.

After adding a LabeledEdit control to your application, you notice that it is accompanied by a label but both are treated as one control. To support the label side of the control, the TCustomLabeledEdit class is equipped with a property named EditLabel. To visually configure the label of the labeled edit control, in the Object Inspector, click the + button of LabelEdit:

From there, among other characteristics, you can change the caption of the control.

In reality, the EditLabel property is of type TBoundLabel. The TBoundLabel class is derived from the TCustomLabel class, which is the same immediate class of the TLabel control.

1. While the labeled edit control is still selected on the form, in the Object Inspector, click the + button of EditLabel
2. Click Caption, &Flavor: and press Enter

By default, the (accompanying) label is positioned above the edit control. The position of the label is controlled by the LabelPosition property. This property is type TLabelPosition, which is an enumerator. It can have one of four values:

• lpAbove: (the default) Causes the label to be positioned on top of the edit control
• lpBelow: Causes the label to be positioned under the edit control
• lpLeft: Positions the label to the left of the edit control
• lbRight: The label is positioned on the right side of the edit control

1. While the labeled edit control is still selected on the form, in the Object Inspector, click LabelPosition
2. Change its value to lpLeft

If you use a separate label and edit controls in your application, you know that you can decide about the distance between both controls. For a LabeledEdit object, this characteristic is handled by the LabelSpacing property, which is an integer. The default value of this property is 3. In most cases, and especially if you decide to position the label to the left, this value would be too little.

1. While the labeled edit control is still selected on the form, in the Object Inspector, click LabelSpacing
2. Type 20 and press Enter
3. Using labeled edit controls, complete the design of the form as follows:
    
   

   Control Name Caption TLabeledEdit edtFlavor  &Flavor: TLabeledEdit edtContainer C&ontainer: TLabeledEdit edtIngredient &Ingredient: TLabeledEdit edtScoops &Scoops: TLabeledEdit edtTotalOrder Or&der Total: