Mouse wheel support in Flex

The problem

Just two of the text fields on your Flex window have to support the mouse wheel. The user turns the wheel, the numeric field in these fields is incremented or decremented

The solution

As per the Flex manual, there is a MouseEvent.MOUSE_WHEEL event, just listen to it. So far so good. On the creationComplete event adding the one liner:

systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel)

The onMouseWheel event handler gets the MouseEvent, but the problem is that we have more than one field that needs to support the wheel. Which one to increment? The currentTarget of the MouseEvent does not report which text field has the focus. The currentTarget contains a reference to SystemManager.

Fine, let’s see if the FocusManager can help:

public function onMouseWheel (evt:MouseEvent): void {

var compAtFocus: IFocusManagerComponent = focusManager.getFocus();
// no wheel support unless it’s a TextInput field
if (compAtFocus is TextInput){
var theValue:Number=Number(compAtFocus[“text”]);
theValue +=;

And it works fine, see for yourself (right click to see the source code):

In this sample application I’ve created two text inputs that have to support the wheel, and one text area that should not. Hence, first thing I do in the code above is checking the type of the object that has the focus. If this was a text input, get its text property and add the value of delta that comes with event. This delta is default increment that you can configure for your mouse outside of the application. For example, in Windows, go to Control Panel and set the Mouse wheel increment to your liking. Just keep in mind, that support of the mouse wheel depends on the mouse driver that you use, and if something does not work, do not blame Flex.

If you do not want to link the increment/decrement amount to your  mouse system settings, just do not use the delta property that comes with the MouseEvent and add/subtract any arbitrary value that meets your application’s needs.

The homework

1. Modify the above code to ensure that the numbers in your text field do not go to the negative territory.
2. Modify the above code so it’ll support just one of the TextInput boxes.

Yakov Fain