Professional Documents
Culture Documents
cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.
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
cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.
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.
cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.
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 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.
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.
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 }
cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.
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.
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.
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.
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.
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.
Inheritance
cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.
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.
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.
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.
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.
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.
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.
cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.
cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.
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.
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.
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;
cynergysystems.com
2006 Cynergy Systems, Inc. All Rights Reserved.
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.
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.
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.