Building a Table Class in ActionScript 2.0
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
For a recent project, I needed to display some tabular HTML data in a Flash application. Unfortunately, Flash doesn’t handle that task very well. After all, you can only ask so much of the text field’s HTML capabilities. I could have purchased an application, or I might have gotten by with a component, but I wanted to keep things small and simple. I thought that this would be an excellent opportunity to build a custom class that I’ll likely reuse and improve over time. If you’re interested in presenting tabular data in Flash (or you’re just looking for some help in getting started with the object-oriented side of ActionScript), this article is for you.
To get ActionScript to display HTML-based table data, we’re going to need the following:
- Flash’s text fields
- Flash’s drawing API
- XPath for ActionScript
Before we get started, the next section reviews some basic tenets of object-oriented programming (OOP) that you need to understand. If you’re already familiar with OOP, feel free to move ahead to the code itself.
The Basics
As a Flash designer or developer, you’re probably aware that you’re using built-in Flash objects all the time. Consider the MovieClip—a perfect example of an object. Try this. Open a new Flash document, paste the following code into the ActionScript window, and then test the movie (Control > Test Movie):
var test_mc:MovieClip = this.createEmptyMovieClip ("test", this.getNextHighestDepth());
trace(test_mc + " is a " + typeof test_mc);
This little snippet creates a variable that is of the type MovieClip and that is named test_mc. (The MovieClip itself is named test.) The this keyword refers to the root clip and is where the clip is created, which is also represented in your output window as _level0. The createEmptyMovieClip is a method that belongs to the MovieClip class, and since this, the root clip, is itself a MovieClip, we can use the method. Now we have a new object, one that is a MovieClip and that is named test_mc.
We’re going to create a class to generate table objects. The class is the "blueprint" for the table objects. We’ll construct it with variables, also known as properties, which maintain an object’s "state." For example, we can take our test_mc MovieClip and use dot syntax to append to it the property _x, positioning mc at the 200th point along the x axis:
test_mc._x = 200;
Similarly, we use functions, also known as methods, to perform an action on a particular object. Returning to our example test_mc clip, let’s use the createEmptyMovieClip method to create a new MovieClip that’s attached to our test_mc clip:
test_mc.createEmptyMovieClip("test2_mc", 2);
As you can see, objects are already built into Flash, so beginning to build our own objects isn’t such a leap. It just requires a little planning and a little practice. When we’re finished, the code to create the table object from the class will look like this:
var tb:TableViewer = new TableViewer(rootClip,rootNode);
It’s much like creating a new MovieClip. Now let’s look at how to write the code.