deep dive flex framework

8/6/2019 Deep Dive Flex Framework

1/71

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

A Deep Dive into theFlex 3 Framework

Joshua Jamison

EffectiveUI

www.eff

ectiveui.comJanuary 30th, 2009


2/71


Introductions

Who am I?

Joshua Jamison

Software Architect at EffectiveUI

Develop on Flex / Ruby / Java / Android / JavaFX

Who are you?

Assumptions:

You know some Flex

You want to know more Flex

You know how to get things done with Flex, but not how to make the most of the FlexFramework


3/71


What will we talk about today?

Several topics that help you maximize Flexs power

Things many beginner - intermediate developers dont know a lot about

Data Binding

Style manager

Collections

System Manager

For each of these, Ill discuss:

What it is

How it affects you

Best ways to use it Common mistakes to avoid

Itll start simple, and get deeper as we go


4/71

Copyright 2008 Adobe Systems Incorporated. All rights reser ved.4

Data Binding


5/71

Copyright 2008 Adobe Systems Incorporated. All rights reser ved.

The Problem

5

Need a way to sync views with changing data


6/71


The Scenario

6

Scenario: A value object with some text that should be displayed on a label


7/71


Roll-my-own solution

I have a VO that contains some text I need to display on the screen

7

public class BoringVO1 {public var _text : String;

}


8/71



How will I know when the text eld on this object changes? Ill have it dispatch

events.

8

[Event(name=textChanged), type=flash.events.Event]

public class BoringVO1 extends EventDispatcher {

private var _text : String;

public function set text( value : String ) : void {

_text = value;

this.dispatchEvent( new Event(textChanged) );

}

}


9/71



In the view, Ill listen for those events:

9

public function setMyText() {

theLabel.text = value;

}

private var _vo : BoringVO1;

public function set vo( value : BoringVO1 ) : void {

_vo = value;

_vo.addEventListener( textChanged, this.setMyText )

}


10/71



10

Ugh. Annoying. Too much code for so simple a task.


11/71


Flexs solution: data binding

Data binding is a contract between two objects: one promises to dispatch events

when its data changes, and another promises to listen to those changes and updateitself

Got this denition from Michael Labriolas fantastic data binding talk at 360|Flex San Jose, Diving in the

Data Binding Waters

Contrary to popular belief, it isnt magic: its events!

11


12/71


13/71


The Basic Idea

A property of a component changes

The propertys component res offan event indicating that the property changed

Other components listen for this event, recognize that a needed value has changed,

and update themselves with the new value

Bindings also re once on initialization, so that initial values are set correctly

13


14/71


MXML Example (with curly braces), binding to a property

To bind to a property, simply put a reference to the property in curly braces:

The referenced data must be marked as bindable: give it [Bindable] metadata

If it isnt marked as [Bindable], youll get a warning from the compiler...

Data binding will not be able to detect assignments...

...and the binding wont work.

14

A warning!


15/71


Metadata

What is it?

Metadata is information that tells the compiler how components are used in a Flex application.

Various kinds: [ArrayElementType], [DefaultProperty], [Deprecated], [Effect], [Embed]...

[Bindable] metadata tells the compiler to generate code to dispatch events when the property or

properties marked [Bindable] are changed, so that other objects binding to that data will update

accordingly.

Why is it needed? Remember all of the event dispatching and listening from the roll-my-own example?

The [Bindable] metadata tells the compiler to dispatch all of those events when objects or their

properties change.

15


16/71


Metadata

Where should [Bindable] metadata be placed?

Before a public class denition

Makes all public properties, public getters/setters available as binding sources

Before a public, protected, or private property dened as a variable

Makes that property available as a data binding source

Before a public, protected, or private property dened as a getter/setter

Makes that property available as a data binding source

Components declared in MXML are automatically set as [Bindable] in the compiler-generated

Actionscript, as long as they have an id set

What is the syntax?

[Bindable] or [Bindable(event=eventTypeToWhichInterestedComponentsShouldRespond)]

If no event type is given, by default an event named propertyChange, of type PropertyChangeEvent is

dispatched

16


17/71


Metadata

Why use a custom event type?

Its more efficient than using the default PropertyChangeEvent

More on this later

Who dispatches the custom event?

When no custom event type is specied:

Default PropertyChangeEvent is dispatched automatically

Example: DefaultEventFiring.mxml

When a custom event type is specied:

No PropertyChangeEvents are dispatched

Custom event types are not dispatched automatically

Must dispatch custom events explicitly Example: CustomEventFiring2.mxml

17


18/71


MXML Example (with curly braces), binding to a function

Functions can be used as a source for data binding

Must be marked with appropriate metadata: [Bindable(event=eventType)]

When do bindings to functions execute?

Whenever the event type listed in the [Bindable(event=eventType)] metadata is dispatched

Example: DataBinding6.mxml

Whenever one of the bindable arguments passed in to the function changes

Code automatically generated to execute the binding whenever one of the functions passed-in

bindable arguments changes

Compiler will throw a warning when non-bindable arguments are passed in to the argument list of a

bound function (and the binding wont work, either)

On initialization

18


19/71


MXML Example (with curly braces), binding to XML data

Can bind directly to XML data

XML does not dispatch change events when nodes are edited, so views may not update correctly

XMLListCollection is the class of choice to use as an XML data provider

Provides sorting and ltering methods

Ensures views get updated when XML nodes are edited

19


20/71


MXML Example: using tag

The MXML tag accomplishes the same thing as curly braces

Allows you to bind multiple sources to a single destination

Can place a concatenated Actionscript expression in curly braces in the source

property of a tag

Example: BindingTag.mxml

20


21/71


What does the generated code buy you?

Brevity

Lots of error handling

Binding to expressions

Compiler generates code to evaluate the expression placed in curly braces when particular events are

red off; makes it very easy to bind to complex expressions

Chains

Binding to property chains happens easily, too:

When childA, propertyB, childC, or widgetD changes, the labels text updates appropriately

All of the event listeners needed to make this happen are created for you in the generated code

All of the properties in the chain must be [Bindable] in order for this to work correctly

21


22/71


Binding in Actionscript: bindProperty() and bindSetter()

Bindings can be created in Actionscript code, too

Use mx.binding.utils.BindingUtils Two important static methods on the BindingUtils class

bindProperty() sets a destination property when a source property or property chain changes

Takes a destination object, a destination property, a source object, and a source property chain(remember to make all elements in the source property chain [Bindable])

Youcan

use bindProperty() to set a property that has a setter bindSetter() calls a handler function() when a source property or property chain changes

Takes a handler function, a source object, and a source property chain

Since handler functions re when bindSetter is rst called; be sure to check for nulls

Handler function receives, as a parameter, the new value of the sources property chain

22


23/71


Common problem: performance in Cairngorm

Too many bindable elds on the model doesnt perform well!

Why?

Every time one of the properties on the model changes, the model dispatches a PropertyChangeEvent

Any component binding to any property on the model listen for PropertyChangeEvents dispatched from

the model

Examines the event to see which property the PropertyChangeEvent is for; disregards if not relevant

If the model has a lot ofelds, this is a huge amount of unnecessary work

Solution? Custom event types

Listening components now only receive the particular event type dispatched for the property in

question

23


24/71


Common problem: two-way binding

Problem: two elds should update each other

Simple solution: Create two bindings, one in each direction.

Flex makes sure that an innite loop wont occur

MXML solution: TwoWayMXML.mxml

Actionscript solution: TwoWayActionscript.mxml

Theres a shortcut for this coming in Gumbo (Flex 4)...

Curly braces

Binding tags


25/71


StyleManager


26/71


StyleManager: Styling 101

Styles differ from Properties in the way they are set, maintained, and accessed in

your application

Ways to set styles:

In MXML, they look just like properties:

In Actionscript, they must be set through the style manager:

var label : Label = new Label();

label.text = "woot! WTF FTW!"; label.setStyle("color", "0x00ff00"); Why is it more complex in ActionScript?

26


27/71



Styles are inheritable

Styles must propagate to their children, and their childrens children, and sometimes their childrenschildrens children, forever and ever.

This task requires some management

The ex team built a class to do just that, and creatively named it the Style Manager.

The StyleManager serves as the storehouse for all of this information and makes it

available to other components.

27


28/71



Every time a style is set, the framework has to keep track of:

Any parent styles this over-rides

Any children who are affected

Flex adds/removes styles through proto chaining

Style properties are stored in the proto chains - not as properties on the objects themselves

proto chains are outside of the scope of our discussion, but its a really interesting topic to learn more

about.

28


29/71


Style Precedence

Global, Type, Class, Attribute

29

*Image courtesy Juan Sanchez and Andy McIntosh


30/71


31/71


Using StyleManager to manage Assets

You can embed assets through the StyleManager

Advantages:

Avoid cluttering your component code with Embed statements

Keep all external resource paths in a single place

Manage resources that might be used in more than one part of your app

.icons{

wrenchIcon: Embed('images/wrench.png'); searchIcon: Embed('images/search.png'); loginIcon: Embed('images/login.png');}

31

h S l


32/71


Using the StyleManager

Other things you can do with the StyleManager:

Make changes to existing styles

Useful for programmatically re-themeing at runtime for a congurator

StyleManager.getStyleDeclaration(selector);

StyleManager.setStyleDeclaration(selector, CSSSelector, update);

Clear existing styles

StyleManager.clearStyleDeclaration(selector, update)

Dene whether your styles inuence other components

StyleManager.registerParentSizeInvalidatingStyle(styleName:String)

StyleManager.registerParentDisplayListInvalidatingStyle(styleName)

Register aliases for color names

blue instead of 0x0000ff

StyleManager.registerColorName(colorName, colorValue);

Load styles from a swf at runtime

StyleManager.loadStyleDeclarations(...);

32

L d l d l i i


33/71


Load style declarations at runtime

Uses different CSS les for the different themes

Load the style declarations from a pre-compiled swf

The core of the functionality:

privatefunction changeCSS( panelTitle:String, name:String ):void {

StyleManager.loadStyleDeclarations( name, true );

}

33

E l l f SWF i


34/71


Example: swap styles from a SWF at runtime

34

Example courtesy of Juan Sanchez and Andy McIntosh

E l t l f SWF t ti


35/71


Example: swap styles from a SWF at runtime

35

Example courtesy of Juan Sanchez and Andy McIntosh

E l l i d t i t l


36/71


Example: clearing and restoring styles

Same example as before, but a few new buttons / handlers:

36

publicfunction unloadRed():void{ StyleManager.unloadStyleDeclarations( 'Red.swf');}

// Code to restore the default 'Halo' button

publicfunction restoreDefaults():void{

StyleManager.setStyleDeclaration('Button', defaultButtonStyle, true);}

privatevar defaultButtonStyle : CSSStyleDeclaration;

publicfunction onComplete():void{

defaultButtonStyle = StyleManager.getStyleDeclaration('Button');}

...


37/71


StyleManager demo:

ThemeSwap

In case it doesnt ork li e Obsidian theme
http://www.scalenine.com/samples/themeSwapper/themeSwap.htmlhttp://www.scalenine.com/samples/themeSwapper/themeSwap.html


38/71


In case it doesnt work live: Obsidian theme

38

In case it doesnt work live: iTunes 7 Theme


39/71


In case it doesnt work live: iTunes 7 Theme

39

In case it doesnt work live: Windows Vista theme


40/71


In case it doesn t work live: Windows Vista theme

40

More info?


41/71


More info?

Creating Visual Experiences with Flex 3.0, by Juan Sanchez and Andy McIntosh

Still valid in Flex 4.0!

41

ScaleNine! Scale....ten?


42/71


Collections

What is a collection?


43/71


What is a collection?

Data comes in many formats

Objects Arrays

XML

There are many different kinds of view components

Crossing all of the view components with all of the diff

erent types of datarepresentations would yield an unmanageable number of classes

Need a common way to use any data as the source for any view component

This is where mx.collections.* shines

43

Why do we need collections?


44/71


Why do we need collections?

Collections:

Abstract the format of the data from the display component Ensure components are updated when data changes

Provide consistent operations to use on data

Provide sorted views of data

Provide ltered views

(Reasons taken from the online ex documentation at www.adobe.com)

44

So what are collections really?
http://www.adobe.com/http://www.adobe.com/http://www.adobe.com/


45/71


So, what are collections really?

Classes that implement IList, ICollectionView

IList is an interface that contains that make it easy to work with linear data ICollectionView is an interface that makes it easy to work with hierarchical data

ArrayCollection & XMLListCollection are the main ones youll use

These actually extend ListCollectionView, which implements IList and ICollectionView

45

IList


46/71


IList

Interface for working with linear data

Interesting methods: addItem

addItemAt

getItemAt

getItemIndex

removeAll

removeItemAt

setItemAt

46

ICollectionView


47/71


ICollectionView

Interface for sorting, ltering, and interacting with linear and hierarchical data

Interesting properties sort

lterFunction

Interesting methods

contains

createCursor

47

ListCollectionView


48/71


ListCollectionView

Implements IList

Implements ICollectionView

Consequently, components extending ListCollectionView can be used anywhere an

IList or an ICollectionView is expected

Is the base class for ArrayCollecton, XMListCollection

48

ArrayCollection XMLListCollection


49/71


ArrayCollection, XMLListCollection

The two classes in the Flex framework that inherit from ListCollectionView

ArrayCollection Uses an array as its data source

Good for linear data

XMLListCollection

Uses an XMLList as its data source XMLList is a list of one or more XML objects

Good for hierarchical data

49

Where are collections useful?


50/71


Where are collections useful?

Various classes can all use collection objects as their data source; these are called

data provider components:

ButtonBar

ColorPicker

ComboBox

DataGrid

DateField

HorizontalList

LinkBar

List

Menu

MenuBar

PopUpMenuButton

Tree

etc.

50

Review: why do we need collections?


51/71


Review: why do we need collections?

Collections:

1. Abstract the format of the data from the display component2. Ensure components are updated when data changes

3. Provide consistent operations to use on data

4. Provide sorted views of data

5. Provide ltered views

51

1. Abstract the data format


52/71


1. Abstract the data format

The can accept many different types of data sources, including an

ArrayCollection and an XMLListCollection

The component can swap between different collections without a problem

Example: AbstractDataFormat.mxml

52

2. Update views when data changes


53/71


2. Update views when data changes

One of the main reasons to use collections is so that when the data contained by the

collection changes, views update accordingly

Collections re offCollectionChange events when their items change; views listen for

these events and refresh themselves accordingly

When passing in non-collection objects as data providers, you may not see the view

update immediately

Flex wraps the passed in raw objects (e.g., Array or XML) in collection objects; this lets you use your raw

data directly.

However, changes made directly to those raw objects may not force the views to update

Example: UpdateTheViews.mxml

53

3. Consistent data manipulation operations


54/71


3. Co s ste t data a pu at o ope at o s

Both ArrayCollection and XMLListCollection inherit from ListCollectionView

This makes it easy to edit data in a consistent way, regardless of which type of data isbeing used for the data provider

Square brackets [] (Dont use these - theyre involved in a Flash Player bug regarding loading sub-

applications; use getItemAt() intead)

getItemAt()

removeItemAt()

addItem()

54

4. Sorted views


55/71


Collections provide a mechanism to sort the view of the data without changing the

underlying data itself

ListCollectionViews sort property:

type = Sort

sort.elds should be an array of SortField objects, which describe how to perform the sort

Call refresh() on the collection object after assigning it a sort object

Underlying data does not change

Example: SortingViews.mxml

55

5. Filtered views


56/71


Collections also offer an easy way to lter data

Simply set the lterFunction property on the collection to a function of the form: function theFilterFunction( item : Object ) : Boolean {}

The function should return true on the object if it should be included in the ltered view of the data

Example: SortingViews.mxml

56

Hierarchical Data


57/71


Representing hierarchical data in XML is trivial, since XML itself is natively

hierarchical:

Peanut

Object graphs can be used, too

Example: ObjectHierarchy.mxml

Put the child objects in the childreneld of the object

57

Cursors


58/71


Classes used to navigate through collection objects

Provide convenient, consistent ways to access data in collections

Initialize to the rst element in the collection

Cursors allow:

Movement through data (forward, back)

Searching (only if the collection is sorted)

Bookmarks

Data manipulation (addition, removal)

Great for navigating and searching through data

They respect sorts (even though the underlying data isnt actually sorted, cursor willbehave like it is)

They have an optimized nd method

Handy for paging through long results sets

58

Common Problem: Manipulating a view componentimmediately after changing the data provider


59/71


immediately after changing the data provider

Setting the dataProvider property on a component such as a Tree requires that it

validate its properties and layout; it may need to add or remove children based on

the changes

Attempting to manipulate the view component immediately after setting the

dataProvider (i.e., on the next line of code) can cause runtime errors because the

component has not yet validated its properties and layout

To get around this problem, call validateNow() on the view component immediatelyafter setting the dataProvider

This forces the component to validate its properties and layout and redraw itself if

necessary

Only do this when necessary; theres a performance hit

59

Common Problem: Not seeing expected changes in the view


60/71


g p g

If the objects stored in a collection are not [Bindable], the view will not be able to

detect when they have changed

In these instances, after updating an item in the collection, call the itemUpdated

method on the collection, letting it know that its data has changed

60


61/71


SystemManager

SystemManager: overview


62/71


y g

Root of the Flex swf

First class that is instantiated Controls and coordinates the initialization of the application

Instantiates and displays the pre-loader

Instantiates Application and adds it to the display list

Manages layers of children for popups (sorta), cursors, and tooltips

Switches focus between top-level items like the above list

SystemManager: 2 frame swf


63/71


y

Flex apps currently publish to a 2 frame SWF

1st frame (small): SystemManager, Preloader, DownloadProgressBar, helper classes. 2nd frame (probably big): The rest of the framework, your application, embedded assets

SystemManager

Preloader

DownloadProgressBar

HelperClasses

Flex Framework

Application code

Embedded Assets

RSLs

SystemManager: 2 frame walkthrough


64/71


Frame 1 streams in, plays

SystemManager is created

SystemManager takes over - creates Preloader

Preloader tracks the rest of the bytes streaming in,

provides updates to SystemManager Once all bytes for frame 2 are streamed in, frame 2

plays

64

SystemManager

Preloader

DownloadProgressBar

HelperClasses

SystemManager: 2 frame walkthrough


65/71


Frame 2 plays

SystemManager instantiates Application,sets Application.systemManager to itself

Application initializes itself, emitsCreationComplete

SystemManager adds Application to theDisplayList, hands control over to

Application / LayoutManager

applicationComplete event is dispatched,and your app is ready to go

65

Flex Framework

Application code

Embedded Assets

RSLs


66/71

SystemManager: what else is it good for?


67/71


Getting a reference to the root object

SystemManager.stage Flash converts have probably spent some time looking for this

Monitoring keyboard and mouse activity

Manipulate multiple pop-ups, cursors, or tool-tips from their parent

67

SystemManager Pitfalls: Multiple Child Lists


68/71


PopUp windows added through PopUpManager.addPopUp or createPopUp do not go on theSystemManager.popupChildren list by default - they go on the normal Application child list.

This list is displayed above the Alert child list and toolTipChildList

To add them there, pass the constant PopUpManagerChildList.POPUP as the fourth parameter to theadd or create methods on PopUpManager

PopUpManager.createPopUp(this, TestPopUp,false, PopUpManagerChildList.POPUP);

cursorChildren are on top of everything, then popupChildren, then toolTipChildren, then the regular oldapplication children.

68

application children

toolTipChildren

popupChildren

cursorChildren

SystemManager Pitfalls: The Root


69/71


The system manager tries to own _root

May manipulate the root object in ways youre not expecting in Flash This makes ash / ex integration frustrating at times

Im not going to go into this more, but be aware of it

69

Resources


70/71


Michael Labriolas 2008 360|Flex San Jose talk about Data Binding: Diving in the Data

Binding Waters (http://www.onex.org/ted/2008/08/diving-in-data-binding-waters-

with.php)

Flex 3 Cookbook(Joshua Noble & Todd Anderson; OReilly)

Creating Visual Experiences in Flex 3.0 (Juan Sanchez and Andy McIntosh; Addison-

Wesley)

Programming Flex 2, Programming Flex 3 (Chac Kazoun, Joey Lott; OReilly)

Learning Flex 3 (Alaric Cole; OReilly)

Online Flex documentation

API: http://livedocs.adobe.com/ex/3/langref/index.html

Docs: http://livedocs.adobe.com/ex/3/html/

70
http://livedocs.adobe.com/flex/3/html/http://livedocs.adobe.com/flex/3/html/http://livedocs.adobe.com/flex/3/html/http://livedocs.adobe.com/flex/3/html/http://livedocs.adobe.com/flex/3/langref/index.htmlhttp://livedocs.adobe.com/flex/3/langref/index.html


71/71

Thank you!

Joshua Jamison

[email protected]

twitter: cephus

brightkite: cephus
mailto:[email protected]:[email protected]

deep dive flex framework

Documents