Home

VCL Controls: The Labeled Edit Box

 

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 LearningPractical 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

Creating a Labeled Edit Box

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:

 

TLabeledEdit Inheritance

To visually create a labeled edit control, in the Additional tab of the Tool Palette, click the TLabeledEdit button LabeledEdit 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.

Practical LearningPractical Learning: Adding a Labeled Edit Control

  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

Characteristics of the Labeled Edit Box

 

The Label of a Labeled Edit Control

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:

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.

Practical LearningPractical Learning: Adding a Caption

  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

The Position of the Label

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

Practical LearningPractical Learning: Adding a Caption

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

The Spacing of the Label

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.

Practical LearningPractical Learning: Introducing Labeled Edit Controls

  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:
     
    Clarksville Ice Cream
    Control Name Caption
    TLabeledEdit LabeledEdit edtFlavor  &Flavor:
    TLabeledEdit LabeledEdit edtContainer C&ontainer:
    TLabeledEdit LabeledEdit edtIngredient &Ingredient:
    TLabeledEdit LabeledEdit edtScoops &Scoops:
    TLabeledEdit LabeledEdit edtTotalOrder Or&der Total:
 
 
 

Home Copyright © 2010-2011 FunctionX, Inc.