Deep Dive Flex Framework
-
Upload
ravi-kumar-pinnaboyina -
Category
Documents
-
view
230 -
download
0
Transcript of 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
-
8/6/2019 Deep Dive Flex Framework
2/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
3/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
4/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.4
Data Binding
-
8/6/2019 Deep Dive Flex Framework
5/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
The Problem
5
Need a way to sync views with changing data
-
8/6/2019 Deep Dive Flex Framework
6/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
The Scenario
6
Scenario: A value object with some text that should be displayed on a label
-
8/6/2019 Deep Dive Flex Framework
7/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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/6/2019 Deep Dive Flex Framework
8/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
Roll-my-own solution
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) );
}
}
-
8/6/2019 Deep Dive Flex Framework
9/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
Roll-my-own solution
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 )
}
-
8/6/2019 Deep Dive Flex Framework
10/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
Roll-my-own solution
10
Ugh. Annoying. Too much code for so simple a task.
-
8/6/2019 Deep Dive Flex Framework
11/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
12/71
-
8/6/2019 Deep Dive Flex Framework
13/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
14/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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!
-
8/6/2019 Deep Dive Flex Framework
15/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
16/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
17/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
18/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
19/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
20/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
21/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
22/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
23/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
24/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
25/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.25
StyleManager
-
8/6/2019 Deep Dive Flex Framework
26/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
27/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
StyleManager: Styling 101
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
-
8/6/2019 Deep Dive Flex Framework
28/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
StyleManager: Styling 101
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
-
8/6/2019 Deep Dive Flex Framework
29/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
Style Precedence
Global, Type, Class, Attribute
29
*Image courtesy Juan Sanchez and Andy McIntosh
-
8/6/2019 Deep Dive Flex Framework
30/71
-
8/6/2019 Deep Dive Flex Framework
31/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
32/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
33/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
34/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
35/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
36/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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');}
...
-
8/6/2019 Deep Dive Flex Framework
37/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.37
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 -
8/6/2019 Deep Dive Flex Framework
38/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
In case it doesnt work live: Obsidian theme
38
In case it doesnt work live: iTunes 7 Theme
-
8/6/2019 Deep Dive Flex Framework
39/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
In case it doesnt work live: iTunes 7 Theme
39
In case it doesnt work live: Windows Vista theme
-
8/6/2019 Deep Dive Flex Framework
40/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
In case it doesn t work live: Windows Vista theme
40
More info?
-
8/6/2019 Deep Dive Flex Framework
41/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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?
-
8/6/2019 Deep Dive Flex Framework
42/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.42
Collections
What is a collection?
-
8/6/2019 Deep Dive Flex Framework
43/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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?
-
8/6/2019 Deep Dive Flex Framework
44/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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/ -
8/6/2019 Deep Dive Flex Framework
45/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
46/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
IList
Interface for working with linear data
Interesting methods: addItem
addItemAt
getItemAt
getItemIndex
removeAll
removeItemAt
setItemAt
46
ICollectionView
-
8/6/2019 Deep Dive Flex Framework
47/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
ICollectionView
Interface for sorting, ltering, and interacting with linear and hierarchical data
Interesting properties sort
lterFunction
Interesting methods
contains
createCursor
47
ListCollectionView
-
8/6/2019 Deep Dive Flex Framework
48/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
49/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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?
-
8/6/2019 Deep Dive Flex Framework
50/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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?
-
8/6/2019 Deep Dive Flex Framework
51/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
52/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
53/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
54/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
55/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
56/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
57/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
58/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
59/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
60/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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
-
8/6/2019 Deep Dive Flex Framework
61/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.61
SystemManager
SystemManager: overview
-
8/6/2019 Deep Dive Flex Framework
62/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
63/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
64/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
65/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
66/71
SystemManager: what else is it good for?
-
8/6/2019 Deep Dive Flex Framework
67/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
68/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
69/71
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
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
-
8/6/2019 Deep Dive Flex Framework
70/71
Copyright 2008 Adobe Systems Incorporated. All rights reser ved.
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 -
8/6/2019 Deep Dive Flex Framework
71/71
Thank you!
Joshua Jamison
twitter: cephus
brightkite: cephus
mailto:[email protected]:[email protected]