You are on page 1of 26

Object Oriented Flex

An introduction to the Flex Framework and Object Oriented Development

By Andrew Trice Technical Lead, Cynergy Systems

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

What is Flex?

Adobe Flex is a rich Internet application framework built on top of the Flash platform.
Applications are built using MXML and ActionScript Applications are compiled into SWF (Flash) files

Why is Flex at CFUnited?


Why not?
Flex is an extremely powerful tool for building powerful & innovative web applications. It is only logical that Flex is discussed at CFUnited because Flex helps to enable next generation development capabilities. Flex can integrate VERY closely with ColdFusion to quickly and easily build powerful applications.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Why would you want to use Flex?

Rich Interface
The Adobe Flex framework provides an easy to use, and highly extensible toolset for creating rich, dynamic interfaces for your applications. There are many capable outof the box components, and each can be extended to provide enhanced functionality.

Engaging Applications
The Flex framework relies upon the Flash platform at runtime, and we all know that Flash was created for engaging experiences. Every component can be animated, manipulated, styled and skinned to create application interfaces that are unparalleled by most existing technologies.

Robust Drawing API


Not only does Flex enable skinning via images and precompiled Flash assets, you also have the capability to do runtime vector drawing.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

What well cover today:

What is object oriented programming How to use object oriented principles to build engaging applications

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

What is Object Oriented Development?

Object oriented development 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 its functionality. Object Oriented Development relies heavily on the principles of:
Encapsulation Abstraction Inheritance Polymorphism Reusability

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Q: What does OO have to do with Flex?

A: Everything!
The Flex framework is built on top of the ActionScript 3 language, which is 100% object oriented. Thus, the Flex framework is 100% object oriented. All Flex components derive from base classes, follow interfaces, and are fully extensible. The can be extended, properties can be overridden, etc Even better, the Flex framework is Open Source. You can examine the source and learn from it. You can see the internals of how the framework is built, how components extend from each other, and learn how to make the most out of the Object Oriented nature of the language.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Classes & Objects: The basis of it all Object Oriented Programming relies completely on the concepts of classes and objects.
A Class is an abstract definitions of a thing (an object). A class defines the properties and methods of an object. The class definition below describes a Car object. The car has a color, a model name, and functions for accelerating and braking.
package com.demo { public class Car { public var color : Number; public var model : String; public function accelerate() : void { //drive logic would go here }

public function brake() : void { //braking logic would go here } } }

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Classes & Objects: The basis of it all

Objects are instances of classes.


In the following code segment, we define a new object called myCar which is an instance of the Car class.
var myCar : Car = new Car();

Whether written in MXML or ActionScript, all Flex components are classes. At compile time, MXML is precompiled to ActionScript classes, which are then compiled into the swf file format. One thing to keep in mind in Flex & ActionScript 3: All objects inherit from the default Object class type.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Encapsulation

Encapsulation is the term that defines the logical grouping of properties & methods within a class. In the previous example, we defined a class Car, in which we defined all of the data and methods necessary for the Car class. Now, any time we refer to a car instance, that instance will always have the characteristics of a Car. You wouldnt have a method called walk for a Car instance, because cars logically do not walk. Proper encapsulation helps to ensure that your code is easily read and maintained. Adding/removing properties from a class instance should take place within the class definition, not spread throughout the codebase.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Encapsulation: continued
The Flex framework itself relies heavily upon the principle of encapsulation in the way that the framework is organized. User interface controls are contained in the controls directory, user interface containers are located in the containers directory/namespace, and so on. Similar functionality is organized together in a logical manner.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Abstraction

Abstraction refers to information hiding and object generalization. Abstraction allows you to hide all information that is not necessary to the object/action that you are currently manipulating. For example:
myCar.accelerate()
Does not need to know about color and model, so we dont see them. We still have acess if we need it. Since we dont need it, we dont see it, which leads to cleaner, code that is easier to maintain. In a subsequent code block, we could perform an operation on the car, involving the model name, in this instance, we dont need to know about the accelerate function, so it is hidden from us.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Abstraction: continued Within Flex, we use abstraction all the time, and we may not even be aware of it.
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="com.demo.view.*" width="100%" height="100%" > <mx:ApplicationControlBar id="appControlBar" top="0" left="0" right="0" cornerRadius="0" > <mx:Button label="Button 1" /> <mx:Button label="Button 2" /> </mx:ApplicationControlBar> <view:Favorites y="150" left="-5" /> </mx:Canvas>

The previous code block hides a lot of the details from the ApplicationControlBar, the Button instances, and the Favorites instances, but they are all available if we need them.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Inheritance

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. Inheritance can also be used to override and/or change functionality from the base class.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Inheritance through MXML

Classes can be extended using either MXML markup or ActionScript.


When extending a class in MXML, you use the base class as the root element of your MXML component.
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"> <mx:Button x="10" y="10" label="Button"/> <mx:Button x="10" y="40" label="Button"/> <mx:CheckBox x="10" y="70" label="Checkbox"/> <mx:ColorPicker x="10" y="96"/> </mx:Canvas>

The code segment above describes a new class that extends from Canvas, and includes two buttons, a checkbox, and a ColorPicker component.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Inheritance though ActionScript When extending a class in ActionScript, you create the new class and extend the base class using the extends keyword.
package com.demo { import mx.containers.Canvas; public class InheritanceExample extends Canvas { public var myCustomProperty : String; public function InheritanceExample() { super(); myCustomProperty = "abc123"; } } }

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Inheritace Scope When using inheritance, it is also extremely important to understand scope of properties and methods. In Flex & ActionScript 3, there are 3 keywords to describe variable and method scope:
Public
Public properties and methods are visible to all other classes.
public var foo : String;

Private
Private properties and methods are only accessible by the class instance. They are not accessible by other classes or components, and they are not accessible by subclasses. All classes that extend the base class will NOT be able to access protected methods.
private var foo : String;

Protected
Protected properties and methods are not accessible by other class instances, but they are accessible by subclasses. All classes that extend the base class will be able to access protected methods.
protected var foo : String;

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Polymorphism & Interfaces

Polymorphism is a technique that allows you to write generic classes so that they can be used consistently, regardless of the actual type of the classes. In Flex & ActionScript, polymorphism is achieved using Interfaces. An interface is a set of "rules" that an object must adhere to. The "rules" are actually method signatures and variable instances that your class (which implements the interface) must implement. Use of interfaces in Flex & ActionScript require use of the implements keyword.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

More on Interfaces

The following interface describes the methods required to fulfill the IAutomobile interface.
public interface IAutomobile { function accelerate() : void; function decelerate() : void; function turn( direction : Number ) : void; }

The implementation of that interface requires that all of the functions defined in the interface be implemented in the class that is actually implementing the interface.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Interfaces in Flex

Interfaces are extremely common in Flex development. If you look at the source code of the Flex framework, you will see them all over the place. Classes can implement multiple interfaces. The more interfaces that a class implements, the more function methods that class must contain in order to satisfy the specified interfaces.
The following code shows a class Button that extends from the core UIComponent class, and also implements multiple interfaces (from Button.as in the mx.controls namespace of the Flex source):
public class Button extends UIComponent implements IDataRenderer, IDropInListItemRenderer, IFocusManagerComponent, IListItemRenderer

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Interface MXML Implementation


Interfaces can be implemented in MXML class definitions:
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas implements="IAutomobile mlns: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 decelerate ():void { this.speed++; } public function accelerate ():void { this.speed--; } ]]> </mx:Script> </mx:Canvas>

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Interface ActionScript Implementation

Interfaces can also be implemented on ActionScript class definitions:


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

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Reusability

In general, object oriented development tends to lead to cleaner and more maintainable code. Inheritance and programming towards interfaces leads to more generic and more flexible code. Generic and flexible code can be extended to handle a variety of scenarios, well beyond the original intent of the component.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Static Methods & Variables

Another tool to keep in mind with object oriented Flex development is the static keyword.
public static var myStaticVariable : String = abc123

Static properties do not require a class instantiation to be used. You can access a static property or method directly from the class definition.
Alert.show( MyClass.myStaticVariable )
Rather than
Alert.show( new MyClass().myStaticVariable );

Since static properties and methods do not require class instatiation, they require less memory and are less resource intensive.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Getters and Setters

Getters and Setters are methods that mimic the signature of a property, but are actually programmatic methods. For Example:
Using a get/set method may look like a public property
myClass.myValue = 123;

In actuality, myValue is using the get/set functions


public function set myValue (value:Number):void { _myValue = value; numSets ++; myFunction(); } public function get myValue ():Number { numGets ++; myOtherFunction(); }

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

The Benefits of Getters and Setters Get/Set functions are extremely helpful for two reasons:
1. They can be overridden in derived classes. All classes that are derived from the base class can extend or complely override the behavior of the get/set methods to suit the needs of the derived class.
override public function set myValue (value:Number):void {

2.

They enable sequential code execution when accessed.


public function set myValue (value:Number):void { _myValue = value; numSets ++; myFunction(); }

In this example, every time the value is set, the numSets Number is incremented, and the myFunction() function is executed. This also enables you to write cleaner and simpler code. The following would trigger this method:
myValue = 123;

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex: An Introduction to the Flex Framework and OO Development

Get into some real code

Now that weve gone over the basics of OO, lets dig into some real code from our earlier demo and well see object oriented programming in action.

cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.

You might also like