object oriented flex - andrew trice
TRANSCRIPT
-
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
-
7/31/2019 Object Oriented Flex - Andrew Trice
2/26
cynergysystems.com2006 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 nextgeneration development capabilities.
Flex can integrate VERY closely with ColdFusion to quickly and easily build powerfulapplications.
-
7/31/2019 Object Oriented Flex - Andrew Trice
3/26
cynergysystems.com2006 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 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
4/26
cynergysystems.com2006 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
-
7/31/2019 Object Oriented Flex - Andrew Trice
5/26
cynergysystems.com2006 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 intoclasses that logically represent and logically organize its functionality.
Object Oriented Development relies heavily on the principles of:
Encapsulation Abstraction
Inheritance
Polymorphism
Reusability
-
7/31/2019 Object Oriented Flex - Andrew Trice
6/26
cynergysystems.com2006 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
7/26
cynergysystems.com2006 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 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
}
}
}
-
7/31/2019 Object Oriented Flex - Andrew Trice
8/26
cynergysystems.com2006 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 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
9/26
cynergysystems.com2006 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 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
10/26
cynergysystems.com2006 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
11/26
cynergysystems.com2006 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 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
12/26
cynergysystems.com2006 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.
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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
13/26
cynergysystems.com2006 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 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
14/26
cynergysystems.com2006 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.
The code segment above describes a new class that extends from Canvas, andincludes two buttons, a checkbox, and a ColorPicker component.
-
7/31/2019 Object Oriented Flex - Andrew Trice
15/26
cynergysystems.com2006 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";
}
}
}
-
7/31/2019 Object Oriented Flex - Andrew Trice
16/26
cynergysystems.com2006 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 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;
-
7/31/2019 Object Oriented Flex - Andrew Trice
17/26
cynergysystems.com2006 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
18/26
cynergysystems.com2006 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
19/26
cynergysystems.com2006 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 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
-
7/31/2019 Object Oriented Flex - Andrew Trice
20/26
cynergysystems.com2006 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:
-
7/31/2019 Object Oriented Flex - Andrew Trice
21/26
cynergysystems.com2006 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--;
}
}
-
7/31/2019 Object Oriented Flex - Andrew Trice
22/26
cynergysystems.com2006 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, wellbeyond the original intent of the component.
-
7/31/2019 Object Oriented Flex - Andrew Trice
23/26
cynergysystems.com2006 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.
-
7/31/2019 Object Oriented Flex - Andrew Trice
24/26
cynergysystems.com2006 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 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();
}
-
7/31/2019 Object Oriented Flex - Andrew Trice
25/26
cynergysystems.com2006 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. Thefollowing would trigger this method:
myValue = 123;
-
7/31/2019 Object Oriented Flex - Andrew Trice
26/26
cynergysystems.com2006 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.