Issue 49 * May 23, 2008

Quick Tip: Easy Toggle Buttons
A fast and easy technique for column headings and toolbars

by Bill Marriott

If you've used Revolution much, you might know that you can drag out several radio buttons and group them to create an "exclusive" array of options. In that group, no two buttons are ever selected at the same time. A familiar example is the Page Setup dialog, where you'll find this:

That's quite handy for the conventional application of radio buttons. But have you ever thought of other situations where only one button has to be selected at a time? One that comes to mind is toolbar buttons. You can use the paint tool or the fill tool, but not both at once. Another is column headings. Typically, you cannot sort on two columns simultaneously. Here's an example from Windows Explorer:

As you can see, the arrow in the "Name" heading tells the user the folder is currently being sorted by the file name. The arrow would moves to other columns as they are clicked, and only one column can be active at a time.

You can spend a lot of time trying to recreate a similar effect in your stacks, but here's a very easy way to accomplish it with just a couple clicks in Revolution.

  1. Drag out a radio button. Call it "Name." Yes, I know we don't want "radio" buttons at the top of our columns, but bear with me!
  2. From the message box, type:

    set the family of btn "Name" to 1

Now we need to do something about how it looks.

  1. In the General section, set the button to "Opaque"
  2. Switch to the "Icons & Border" section.
  3. Turn on the Border (showBorder) property. A rectangle appears .
  4. Set the Icon of the button to 2. This appears to be an unused ID. It has the effect of removing the round, "radio button" element and also shifts the text to the left.
  5. for the Hilite Icon (hiliteIcon) use the value 200276. This is an upward-pointing arrow, part of the "Standard Icons" set included with Revolution.

Now that we've set the necessary properties for the base button, duplicate it a few times, arrange them in a row, and give them unique names. As you click on them, you'll see that they behave exactly like the columns in Windows Explorer and elsewhere.

The same technique can be used for toggle buttons elsewhere. Whenever you specify an icon for a radio button, the icons are used instead of the typical radio button element. The label can be hidden depending on your needs.

Another nice element of this tip is using the "family" property of a control to group it, instead of an actual group. This is handy when you don't want or need the other behaviors of a group, and want to be able to manipulate elements without having to enable "Select Grouped" or use the "Edit Group" command.

Main Menu What's New