Object Orientation

Understanding of OOP (Object Oriented Programming) is fundamental in being successful with the Flex framework and being able to get the most out of it. People without a computer science-related (or similar) background may not know much of the fundamental concepts that comprise OOP and how to apply them correctly, so here is a quick piece to help you out...

First, object oriented programming is a programming paradigm where your code is organized into logical objects, and each object has properties and methods. Each object contains similar and/or related functionality, and is organized into classes that logically represent and logically organize it's functionality.

For Example:
Let's say that we have a class "Automobile". This class would contain the information and functions necessary for our application to use the automobile class. We could have a numeric property for the number of wheels, the speed, and the direction (degrees on a compass). This class would also contain methods that control the actions of the Automobile object: accellerate, decellerate(break), turn, start engine, stop engine, etc... Our class would look something like this...

public class Automobile
{ 
	public var speed : Number;
	public var direction : Number;
	public var numWheels : Number;
	
	public function Automobile() 
	{ /* constructor */ } 
	
	public function accellerate() : void 
	{ /* speed up the automobile */  }
	
	public function decellerate() : void 
	{ /* slow down the automobile */  }
	
	public function turn( direction : Number ) : void 
	{ /* turn the automobile */  }
	
	public function startEngine() : void 
	{ /* start the automobile engine */  }
	
	public function stopEngine() : void 
	{ /* stop the automobile engine */  }
}

Ok, now that we have a brief explanation of what object oriented programming is, we can get into some more aspects of OOP: inheritance and interfaces.

Inheritance is a way to form new objects based on existing objects. When a class inherits from a base class, the new class can utilize public and protected properties and methods from the base class. Inheritance can be used to create different objects that utilize functions within the base class, so that the child classes all utilize the same code base. Inheritance can be used to extend the functionality of existing objects, and inheritance can also be used to override and/ or change functionality from the base class.

In Actionscript 3, you can access the parent class of your class by using the "super" keyword. For instance, calling the constructor of the parent class would use "super()", where accessing a method of the parent class would use something like: "super.myMethodName()". If a property of the parent class is created with public or protected access, you can access that property in the child class directly by the property name (you would use this.propertyName, not super.propertyName).

Now, Lets take our automobile example and apply it to inheritance. We already have a base Automobile class that covers the basic functionality. We can create child classes that extend the functionality of the automobile.

public class SportsCar extends Automobile
{
	public function SportsCar()
	{
		super();
	}
	
	override public function accellerate():void
	{ 
		/* we can override the accellerate function 
		     so that it accellerates faster than the base
		     Automobile */ 
	}
}

public class Truck extends Automobile
{
	public function Truck()
	{
		super();
	}
	
	public function tow() : void
	{
		/* we can add a tow function that
		   allows the Automobile class to tow
		   items. */ 
	}	
}

These classes extend the base functionality of the Automobile class, and therefore are instances of the Automobile class. If we have a function outside of the Automobile class, which takes an automobile as the parameter, both a SportsCar and Truck will work since they are both Automobiles. We could have a function such as the following: If we pass in a Truck Instance, and a SportsCar instance, both will work, and each will use the functionality of their specific class instead of the base Automobile class.

public function race( auto1 : Automobile, auto2 : Automobile ) : void
{ 
	auto1.accellearate();
	auto2.accellearate();
}

I'll get into some more fine-grain details about inheritance later in this post... now, lets move on to interfaces...

Interfaces are slightly different than inheritance. An interface is a set of "rules" which an object must adhere to. The "rules" are actually method signatures and variable instances that your class (which implements the interface) must implement. When we define an interface, we define method signatures that are required for classes that implement the interface. There is no actual code in an interface; it simply defines methods that must exist within your class. Your class that implements the interface must implement the code for the actual function. If you have multiple classes that implement an interface, those classes must have the same functions (only the ones required to implement the interface), but that is where the similarities of the two classes may stop. They could have completely different logic and properties withiin them... this is where inheritance and interfaces differ. Two objects that inherit from the same base class have a lot in common (properties and methods): two objects that implement the same interface only have those interface method signatures in common.

Let's now make an Automobile Interface that defines the functions required to create an IAutomobile object (note the "I" stands for "interface"):

public interface IAutomobile
{
	function accellerate() : void;
	function decellerate() : void;
	function turn( direction : Number ) : void;
}

We can use the IAutomobile interface to create objects (classes) that behave as Automobile objects. These classes do not necessarily inherit from each other and do not necessarily share any common properties.

public class Car implements IAutomobile
{
	private var direction:Number;
	private var speed:Number;
	
	public function turn(direction:Number):void
	{
		this.direction = direction;
	}
	
	public function decellerate():void
	{
		this.speed++;
	}
	
	public function accellerate():void
	{
		this.speed--;
	}
}

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas implements="IAutomobile"
	xmlns:mx="http://www.adobe.com/2006/mxml">	
	<mx:Script>
		<![CDATA[

			private var direction:Number;
			private var speed:Number;
					
			public function turn(direction:Number):void
			{
				this.direction = direction;
			}
			
			public function decellerate():void
			{
				this.speed++;
			}
			
			public function accellerate():void
			{
				this.speed--;
			}
		]]>
	</mx:Script>
</mx:Canvas>

The previous two components both implement the IAutomobile interface, but have nothing else in common. One is simply a class that implements the interface, the other is a mxml component that implements the interface. The mxml component example extends the mx:Canvas component (the same thing could be done by creating an AS class that extends mx.containers.Canvas). Now, lets look at a function similar to the "race" function from earlier...

public function race( auto1 : IAutomobile, auto2 : IAutomobile ) : void
{ 
	auto1.accellearate();
	auto2.accellearate();
}

This example will work with either object that I have created because both objects implement the IAutomobile interface. The do not rely upon functions in the class hierarchy, just those that were implemented for this interface. You can also use multiple interfaces on classes that you create. Implementing multiple interfaces basically means that you are adding more required method signatures to your class, and you will have to implement these methods to satisfy each interface. On the other hand, you cannot inherit from multiple classes. Some programming languages allow for multiple inheritance... ActionScript 3 does not support multiple inheritance (so i'll stop there).

OK... enough of this rambling... What does this have to do with Flex?
Inheritance and interfaces are used extensively in AS3 to create the flex framework. Just look at the flex documentaiton for the mx:Canvas component, and you can see inheritance in action.

Canvas Container UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object

All flex framework components that are rendered to the screen extend from the UIComponent class. All combo boxes and lists implement the IList interface, an AbstractService, DataSerice or EventDispatcher object implements the IEventDispatcher Interface. You may be using these concepts every day, but weren't aware of it, and how you can use it to your own benefit. Inheritance seems easier to take advanatage of at first... Lets say that you want to create several objects, all of which will have identical functions and variables. It is easy to see that you can create a base class that encapsulates all of the common functionality. You can then create a sub-classes that implement the differing functionality for each class.

When putting these concepts into real-world Flex applications you'll need to get familiar with the following keywords:

extends
This is used when defining a child class from a parent class.

public class A extends public class B 

implements
This is used when implementing an interface.

public class MyClass implements MyInterface 

final
Classes and methods implented with "final" cannot be overridden.

final function myFunction() : void

static
This is used when creating variables or functions in a class that are specific to the class, not the instance. Static properties and methods do not require variable instantiation to be executed.

public static function myStaticFunction(): void 
//to use it call it directly from classMyClass.myStaticFunction()

internal
This is used when creating a method or property that can be accessed by any object within the same package (namespace)

internal var foo : String;

override
This is used when creating a function that overrides a function within a parent class.

override public function myFunction() : void 

private
This is used when creating methods or properties that are only availaibe to the class where it is defined. A private variable cannot be accessed by outside classes or from descendant classes.

private var myPrivateValue : String;

protected
This is used when creating methods or properties that are only availaibe to the class where it is defined and descendant classes. A protected variable cannot be accessed by outside classes.

protected var myProtectedValue : String;

public
This is used when creating properties and methods that are available to any class.

public var myPublicValue : String;

Feel free to contact me with any questions/comments at andrew.trice[ at ]cynergysystems.com