Home

Windows Controls: Speed Buttons

 

Introduction to Speed Buttons

 

Description

In Microsoft Windows, a button is created using the "BUTTON" class but it includes many options. One of the options is the command button. Another option is the regular radio button. Even these two options include sub-options each. For example, a radio button can be made to appear as a rectangular object instead of a round box. To make this a complete control of its own, the VCL provides an object named the speed button.

A speed button is a customized version of a button so that, when used as a radio button, instead of a round box, it appears as a rectangular object. This option provides two sub-options. One of the sub-options creates a button that supports mutual-exclusivity, like a group of radio buttons. This means that you can have a group of speed buttons so that, when one button is down, the others stay up.

Practical LearningPractical Learning: Introducing Speed Buttons

  1. To create a new application, on the main menu, click File -> New -> VCL Forms Application - C++Builder
  2. In the Object Inspector, change the properties of the form as follows:
    Caption: Elementary Algebra
    Name:    frmAlgebra
    Position: poScreenCenter

Creating a Speed Button

To support speed buttons, the VCL provides a class named TSpeedButton. The TSpeedButton class is defined in the Buttons.hpp library and is derived from the TGraphicControl class:

TSpeedButton Inheritance

To visually create a speed button, in the use the Additional section of the Tool Palette, click the TSpeedButton icon Speed Button and click the form or desired container.

Practical LearningPractical Learning: Creating Speed Buttons

  • Design the form as follows:

    Elementary Algebra
    Control Alignment Caption/Text Color Font Name
    TPanel TPanel         pnlLevel
    TSpeedButton TSpeedButton         btnLevel1
    TSpeedButton TSpeedButton         btnLevel2
    TSpeedButton TSpeedButton         btnLevel3
    TSpeedButton TSpeedButton         btnLevel4
    TPanel TPanel         pnlOperation
    TSpeedButton TSpeedButton         btnAddition
    TSpeedButton TSpeedButton         btnSubtraction
    TSpeedButton TSpeedButton         btnMultiplication
    TSpeedButton TSpeedButton         btnDivision
    TLabel TLabel taRightJustify 00 clBlue Font: Tahoma
    Font style: Bold
    Size:   78
    Color: Blue
    lblOperand1
    TLabel TLabel   + clBlue Font: Tahoma
    Font style: Bold
    Size:   78
    Color: Blue
    lblOperation
    TLabel TLabel taRightJustify 00 clBlue Font: Tahoma
    Font style: Bold
    Size:   78
    Color: Blue
    lblOperand2
    TLabel  TLabel  __________         
    TButton Directory List Box   Close    Font: Tiffany Lt BT (*)
    Size:   24
    Font style: Demi
    Color: Black
     btnClose
    TEdit TEdit taRightJustify 000 clMaroon Font: Tahoma
    Size:   78
    Font style: Bold
    Color: Maroon
    edtResult
    TButton Directory List Box   Check Result   Font: Tiffany Lt BT (*)
    Size:   24
    Font style: Demi
    Color: Maroon
    btnCheckResult

    (*) If you don't have the "Tiffany Lt BT" font, select any Serif font of your choice (such as Garamond, Georgia, or Times New Roman)

Characteristics of Speed Buttons

 

Introduction

A speed button is a graphical control. That is, it must have a location and size. If you are visually creating the control, you can use the Object Inspector to specify these characteristics. The speed button also can use a caption that indicates what it is used for. This, also, you can specify in the Object Inspector or programmatically by assigning a string to its Caption property. Besides these, the speed button shares the normal characteristics of a command button.

Practical LearningPractical Learning: Creating Speed Buttons

  1. Specify the captions of the speed buttons as follows:

    Elementary Algebra
    Control Caption/Text Color Font => On all speed buttons:
    Font: Tiffany Lt BT (*)
    Font style: Demi
    Size:   24
    Name
    TPanel TPanel       pnlLevel
    TSpeedButton TSpeedButton Level 1   Color: Navy btnLevel1
    TSpeedButton TSpeedButton Level 2   Color: Blue btnLevel2
    TSpeedButton TSpeedButton Level 3   Color: Red btnLevel3
    TSpeedButton TSpeedButton Level 4   Color: Teal btnLevel4
    TPanel TPanel       pnlOperation
    TSpeedButton TSpeedButton Addition   Color: Green btnAddition
    TSpeedButton TSpeedButton Subtraction   Color: Purple btnSubtraction
    TSpeedButton TSpeedButton Multiplication   Color: Teal btnMultiplication
    TSpeedButton TSpeedButton Division   Color: Fuchsia btnDivision
     
  2. Click Algebra.h and, in the private section, declare two integer variables named Level and Operation
    private:	// User declarations
    	int Level;
    	int Operation;
    
    public:		// User declarations
    	__fastcall TfrmAlgebra(TComponent* Owner);
    };
    //---------------------------------------------------------------------------
  3. Click Algebra.cpp and initialize the variables to 0 each
    //---------------------------------------------------------------------------
    __fastcall TfrmAlgebra::TfrmAlgebra(TComponent* Owner)
    	: TForm(Owner)
    {
    	Level = 1;
    	Operation = 1;
    }
    //---------------------------------------------------------------------------

Implementing Mutual Exclusiveness

One of the main reasons for using a speed button is for its mutual-exclusive features. To support it, the TSpeedButton class is equipped with the GroupIndex property:

__property int GroupIndex = {read=FGroupIndex,write=SetGroupIndex};

To implement mutual exclusivity, create the controls, more than two, and give them the same GroupIndex value. The value can be any integer of your choice. If you want to create more than one group of speed buttons, each group must have a different GroupIndex value.

Practical LearningPractical Learning: Implementing Mutual Exclusiveness

  1. On the form, click the Level 1 button
  2. Press and hold Shift
  3. Click the Level 2 button
  4. Click the Level 3 button
  5. Click the Level 4 button
  6. Release Shift
  7. In the Object Inspector, click GroupIndex, type 12 and press Enter
  8. On the form, click the Addition button
  9. Press and hold Shift
  10. Click the Subtraction button
  11. Click the Multiplication button
  12. Click the Division button
  13. Release Shift
  14. In the Object Inspector, click GroupIndex, type 15 and press Enter
  15. Click an empty area of the form to make sure nothing is selected
  16. Press F9 to execute
  17. Click each of the top speed buttons
  18. Close the form and return to your programming environment

Putting a Button Down

To use a button in the group, the user can click it. This puts the button down while the others are or stay up. The user can click another button in the same group to change. To let you put a button down, the TSpeedButton class is equipped with the Down property:

__property bool Down = {read=FDown,write=SetDown};

To programmatically push a button, set its Down property to True. To find out whether a button is down, get the value of its Down property.

Practical LearningPractical Learning: Putting the Buttons Down

  1. On the form, click the Level 1 button
  2. In the Object Inspector, click the check box of Down to make it True
  3. On the form, click the Addition button
  4. In the Object Inspector, click the check box of Down to make it True
  5. On the form, double-click the New Operation button

Using a Speed Button

A speed is primarily a button. This means that, to use it the user must click it. When this is done, the control fires an OnClick event. In a mutual-exclusion scenario, the button that was clicked stays down. Still, you can use the event of the button however you want. For example, you can use the event as a normally clicked action. At the same time, you can find out if the button that was click is currently down.

Practical LearningPractical Learning: Using Speed Buttons

  1. On the form, double-click the Addition button to generate its OnClick event
  2. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnAdditionClick(TObject *Sender)
    {
    	int Operand1 = 0;
    	int Operand2 = 0;
    	Operation    = 1;
    
    	if( Level == 1 )
    	{
    		Operand1 = Random(10);
    		Operand2 = Random(10);
    	}
    	else if( Level == 2 )
    	{
    		Operand1 = Random(30);
    		Operand2 = Random(30);
    	}
    	else if( Level == 3 )
    	{
    		Operand1 = Random(60);
    		Operand2 = Random(60);
    	}
    	else // if( Level == 4 )
    	{
    		Operand1 = Random(80);
    		Operand2 = Random(80);
    	}
    
    	lblOperand1->Caption  = IntToStr(Operand1);
    	lblOperation->Caption = L"+";
    	lblOperand2->Caption  = IntToStr(Operand2);
    	edtResult->Text    = L"0";
    }
    //---------------------------------------------------------------------------
  3. In the Object Inspector, click Events
  4. In the top combo box of the Object Inspector, select btnSubtraction
  5. Double-click the right side of OnClick
  6. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnSubtractionClick(TObject *Sender)
    {
    	int Operand1 = 0;
    	int Operand2 = 0;
    	Operation    = 2;
    
    	if( Level == 1 )
    	{
    		Operand1 = Random(10);
    		Operand2 = Random(10);
    	}
    	else if( Level == 2 )
    	{
    		Operand1 = Random(30);
    		Operand2 = Random(30);
    	}
    	else if( Level == 3 )
    	{
    		Operand1 = Random(60);
    		Operand2 = Random(60);
    	}
    	else // if( Level == 4 )
    	{
    		Operand1 = Random(80);
    		Operand2 = Random(80);
    	}
    
    	lblOperand1->Caption = IntToStr(Operand1);
    	lblOperation->Caption = L"-";
    	lblOperand2->Caption = IntToStr(Operand2);
    	edtResult->Text    = L"0";
    }
    //---------------------------------------------------------------------------
  7. In the top combo box of the Object Inspector, select btnMultiplication
  8. Double-click the right side of OnClick
  9. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnMultiplicationClick(TObject *Sender)
    {
    	int Operand1 = 0;
    	int Operand2 = 0;
    	Operation    = 3;
    
    	if( Level == 1 )
    	{
    		Operand1 = Random(5);
    		Operand2 = Random(5);
    	}
    	else if( Level == 2 )
    	{
    		Operand1 = Random(15);
    		Operand2 = Random(15);
    	}
    	else if( Level == 3 )
    	{
    		Operand1 = Random(25);
    		Operand2 = Random(25);
    	}
    	else // if( Level == 4 )
    	{
    		Operand1 = Random(40);
    		Operand2 = Random(40);
    	}
    
    	lblOperand1->Caption = IntToStr(Operand1);
    	lblOperation->Caption = L"*";
    	lblOperand2->Caption = IntToStr(Operand2);
    	edtResult->Text    = L"0";
    }
    //---------------------------------------------------------------------------
  10. In the top combo box of the Object Inspector, select btnDivision
  11. Double-click the right side of OnClick
  12. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnDivisionClick(TObject *Sender)
    {
    	int Operand1 = 0;
    	int Operand2 = 1;
    	int Factor   = 1;
    	Operation    = 4;
    
    	// Division is a special case
    	if( Level == 1 )
    	{
    		Factor   = Random(3);
    		Operand2 = Random(5);
    	}
    	else if( Level == 2 )
    	{
    		Factor   = Random(4);
    		Operand2 = Random(10);
    	}
    	else if( Level == 3 )
    	{
    		Factor   = Random(6);
    		Operand2 = Random(10);
    	}
    	else // if( Level == 4 )
    	{
    		Factor   = Random(10);
    		Operand2 = Random(20);
    	}
    
    	Operand1 = Factor * Operand2;
    
    	if( Operand2 == 0 )
    		Operand2 == 1;
    
    	lblOperand1->Caption = IntToStr(Operand1);
    	lblOperation->Caption = L"/";
    	lblOperand2->Caption = IntToStr(Operand2);
    	edtResult->Text    = L"0";
    }
    //---------------------------------------------------------------------------
  13. In the top combo box of the Object Inspector, select btnLevel1
  14. Double-click the right side of OnClick
  15. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnLevel1Click(TObject *Sender)
    {
    	Level = 1;
    
    	if( Operation == 1 )
    		btnAdditionClick(Sender);
    	else if( Operation == 2 )
    		btnSubtractionClick(Sender);
    	else if( Operation == 3 )
    		btnMultiplicationClick(Sender);
    	else
    		btnDivisionClick(Sender);
    }
    //---------------------------------------------------------------------------
  16. In the top combo box of the Object Inspector, select btnLevel2
  17. Double-click the right side of OnClick
  18. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnLevel2Click(TObject *Sender)
    {
    	Level = 2;
    
    	if( Operation == 1 )
    		btnAdditionClick(Sender);
    	else if( Operation == 2 )
    		btnSubtractionClick(Sender);
    	else if( Operation == 3 )
    		btnMultiplicationClick(Sender);
    	else
    		btnDivisionClick(Sender);
    }
    //---------------------------------------------------------------------------
  19. In the top combo box of the Object Inspector, select btnLevel3
  20. Double-click the right side of OnClick
  21. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnLevel3Click(TObject *Sender)
    {
    	Level = 3;
    
    	if( Operation == 1 )
    		btnAdditionClick(Sender);
    	else if( Operation == 2 )
    		btnSubtractionClick(Sender);
    	else if( Operation == 3 )
    		btnMultiplicationClick(Sender);
    	else
    		btnDivisionClick(Sender);
    }
    //---------------------------------------------------------------------------
  22. In the top combo box of the Object Inspector, select btnLevel4
  23. Double-click the right side of OnClick
  24. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnLevel4Click(TObject *Sender)
    {
    	Level = 4;
    
    	if( Operation == 1 )
    		btnAdditionClick(Sender);
    	else if( Operation == 2 )
    		btnSubtractionClick(Sender);
    	else if( Operation == 3 )
    		btnMultiplicationClick(Sender);
    	else
    		btnDivisionClick(Sender);
    }
    //---------------------------------------------------------------------------
  25. In the top combo box of the Object Inspector, select frmAlgebra
  26. Double-click the right side of OnCreate
  27. Implement its event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::FormCreate(TObject *Sender)
    {
    	btnAdditionClick(Sender);
    }
    //---------------------------------------------------------------------------
  28. In the top combo box of the Object Inspector, select btnCheckResult
  29. Double-click OnClick and implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnCheckResultClick(TObject *Sender)
    {
    	int Operand1   = StrToInt(lblOperand1->Caption);
    	int Operand2   = StrToInt(lblOperand2->Caption);
    	int UserResult = StrToInt(edtResult->Text);
    	bool RightAnswer = False;
    
    	if( (btnAddition->Down == True) &&
    		(UserResult == (Operand1 + Operand2)) )
    		RightAnswer = True;
    	else if( (btnSubtraction->Down == True) &&
    		(UserResult == (Operand1 - Operand2)) )
    		RightAnswer = True;
    	else if( (btnMultiplication->Down == True) &&
    		(UserResult == (Operand1 * Operand2)) )
    		RightAnswer = True;
    	else if( (btnDivision->Down == True) &&
    		(UserResult == (Operand1 / Operand2)) )
    		RightAnswer = True;
    
    	if(	RightAnswer == True )
    		MessageBox(Handle, "WOW - Good Result", "Elementary Algebra", 0);
    	else
    		MessageBox(Handle,
    			   "PSST - Wrong Answer\n"
    			   "We hope you will get it right next time",
    			   "Elementary Algebra", 0);
    }
    //---------------------------------------------------------------------------
  30. In the top section of the Object Inspector, select btnClose
  31. Double-click the right side of OnClick
  32. Implement its event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmAlgebra::btnCloseClick(TObject *Sender)
    {
    	Close();
    }
    //---------------------------------------------------------------------------
  33. In the Object Inspector, click the Properties tab
  34. To execute the application, press F9
  35. Click the buttons to perform some operations. Here are examples:
    Elementary Algebra
    Elementary Algebra
    Elementary Algebra
    Elementary Algebra
    Elementary Algebra
    Elementary Algebra
  36. Click the Close button to close the form and return to your programming environment

Putting all Buttons Up

Normally, in a mutual exclusive group, if the user clicks a speed button that is already down, nothing would happen. If you want, when the user clicks a button that is already down, you can bring it up so that all buttons become up. To support this feature, the TSpeedButton class is equipped with a Boolean property named AllowAllUp:

__property bool AllowAllUp = {read=FAllowAllUp,write=SetAllowAllUp};

The default value of this property is False. If you set this property to True, if the user clicks a button that is already down, it would be raised and the buttons would keep their up-state.

The Flatness of Buttons

By default, a speed button appears as a normal rectangular command button. If you want to use a visual aesthetic appearance, you can make it flat. This characteristic is controlled by the Boolean Flat property of the TSpeedButton class:

__property bool Flat = {read=FFlat,write=SetFlat};

The default value of this property is False. If you set this property to True, the button appears at the same level with its container (the form or else). When the mouse is positioned on the button, the borders appear.

Practical LearningPractical Learning: Setting Buttons Flat

--- The following exercise is optional and has no effect on the application ---

  1. On the form, click the Level 1 button
  2. Press and hold Shift
  3. Click the Level 2 button
  4. Click the Level 3 button
  5. Click the Level 4 button
  6. Release Shift
  7. In the Object Inspector, click the check box of Flat to make it True
  8. On the form, click the Addition button
  9. Press and hold Shift
  10. Click the Subtraction button
  11. Click the Multiplication button
  12. Click the Division button
  13. Release Shift
  14. In the Object Inspector, click the check box of Flat to make it True
  15. Press F9 to test the application
  16. Continuously position the mouse on the top speed buttons
  17. Close the form and return to your programming environment
 
 
 

Home Copyright © 2010-2011 FunctionX, Inc. Next