1. Object Oriented Flex An introduction to the Flex Framework and Object Oriented Development By Andrew Trice Technical Lead, Cynergy Systems http://www.cynergysystems.com

2. June 27 th - 30 th 2007www.cfunited.com 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? a)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. b)Flex can integrate VERY closely with ColdFusion to quickly and easily build powerful applications.

3. June 27 th - 30 th 2007www.cfunited.com 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. June 27 th - 30 th 2007www.cfunited.com What we’ll cover today: What is object oriented programming How to use object oriented principles to build engaging applications

5. June 27 th - 30 th 2007www.cfunited.com 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: a)Encapsulation b)Abstraction c)Inheritance d)Polymorphism e)Reusability

6. June 27 th - 30 th 2007www.cfunited.com 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. June 27 th - 30 th 2007www.cfunited.com 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 following class definition describes a “Car” object. The car has a color, a model name, and functions for accelerating and braking.

8. June 27 th - 30 th 2007www.cfunited.com 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 }

9. June 27 th - 30 th 2007www.cfunited.com 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. a)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.

10. June 27 th - 30 th 2007www.cfunited.com EncapsulationEncapsulation 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 wouldn’t 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.

11. June 27 th - 30 th 2007www.cfunited.com 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.

12. June 27 th - 30 th 2007www.cfunited.com AbstractionAbstraction 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() a)Does not need to know about color and model, so we don’t see them. We still have acess if we need it. Since we don’t need it, we don’t see it, which leads to cleaner, code that is easier to maintain. b)In a subsequent code block, we could perform an operation on the car, involving the model name, in this instance, we don’t need to know about the accelerate function, so it is hidden from us.

13. June 27 th - 30 th 2007www.cfunited.com Abstraction: continued Within Flex, we use abstraction all the time, and we may not even be aware of it. The following 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.

14. June 27 th - 30 th 2007www.cfunited.com <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" >

15. June 27 th - 30 th 2007www.cfunited.com InheritanceInheritance 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.

16. June 27 th - 30 th 2007www.cfunited.com 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, and includes two buttons, a checkbox, and a ColorPicker component.

17. June 27 th - 30 th 2007www.cfunited.com 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"; }

18. June 27 th - 30 th 2007www.cfunited.com 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 a)Public properties and methods are visible to all other classes.  public var foo : String;  Private a)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 a)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;

19. June 27 th - 30 th 2007www.cfunited.com 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.

20. June 27 th - 30 th 2007www.cfunited.com 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.

21. June 27 th - 30 th 2007www.cfunited.com 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

22. June 27 th - 30 th 2007www.cfunited.com Interface MXML Implementation Interfaces can be implemented in MXML class definitions: <mx:Canvas implements="IAutomobile“ mlns:mx="http://www.adobe.com/2006/mxml">

23. June 27 th - 30 th 2007www.cfunited.com 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--; } }

24. June 27 th - 30 th 2007www.cfunited.com ReusabilityReusability 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.

25. June 27 th - 30 th 2007www.cfunited.com Static Methods & Variables Another tool to keep in mind with object oriented Flex development is the “static” keyword. a)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 ) a)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.

26. June 27 th - 30 th 2007www.cfunited.com 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(); }

27. June 27 th - 30 th 2007www.cfunited.com The Benefits of Getters and Setters 1.They can be overridden in derived classes. All classes that are derived from the base class can extend or completely 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;

28. June 27 th - 30 th 2007www.cfunited.com Get into some real code Now that we’ve gone over the basics of OO, let’s dig into some real code from our earlier demo and we’ll see object oriented programming in action.