FirePower X - TwwSwitch Component using FireMonkey

This blog gives you a walkthrough of some of the powerful capabilities of the FirePower TwwSwitch which are not contained in the native FireMonkey switch. The switch is a great component to bring a more intuitive look and feel to your applications. In particular we will detail how you can achieve the following.

Customizing the switch images using a TImageList
Grouping switches together to function as a single radio group
Putting in your own switch into the FirePower grid (TwwDataGrid)

To see what our TwwSwitch does, check out our FirePower main demo and click on “Switches and Images Walkthrough.” This will show you the different images used in our demo which you are free to use but you can also change the images by uploading your own. Within this demo, you will see it used in a datagrid as well as well as a group of switches functioning together.

Adding a TwwSwitch and a TImageList To add a switch, drag and drop from the palette a TwwSwitch. Once this is added into your project, you need to add a TImageList from the palette. This TImageList allows you to link the images that you want to your TwwSwitch. Right-click on the TImageList and select which file you want to add.

Next, we need to link our images to the TwwSwitch. In order to do this, click on the Switch and go to the object inspector. Expand “images,” click on ImageList and select your TImageList for whatever name you may have given it. For this example, I will select the name that ends in “switchimages.”
Under “Images” within the object inspector, click on ImagesOn and select which image you would like to represent when you click the switch on and then do this for ImagesOff.
You now now visually see when you click on the image it will toggle between the On and Off images. It does not yet perform any action but you can customize that by clicking on the switch and changing the properties and events.
Press f9, run the program and see how the switch works.

Grouping Names

The FirePower switch allows you to group switches so that when one switch is turned on, the others turn off. This effectively allows a collection of switches to operate as a radio group. When they are under the same group, if you click on one switch, the other switches are automatically turned off and the new switch that you click turns on. This can be very important if you want to have multiple options but only one answer.
Add more TwwSwitches to your platform, in this case, I will add 4 more TwwSwitches for a total of 5 (keeping the first one we created). Change each of the switches group names, click on the switch and find it under the object inspector, to the same one. I will change them all to the name “test.”
Now that they are under the same name, only one option can be turned on. Press f9 to run the program and see what it does.

Adding Switches to a Datagrid

In order to do this for demo purposes, we are going to start out by adding one “TFDMemTable’s” from the Pallete. Normally you will want to use a real database connection so that your data is persistent, meaning changes can be edited and saved. You can do this by using TFDTable and TFDConnection, but for our demo we are going to simplify this part of the setup by using TFDMemTable. We will also then right-click the TFDMemTable, and then add a bind-source, which will allow us to connect the data to the data grid.
Load the dataset into the TFDMemTable by right-clicking on it and selecting “load from file.” I will load into my customer database. Click on the Datagrid, select datasource, and click on the bind source that you have created.
Right-Click on your datagrid, go to edit columns, and select which column you would like to have a TwwSwitch for. In my case, I will select on the buyer column and go to custom control, under the object inspector, clicking on TwwSwitch. For my example, I created a new TwwSwitch following the steps from “Adding a TwwSwitch and a TImageList.”
In my example, I want the button to represent “yes” or “no.” I do this by selecting the TwwSwitch and setting the ValueChecked to say “yes”, and the ValueUnchecked to say “no.”
Now I press f9 and run the program to see how I integrated a switch to my Datagrid.

Finally I want to mention a great web site to gain access to a wealth of pre-made images that you can use for your own switches. We purchased our images from www.vectorstock.com

The id of the ones used in the demo are the following. If you need to use these, then you should purchase your own copy.