object oriented flex - andrew trice

7/31/2019 Object Oriented Flex - Andrew Trice

1/26

cynergysystems.com2006 Cynergy Systems, Inc. All Rights Reserved.

Object Oriented Flex

An introduction to the Flex

Framework and Object OrientedDevelopment

By Andrew Trice

Technical Lead, Cynergy Systems


2/26


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 nextgeneration development capabilities.

Flex can integrate VERY closely with ColdFusion to quickly and easily build powerfulapplications.


3/26




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 out-of 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.


4/26




What well cover today:

What is object oriented programming

How to use object oriented principles to build engaging applications


5/26




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 intoclasses that logically represent and logically organize its functionality.

Object Oriented Development relies heavily on the principles of:

Encapsulation Abstraction

Inheritance

Polymorphism

Reusability


6/26




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.


7/26




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 andmethods 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

}

}

}


8/26




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 aninstance of the Car class.

var myCar : Car = new Car();

Whether written in MXML or ActionScript, all Flex components are classes. Atcompile 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 thedefault Object class type.


9/26




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 carslogically 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.


10/26




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.


11/26




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 haveacess 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 themodel name, in this instance, we dont need to know about the accelerate function, soit is hidden from us.


12/26




Abstraction: continued

Within Flex, we use abstraction all the time, and we may not even be aware of it.

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


13/26




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 protectedproperties 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.


14/26




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.

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


15/26




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";

}

}

}


16/26




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 extendthe 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 protectedmethods.

protected var foo : String;


17/26




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.


18/26




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.


19/26




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 classimplements, 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 UIComponentclass, 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


20/26




Interface MXML Implementation

Interfaces can be implemented in MXML class definitions:


21/26




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--;

}

}


22/26




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, wellbeyond the original intent of the component.


23/26




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.


24/26




Getters and Setters

Getters and Setters are methods that mimic the signature of a property, but areactually programmatic methods. For Example:

Using a get/set method may look like a public propertymyClass.myValue = 123;

In actuality, myValue is using the get/set functionspublic function set myValue (value:Number):void

{_myValue = value;

numSets ++;

myFunction();

}

public function get myValue ():Number

{numGets ++;

myOtherFunction();

}


25/26




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. Thefollowing would trigger this method:

myValue = 123;


26/26




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.

object oriented flex - andrew trice

Documents