Driscoll Web Development Blog

Get information, tools, news, tips, and more from the expert web developers at Driscoll Web Development.


Friday, January 16, 2009

Creating a Read-Only Numeric Stepper Component in Flash/Actionscript 2.0

While working on a project recently I spent some time getting to know the Numeric Stepper component. Anyone who has worked with the component most likely knows about its most obvious shortcoming: the text field within the component is read/write! Of course, the actual value associated with the component only changes in response to events fired by the Mouse or Key (up/down arrow) objects, but nonetheless our client wasn't happy with the fact that a user could type in the text field.

So, I set about trying to make the text field read only. Based on my research I gathered quickly that this has been attempted before with varying results. One of the key issues that makes the proposition of "tweaking" a component difficult is the fact that a component class cannot be subclassed; otherwise, it would be fairly straightforward to create a new class that inherits from NumericStepper and simply add the necessary properties and methods to support read/write and read only modes for instances derived from the subclass.

With subclassing out of the question most of the developers' blogs I encountered suggested overriding methods of the mx.core.mx_internal namespace (from which the enabled property of the NumericStepper.inputField object is derived), however that's a bit cumbersome and a complex solution to what seems to be a relatively straight-forward problem.

Luckily for me, I've been playing around a bit with coding ActionScript Communication scripts, which are (more or less) ActionScript 1.0 scripts. In these scripts, the "easy" way to add properties and methods to a built-in class is to use the prototype object (i.e.: ClassName.prototype.someNewFunction = function(){...}). With that concept in mind I tried to see if I could use the prototype object to extend the capabilities of my NumericStepper component... and it worked! What follows is the code that allows you to do this for yourself:

1. Create a new Flash document.
2. Open the Components panel and drag two instances of the NumericStepper component onto the stage. Give the two steppers instance names of "myStepper1" and "myStepper2", respectively.
3. Add the following code to the Main Timeline of your document:

So, what does this code do, exactly? Well, the draw() method overrides the draw() method of the NumericStepper class. The only "new" functionality we've added is within the if-block; we test the instance's editable property, and if that property has a value of "false" then the component's text field is disabled. Otherwise, the text field is enabled (which is the default). All of the code that follows the if-block is the same as the NumericStepper's native draw() method.

The next two functions, setEditStatus and getEditStatus are simply getter/setter functions for the editable property.

Finally, I register the editable property with the component using the AS1-style addProperty method.

That's all there is to it! Now, to see this new property in action simply create a new layer on your main timeline and add the following code:

myStepper1.editable = true;
myStepper2.editable = false;

Go ahead and test out your movie. One instance (myStepper1) should have an editable text field, while the other (myStepper2) should not.

Happy coding!

(Download the source script for the extended NumericStepper here: http://blog.driscollwebdev.com/NumericStepperExtension.as)

Labels: , , ,


Post a Comment

Links to this post:

Create a Link

<< Home