Issue 87 March 4 2010

The Case for a Custom Combo Box
Implementing a custom interface element is a fun activity in Rev

By Jerry Daniels

Status Quo

The standard Revolution combo box is a nice enough looking fellow, but he has several behaviors that offer opportunities for improvement:

  • Upon meeting him, a user cannot be sure if he has menu items.
  • He tends to collect detritus from users of your stacks.
  • His menu cannot be easily edited by users.
  • He's a confusing combination of a menu and a field. Neither one nor the other.
  • He knows more than he's telling. Couldn't we make him a bit more forthcoming?

Above is a combo with no menu items. He looks the same if he's well-stocked with menu choices. You must click him to discover his hidden treasures.

Have you tried setting the menuhistory, text or label of a combo box from your code? You tend to wind your way down a curving road and unlike Mick Jagger's anthem, you may not always get what you want. When you click him and he has data in his entry field, the entire text becomes selected. The position of this text cannot be altered via setting margins, either. I think his text is "too high." That's a matter of taste, of course, but nonetheless, it's not a look I would choose.

After entering data and tabbing out of him, he collects whatever was in his entry field and adds it to his menu. Let's hope your users are better typists than I.

Anything you type into the combo box tends to stay around. Misspellings are not something you want your users to carry around in the stack you build for them. How can a user get rid of this useless data? This necessitates an admin interface. That means more work for the stack developer and the stack user.

Fortunately, the combo box knows what's in his menu. Also fortunately, the entire interface for Rev is user programmable. Why don't we make him offer up a match for what your user is typing? Automatically populating fields is a wonderful convenience you can see in action if you are a Safari user. It remembers your name, address, phone number and when you fill out a web form, eliminates tons of typing. Let's make the combo box more helpful!

A Custom Combo box Answer

My partner and I were engaged by a client recently who wanted a simple way to manage menu data without having to create an admin module for the stack he was building in Revolution. He wanted his users to be able to add choices to many of his menus, and also delete them.

This client also had a crushing deadline. Knowing how admin modules can grow almost as exponentially as reports in a business system, I began to focus my thoughts on our friend the combo box. He had such potential!

One other thing: this stack needed to also deploy on the web using the Revolution web plugin. In other words, it had to run as a revlet, also.

Our solution: a group with all the parts it needed to behave in a self-administrating manner.

When you first meet our new friend the custom combo, he lets you know immediately if he has menu items. His drop down button will be disabled until he has menu items for you. Nice fellow.

As a stack developer, since custom combo box's entry field is an actual field, you can totally control his margins—and anything else you like. He also has custom properties you can set. I patterned his syntax after Trevor DeVore's excellent work on the Datagrid for Revolution:

put the cbText of grp "city" into tCityName

put the cbMenu of grp "city" into tCities 

OK, so how does the new guy behave when you use him?

When you are in his entry field, you can type a down or up arrow to see his menu. If you like to click, you can click his drop button with its down arrow. As you would expect, if you already have data in the field, when the menu drops, the current data in entry field should be selected in the menu, right? Right.

If you move your pointer over his menu, custom combo box will show you a delete button you can click to get rid of any of his menu items. He will also grant you a boon: you can just as easily type the delete or backspace key to delete one of his menu choices.

His arrow keys work almost like his standard cousin in that you can navigate the menu up and down using the up/down arrows. HOWEVER, you can also use the left and right arrows to accept the selection and move on to the next field or custom combo group. More on the technical details of this in a moment.

Since this new fellow has to work in revlets, his menu cannot be a separate, hovering stack, but rather a field with a nice graphic effects drop shadow. This means when he gets too close to the bottom of a stack, he displays his menu above his entry field, not below.

Lastly, in terms of behavior, he is clairvoyant. He will anticipate what it is you're trying to type and offer up the remainder of the string you're typing selected so you can soldier on if it's not what you'd like or simple type tab to accept it and move on to the next field or custom combo.

Internal Architecture

Let's say you're intrigued enough with our new friend's behavior to want to meet his family and friends.

Without walking through all the code—which you can see for yourself—I'd like to show you custom combo's neatest trick. He's a murderer, you see. Didn't know that? Oh yes.

Code Tricks

Every time you click his drop box, he copies a menu field and delete image from his sub group "combomaster" and uses them to display menu items that he stores in his invisible field "menu storage". This makes absolutely certain that his menu will be like the Vedic deva Indra: above all the world. Or at least above all controls.

When the user takes any action that would force his menu to stop displaying, he ruthlessly deletes the field and image he only moments ago created via copy. All done with messages locked, so there are no witnesses. He's a killer. He's even got a handler called "killComboMenu".

click image to zoom

Shockingly delightful, I'd say. Such behavior.

click image to zoom

How do you get custom combo to become part of the tabbing sequence? Via it's custom properties, our buddy knows who is the next control to receive focus. Also the previous, in the case of using shift+tab or left arrow (when the menu is down).

An Arrow Trick

While you're editing or entering text in a field, have you ever wanted to use the right or left arrow to move to the next or previous control? We devised a way for custom combo and any editable Rev field to do this. When you are using arrow to move your insertion point along the string you see in the field, when it gets to the end of its run, it then goes to the next field. Same goes for when the insertion point is moving toward the beginning of a string.

Here's a snapshot of the code that handles this:

click image to zoom

You can download the example stack I used here in this article and see a video of me using custom combo by using your web browser to go to this URL:

http://revmentor.com/tag/combobox

Thank you for your kind attention.

About the Author

Jerry Daniels is one half of Daniel & Mara, and creator of tText and tRev.

Main Menu

What's New

Crossgrade to Rev