This tutorial lesson is part of a continuing series of lessons dedicated to object-oriented programming (OOP) with ActionScript.

There are several ways to create and launch programs written in the ActionScript programming language. Many of the lessons in this series will use Adobe Flex as the launch pad for ActionScript programs. An earlier lesson titled The Default Application Container provided information on how to get started programming with Adobe's Flex Builder 3. (See Baldwin's Flex programming website .) You should read that lesson before embarking on the lessons in this series.

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.

I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com .

If you have ever assembled a child's playscape in your back yard, this scenario should sound familiar to you.

When you opened the large boxes containing the playscape, hundreds of objects spilled onto the ground. Those objects may have consisted of braces, chains, swing seats, slides, screws, nuts, bolts, washers, climbing ropes, ladder rungs, and other assorted objects.

I will refer to the kind of object that I have described in the above list as atomic objects. What I mean by that is that they can't be easily subdivided into smaller objects.

If you were lucky, some of the objects in the box may not have been atomic objects. Instead they may have been pre-assembled arrangements of atomic objects such as a climbing net composed of individual ropes tied together to form a net.

Your job was to assemble those hundreds of atomic and non-atomic objects into a final object which you proudly referred to as "The Playscape."

It has been said that a successful object-oriented program consists of a bunch of cooperating software objects working together to achieve a specified behavior. The overall behavior of the program is the combination of behaviors of the individual objects. For example, some objects may acquire input data, other objects may compute and produce output data, while other objects may display the output data.

It could also be said that a playscape consists of a bunch of hardware objects working together to achieve a specified behavior. The overall behavior of the playscape is the combination of behaviors of the individual objects. For example, the behavior of some of the braces is to stand strong and not bend or break, while the behavior of a swing is to be flexible and move in a prescribed way.

One of the tasks of an object-oriented programmer is to assemble software objects into a model that often represents something that exists in the real world. For a very visual example, you might be asked to create an advertising web page showing an animated software model of the playscape that you assembled in your back yard. With the playscape, you were simply required to assemble the existing hardware objects. However, in the object-oriented programming world, you must do more than just assemble objects.

Getting back to the playscape, every one of the objects for the playscape was manufactured before being shipped to you. Even before that, each object was designed by someone and a set of manufacturing drawings was probably created so that the object could be mass produced in a high-volume manufacturing facility.

In OOP, there is a direct analogy to the manufacturing drawings of the hardware world. We call it a class . A class documents the specifications for the construction of a particular type of software object.

As an object-oriented programmer, you will typically have access to a large library of existing classes from which you can construct different types of software objects, such as buttons, sliders, etc. In addition, you will often need to design and define new classes from which you can construct new types of objects.

Flex/MXML can be used to create simple custom components but ActionScript is often needed to cause those components to have more interesting behavior.

Sometimes you can embed or include non-OO ActionScript code in a Flex MXML file to achieve the desired behavior. Often, however, you will need to create your new component almost entirely in ActionScript. You will need to understand OOP in order to do that.

An understanding of OOP is particularly important if you need to create a new component from scratch or create a new component by modifying the appearance and/or behavior of a component for which a class already exists.

I will provide an example of a new custom component that extends an existing component later in this lesson.

Therefore, if you plan to create rich internet applications, games, or iPhone applications using ActionScript, you will often need to understand OOP in order to create custom components that your clients find interesting.

Because ActionScript does not enforce a requirement for your code to be object oriented (OO) , it is possible to learn to use major aspects of ActionScript without ever learning to use the object-oriented features. This approach simply requires you to learn how to use the rudimentary aspects of the language.

The real challenge to becoming an ActionScript programmer is not simply to learn the rudimentary aspects of the language. The real challenge lies in:

The first of these challenges can be met on a gradual basis. In other words, it is not necessary to memorize the entire class library to produce useful OO programs. However, it is necessary to learn how to use the library documentation to find what you need.

The remaining two challenges cannot easily be met on a gradual basis. Many aspects of OOP must be understood before a programmer can successfully write OO programs

Many "application frameworks" are written according to the OOP paradigm. Important among these is Adobe's Flex, which can be used to simplify the development of the graphical user interface (GUI) portions of ActionScript programs.

Flex makes it possible to use uncomplicated XML syntax to access and use the ActionScript class library. Adobe's Flash Builder 4 makes the process even more straightforward by providing a largely drag-and-drop visual development environment for creating the GUI portion of ActionScript programs.

All of the components that are available in Flex are objects created from classes in the ActionScript library. Those classes have names like Button , RadioButton , and NumericStepper (see Figure 2) .

Any object-oriented language must support three very important concepts:

We use these three concepts extensively as we attempt to model the real-world problems that we are trying to solve with our object-oriented programs. I will provide brief descriptions of these concepts in the remainder of this lesson and explain them in detail in future lessons.

In particular, most of us know how to use the steering mechanism of an automobile without having any idea whatsoever how it is implemented. All most of us care about is the interface , which we often refer to as a steering wheel. We know that if we turn the steering wheel clockwise, the car will turn to the right, and if we turn it counterclockwise, the car will turn to the left.

Most of us don't know, and don't really care, how the steering mechanism is actually implemented "under the hood." In fact, there are probably a number of different implementations for various brands and models of automobiles. Regardless of the brand and model, however, the human interface is pretty much the same. Clockwise turns to the right, counterclockwise turns to the left.

As in the steering mechanism for a car, a common approach in OOP is to "hide the implementation" and "expose the interface" through encapsulation.

One of the major arguments in favor of OOP is that it provides a formal mechanism that encourages the reuse of existing programming elements. One of the mottos of OOP is "reuse, don't reinvent."

As an operator of the automobile, I simply select Drive (meaning go forward) . Depending on various conditions at runtime , the automatic transmission system decides which version of the Drive function to use in every specific situation. The specific version of the function that is used is based on the current conditions (speed, incline, etc.) . This is somewhat analogous to what we will refer to in a subsequent tutorial lesson as runtime polymorphism .

The code beginning with the word public in Listing 1 is the definition of a very simple class named MyClass . I don't expect this code to mean much to you at this point. Suffice it to say that an object of this class is a new GUI component consisting of a Button object, a RadioButton object, and a NumericStepper object, all contained in a VBox object.

package Classes{
  import mx.containers.VBox;
  import mx.controls.Button;
  import mx.controls.RadioButton;
  import mx.controls.NumericStepper;
  
  public class MyClass extends VBox{
    //Constructor follows
    public function MyClass(){
      addChild(new Button());
      addChild(new RadioButton());
      addChild(new NumericStepper());
      setStyle("backgroundColor",0xFFFF00);
    }//end constructor
  }//end class
}//end package

Two instances (objects) of the class named MyClass

Two objects of the new class named MyClass are shown in Figure 2. You should be able to spot the Button object (rectangular) , the RadioButton object (circular) , and the NumericStepper object in each of the two MyClass objects.

Table 4

Figure 2 . Two objects of the class named MyClass.

<?xml version="1.0" encoding="utf-8"?>

<!--SimpleClass01 -->

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:classes="Classes.*">

    <classes:MyClass />
    <classes:MyClass />
    
</mx:Application>

One of the standard Flex components is named TextArea . This component is an object of the ActionScript class having the same name.

An object of the class named NumericTextAreaA

Figure 3 shows the visual manifestation of an object of this class with two lines of numeric and space characters having been entered. (The entry of additional lines of text causes scroll bars to automatically appear.)

Table 6

Figure 3 . An object of the class named NumericTextAreaA.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:cc="CustomClasses.*">
    
    <cc:NumericTextAreaA/>

</mx:Application>

/*This is a custom component. This class extends the
TextArea class.  It recognizes only the following 
characters:
0, 1, 2, 3, 4, 5, 6, 7, 8,9
space
backspace
return key

The next numeric character is appended onto the end of
the string in the text area regardless of the current
position of the cursor.

The backspace key deletes characters from the end of the
string, one character at a time.
*********************************************************/

package CustomClasses{
    import mx.controls.TextArea;
    import mx.controls.Alert;
    import flash.events.*

    public class NumericTextAreaA extends TextArea{
        private var theText:String = "";
        
        public function NumericTextAreaA(){
            this.addEventListener("keyUp",processKey);
        }//end constructor

        private function processKey(
                                event:KeyboardEvent):void{
            if(event.charCode==48){
                theText+="0";
            }else if(event.charCode==49){
                theText+="1";
            }else if(event.charCode==50){
                theText+="2";
            }else if(event.charCode==51){
                theText+="3";
            }else if(event.charCode==52){
                theText+="4";
            }else if(event.charCode==53){
                theText+="5";
            }else if(event.charCode==54){
                theText+="6";
            }else if(event.charCode==55){
                theText+="7";
            }else if(event.charCode==56){
                theText+="8";
            }else if(event.charCode==57){
                theText+="9";
            }else if(event.charCode==8){//backspace
                theText=
                       theText.substr(0,theText.length-1);
            }else if(event.charCode==32){//space
                theText+=" ";
            }else if(event.charCode==13){//return key
                theText+="\n";
            }//end else

            this.text=theText;
        }//end processKey method
    }//end class
}//end package

Module name: What is OOP and Why Should I Care?

Files: ActionScript0104.htm, ActionScriptXhtml0104.htm, ActionScript0104.cnxml

-end-