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.

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

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:

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

• Design the form as follows:
  
  

  Control Alignment Caption/Text Color Font Name TPanel         pnlLevel TSpeedButton         btnLevel1 TSpeedButton         btnLevel2 TSpeedButton         btnLevel3 TSpeedButton         btnLevel4 TPanel         pnlOperation TSpeedButton         btnAddition TSpeedButton         btnSubtraction TSpeedButton         btnMultiplication TSpeedButton         btnDivision TLabel taRightJustify 00 clBlue Font: Tahoma Font style: Bold Size:   78 Color: Blue lblOperand1 TLabel   + clBlue Font: Tahoma Font style: Bold Size:   78 Color: Blue lblOperation TLabel taRightJustify 00 clBlue Font: Tahoma Font style: Bold Size:   78 Color: Blue lblOperand2 TLabel    __________          TButton   Close    Font: Tiffany Lt BT (*) Size:   24 Font style: Demi Color: Black  btnClose TEdit taRightJustify 000 clMaroon Font: Tahoma Size:   78 Font style: Bold Color: Maroon edtResult TButton   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)

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.

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

   Control Caption/Text Color Font => On all speed buttons: Font: Tiffany Lt BT (*) Font style: Demi Size:   24 Name TPanel       pnlLevel TSpeedButton Level 1   Color: Navy btnLevel1 TSpeedButton Level 2   Color: Blue btnLevel2 TSpeedButton Level 3   Color: Red btnLevel3 TSpeedButton Level 4   Color: Teal btnLevel4 TPanel       pnlOperation TSpeedButton Addition   Color: Green btnAddition TSpeedButton Subtraction   Color: Purple btnSubtraction TSpeedButton Multiplication   Color: Teal btnMultiplication 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;
   }
   //---------------------------------------------------------------------------

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.

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

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.

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

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.

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:

36. Click the Close button to close the form and return to your programming environment

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.

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.

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