Home

Win32 Controls: Radio Buttons

 

Introduction to Radio Buttons

 

Description

A radio button is a control that appears as a round box. Normally, a radio button is accompanied by one or more other radio buttons that appear and behave as a group. The user decides what button is valid by clicking one of them. When a button has been clicked, its round box fills with a (big) dot. When one button is selected, the other round buttons of the (same) group are empty. The user can select another by clicking a new choice, which empties the previous selection. This technique of selecting is referred to as mutually-exclusive.

 

Practical LearningPractical Learning: Introducing Radio Buttons

  1. Start Embarcadero RAD Studio
  2. To create a new project, on the main menu, click File -> New -> VCL Forms Application - C++Builder
  3. In the Object Inspector, change the following properties:
    Caption: Compound Interest
    Name:    frmCalculations
    Position: poScreenCenter
  4. Design the form as follows:

    Compound Interest
    Control Name Caption/Text Other Properties
    TPanel TPanel      
    TLabel Directory List Box   &Principal:  
    TEdit Edit edtPrincipal 0.00 Alignment: taRightJustify
    TLabel Directory List Box   &Interest Rate:  
    TEdit Edit edtInterestRate 0.00 Alignment: taRightJustify
    TLabel Directory List Box   %  
    TLabel Directory List Box   P&eriods:  
    TEdit Edit edtPeriods 0.00 Alignment: taRightJustify
    TLabel Directory List Box   Years  
    TPanel TPanel      
    TPanel TPanel      
    TLabel Directory List Box   Interest Earned:  
    TEdit Edit edtInterestEarned 0.00 Alignment: taRightJustify
    TLabel Directory List Box   Future Value:  
    TEdit Edit edtFutureValue 0.00 Alignment: taRightJustify
    TButton TBitBtn btnClose Close  
     

Creating a Radio Button

A radio is implemented by the TRadioButton class. The TRadioButton is based on the TButtonControl, the same ancestor as the normal button:

TRadioButton Inheritance

 
 

Because they come in a group, radio buttons should be organized in a specific container. To implement their mutual exclusiveness, radio buttons should be positioned in either a radio group, group box, or a panel controls. If you add the radio buttons on this type of container, by default, they will be treated as a group. You should refrain from positioning radio buttons directly on a form or a frame.

At design time, to create a group of radio buttons, first position a container, such as a panel or a group box, on the form. If you want each radio button to behave like a full control, first position a group box or a panel controls on the form. To add each radio button, from the Standard section of the Tool Palette, click the TRadioButton icon TRadioButton and click inside of the container.

 

To programmatically create a radio button, declare a pointer to TRadioButton and use the new operator to specify the control that owns the radio button. A bad idea would be to add it to the form. As we have reviewed, you should never (or hardly) position a radio button or a group of radio buttons on a form. Therefore, before creating a radio button, you should have a container on your form. You can add such a host at design time or at run time.

If you want radio buttons, you must know that each button will be created as its own object, besides their container.

Practical LearningPractical Learning: Adding Radio Buttons

  1. In the Tool Palette, click Standard.
    Click TRadioButton TRadioButton
  2. Click the panel on the right side of the form
  3. In the same way, add 4 more radio buttons
     
    Compound Interest

Characteristics of Radio Buttons

 

Introduction

From the programmerís standpoint, the most important property of any control is its Name. Therefore, after adding the radio buttons to a container, you can change their names using the Object Inspector.

Two properties are of particular importance to both you and the user: the label and the state of the control. The label is text that specifies what a particular radio button is used for. To set the label of a radio button, on the Object Inspector, click Caption and type the desired label. Repeat this for each radio button. If you want to change a radio buttonís caption at runtime, you can do so programmatically as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	rdoGender1->Caption = "&Man";
}
//---------------------------------------------------------------------------

Practical LearningPractical Learning: Adding Radio Buttons

  1. On the form, click the top radio button
  2. In the Object Inspector, click Caption, type &Monthly and press Enter
  3. Click Name, type rdoMonthly and press Enter
  4. In the same way, click the second radio button and change its properties as follows:
    Caption: &Quarterly
    Name: rdoQuarterly
  5. In the same way, click the third radio button and change its properties as follows:
    Caption: &Semi-Annually
    Name: rrdoSemiannually
  6. In the same way, click the fourth radio button and change its properties as follows:
    Caption: &Annually
    Name: rdoAnnually

Check Alignments

By default, a radio button is configured so that the label would be positioned on the right side of the rounded box. This is controlled by the Alignment property. If you want the label on the left side, set the radio buttonís Alignment property accordingly. The possible values are: taRightJustify and taLeftJustify.

Practical LearningPractical Learning: Aligning Radio Buttons

  1. On the form, click the top radio button
  2. In the Tool Palette, click Alignment, then click the arrow of its field and select taLeftJustify
  3. AAlign the other radio buttons the same way: taLeftJustify
     
    Compound Interest

Checking a Radio Button

The second of the most important properties of a radio button is its state: whether it is selected or not. When the user clicks a radio button, it becomes exclusively selected. This is seen by the dot inside its rounded box. When a radio button is selected, it is said to be checked. By default, a newly created radio button is not checked. You can select a radio button using the Checked property. This same property allows you to decide what button would be selected when the form opens. As a Boolean property, to set the Checked state of a radio button, set this value to true. At runtime, to set a particular radio button as checked, assign a true value to its Checked property:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	rdoGender2->Checked = True;
}
//---------------------------------------------------------------------------

Once one button has been checked in a group, even if there was no selection in the beginning, one radio button is always selected in the group. The user cannot deselect all radio buttons. Only the developer can do this at runtime. By setting the Checked property of a radio button to false, you can remove its selection. Otherwise, you can assign a false value to the Checked property of each radio button.

A radio button is just a special form of button. Its most used event is OnClick. After creating each radio button as a control, you can use its OnClick event to configure its functionality.

Practical LearningPractical Learning: Implementing Radio Button Events

  1. On the form double-click the Monthly radio button to access its OnClick event
  2. Implement it as follows:
    //---------------------------------------------------------------------------
    
    #include <vcl.h>
    #include <math.h>
    
    #pragma hdrstop
    
    #include "Calculations.h"
    //---------------------------------------------------------------------------
    #pragma package(smart_init)
    #pragma resource "*.dfm"
    TfrmCalculations *frmCalculations;
    //---------------------------------------------------------------------------
    __fastcall TfrmCalculations::TfrmCalculations(TComponent* Owner)
    	: TForm(Owner)
    {
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmCalculations::rdoMonthlyClick(TObject *Sender)
    {
    	double Principal = 0.00,
    	       InterestRate = 0.00,
    	       InterestEarned = 0.00;
    	double FutureValue = 0.00,
    	       RatePerPeriod = 0.00,
    	       Periods = 0;
    
    	// Retrieve the value of the principal
    	Principal = StrToFloat(edtPrincipal->Text);
    
    	// Retrieve the interest rate
    	InterestRate = StrToFloat(edtInterestRate->Text) / 100;
    
    	// Get the number of periods
    	Periods = StrToFloat(edtPeriods->Text);
    
    	// These values will make the calculation easier to read
    	double i = InterestRate / 12;
    	double n = 12 * Periods;
    
    	// Perform the necessary calculations
    	RatePerPeriod = InterestRate / Periods;
    	FutureValue = Principal * pow(1 + i, n);
    	InterestEarned = FutureValue - Principal;
    
    	// Display the values in the appropriate text boxes
    	TVarRec ie[1] = { InterestEarned };
    	edtInterestEarned->Text = Format(L"%8.2f", ie, 2);
    	TVarRec fv[1] = { FutureValue };
    	edtFutureValue->Text    = Format(L"%8.2f", fv, 2);
    }
    //---------------------------------------------------------------------------
  3. Click the arrow on the top section of the Object Inspector and select rdoQuarterly
  4. Click the Events tab
  5. Double-click the empty box on the right side of OnClick
  6. Implement the Click event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmCalculations::rdoQuarterlyClick(TObject *Sender)
    {
    	double Principal = 0.00,
    	       InterestRate = 0.00,
    	       InterestEarned = 0.00;
    	double FutureValue = 0.00,
    	       RatePerPeriod = 0.00,
    	       Periods = 0;
    
    	Principal = StrToFloat(edtPrincipal->Text);
    	InterestRate = StrToFloat(edtInterestRate->Text) / 100;
    	Periods = StrToFloat(edtPeriods->Text);
    
    	double i = InterestRate / 4;
    	double n = 4 * Periods;
    
    	RatePerPeriod = InterestRate / Periods;
    	FutureValue = Principal * pow(1 + i, n);
    	InterestEarned = FutureValue - Principal;
    
    	TVarRec ie[1] = { InterestEarned };
    	edtInterestEarned->Text = Format(L"%8.2f", ie, 2);
    	TVarRec fv[1] = { FutureValue };
    	edtFutureValue->Text    = Format(L"%8.2f", fv, 2);
    }
    //---------------------------------------------------------------------------
  7. In the top combo box of the Object Inspector, select rdoSemiannually
  8. Double-click the box of the OnClick field and implement the Click event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmCalculations::rdoSemiannuallyClick(TObject *Sender)
    {
    	double Principal = 0.00,
    		   InterestRate = 0.00,
    		   InterestEarned = 0.00;
    	double FutureValue = 0.00,
    		   RatePerPeriod = 0.00,
    		   Periods = 0;
    
    	Principal    = StrToFloat(edtPrincipal->Text);
    	InterestRate = StrToFloat(edtInterestRate->Text) / 100;
    	Periods      = StrToFloat(edtPeriods->Text);
    
    	double i = InterestRate / 2;
    	double n = 2 * Periods;
    
    	RatePerPeriod  = InterestRate / Periods;
    	FutureValue    = Principal * pow(1 + i, n);
    	InterestEarned = FutureValue - Principal;
    
    	TVarRec ie[1] = { InterestEarned };
    	edtInterestEarned->Text = Format(L"%8.2f", ie, 2);
    	TVarRec fv[1] = { FutureValue };
    	edtFutureValue->Text    = Format(L"%8.2f", fv, 2);
    }
    //---------------------------------------------------------------------------
  9. In the top combo box of the Object Inspector, select rdoAnnually
  10. Double-click the box of OnClick and implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmCalculations::rdoAnnuallyClick(TObject *Sender)
    {
    	double Principal      = 0.00,
    		   InterestRate   = 0.00,
    		   InterestEarned = 0.00;
    	double FutureValue    = 0.00,
    		   RatePerPeriod  = 0.00,
    		   Periods        = 0;
    
    	Principal = StrToFloat(edtPrincipal->Text);
    	InterestRate = StrToFloat(edtInterestRate->Text) / 100;
    
    	Periods = StrToFloat(edtPeriods->Text);
    
    	double i = InterestRate;
    	double n = Periods;
    
    	RatePerPeriod  = InterestRate / Periods;
    	FutureValue    = Principal * pow(1 + i, n);
    	InterestEarned = FutureValue - Principal;
    
    	TVarRec ie[1] = { InterestEarned };
    	edtInterestEarned->Text = Format(L"%8.2f", ie, 2);
    	TVarRec fv[1] = { FutureValue };
    	edtFutureValue->Text    = Format(L"%8.2f", fv, 2);
    }
    //---------------------------------------------------------------------------
  11. Press F12 to return to the form
  12. Double-click the Close button
  13. Implement its event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmCalculations::btnCloseClick(TObject *Sender)
    {
    	Close();
    }
    //---------------------------------------------------------------------------
  14. To test the form, press F9
  15. After using it, close the form and save your project
  16. On the main menu, click File -> Close All
  17. When asked whether you want to save the project, click Yes
  18. Click the New Folder button
  19. Type CompoundInterest1 as the name of the folder and press Enter twice (to create it and to select it)
  20. Specify the name of the unit as Calculations and press Enter
  21. Specify the name of the project as CompoundInterest and press Enter

The Columns of Radio Buttons

When designing your radio buttons, to manage the space, you can distribute them on more than one column. If you want to use various columns on a group of radio buttons created using a group box or a panel controls, you can visually position each radio button on the container. Programmatically, you can also change the Left and Top values of each control as desired.

 
 
 
 

Home Copyright © 2010-2011 FunctionX, Inc.