At first view developing with Flex looks pretty easy and comfortable for Flash developers. But that Impression is misleading since some features of Flex have to be savoured with caution. Florian delivers in his talk a conceptional view into the Flex Framework und shows up when it makes sense to use Flex and what hurdles there are to master when switching from Flash to Flex.

1. Thema: Flex Development Guideline
SFUG Talk vom 17. März 2009
von Florian Weil

2. Who I am...
Personal Information
➲
Florian Weil
●
from Germany (close to Frankfurt am Main)
●
26 years old
●
Loves the mountains and the snow, yeah
●
Professional Information
➲
Bachelor of Computer Science in Media
●
Worked as a banker, Camera Operator Assistent,
●
Filmmaker, Flash Lite and Interaction Developer
Now: Flex Developer for the LIIP AG
●
My website & blog: www.derhess.de
➲

3. Why Flex? Why...
Source:
http://www.flickr.com/photos/dave_apple/ http://www.flickr.com/photos/adenocorticotropina/ http://www.flickr.com/photos/a_of_doom/

4. Generally
Motivation:
➲
Flash Development != Flex Development
●
Flex is not really easy!!
●
Have a look at:
●
http://www.neatfilm.com/2008/01/20/flex-challenges-for-flash-ide-devleopers/
●
http://jessewarden.com/2008/01/when-you-hit-a-design-brick-wall-in-flex.html
●
Objectives
➲
Give some hints for Learning Flex
●
Understand the Basics of Flex
●
The presentation is not diving in
➲
Design Patterns, Software Architecture
●
Software Development Methods
●
Interaction Design, Usability...
●

5. Topics
Choose the right Layout Management
➲
Absolute Layout (pixelbased)
●
Dynamic Layout (percentage based)
●
Custom Component Development
➲
Which kind of component
●
State Management
●
Skinning
●
Metatags (Events, Embedded, Skinning)
●
Child Management (Template Component)
●
Working with Data
➲
ArrayCollection vs. Array
●
Bindable ValueObjects and Functions
●
Filter and Sort API
●
DataProvider -> ICollection...
●

6. Topics
Choose the right Layout Management
➲
Pixelbased Layout
●
Dynamicbased Layout
●
Forms (Validator and Error Management)
●
Custom Component Development
➲
Which kind of component
●
MXML based Component
●
AS Based ( Flex Framework Methods)
●
State Management
●
Property Manager Functions
●
Transitions Management
●
Skinning
●
Degrafa... / setStyle() Perfomance hungry
●
Metatags (Events, Embedded, Skinning)
●

7. Flex Layout Management
Source: http://www.flickr.com/photos/svensonsan/

8. Absolute Layout
For pixelbased Layout use the
➲
CANVAS Component
For a dynamic layout, e.g. the
➲
constraints are your friends
Why:
➲
● working with absolute values
● No active Layout Management

9. Dynamic Layout

10. Dynamic based Layout
Use Components like Hbox, Vbox etc. for
➲
relativ (percentage) values
use these Components carefully
➲
What can you do:
➲
● For paddings or align issues use the space
component

11. Forms Layout
For all bigger User Input Screens use the
➲
Form Component
Why:
➲
Easy and automatic Layout (FormItems)
●
Error Handling Functionality
●
Skinning/Render Functionality (Tooltips, required Fields)
●

12. Custom Components
Source: http://www.flickr.com/photos/bikeman04/

13. Architecture of a visual
Component
Invalidation / validation Model
➲
Aggregate changes and execute them to the right time
●
Event-driven Interaction Model
➲
Composition
➲
Parameterization of a component (Component in a
●
component)
Factories and item renderer
●

14. Life Cycle of a visual
Component
3 Phases:
➲
1. Initialization
➲
Creating Components, attach to displaylist etc.
●
2. Updating
➲
Components has to react on the changes of the invalid/validation
●
Modell
3. Destruction
➲
Remove Eventlisteners (!)
●
Null Objects
●
Garbage Collection
●

15. Life Cycle Part 2
The most important life cycle Functions
➲
override protected function createChildren()
●
override protected function commitProperties()
●
override protected function measure():void
●
override protected function
●
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
Tip:
➲
Extend your AS Component Class from the UIComponent
●
Use and understand(!) the Flex Interface API
●
More Information
➲
http://livedocs.adobe.com/flex/3/html/ascomponents_advanced
●
http://iamdeepa.com/blog/?p=39
●

16. Which kind of component
MXML vs. ActionScript
Source: http://www.flickr.com/photos/dan4th/

17. Which kind of component
MXML based Component
➲
When the Component is not very complex
●
The component could easily created by the standard
●
Flex Component Set
For creating a View or template class
●
ActionScript based Component
➲
If you have to create some new (data-driven, interaction,
●
skinning) logics
If the component very complex, so you have to use the
●
MVC Pattern or some similiar stuff
Perfomance issues...
●
Special case: Item Renderer...
➲

18. State Management
Attributes states and currentState are your
➲
friends ;-)
Defining changes with the Classes / MXML Tag
➲
SetProperty
●
SetEventHandler
●
AddChild
●
RemoveChild
●

19. State Management
Never implement an own state Management!!!
➲
Why use Flex States:
➲
Preview workflow in Flex Builder
●
CurrentState code completion
●
Flex Transition API
●

20. Child Management
Source: http://www.flickr.com/photos/kydd/

21. Example: Imagebar
Requirements:
➲
Headline
●
dynamic numbers of pages (ToggleButtonBar)
●
Filter Interface (Checkboxes)
●
Container for visible childrens
●
Thumbs (Childrens)
●

22. Child Management
Array or ArrayCollection
➲
For easy Child Management without a complex
●
Rendering
Would be better for data instances
●
Repeater Component
➲
For few or many instance of the same component
●
Dynamic Dataprovider
●
ListComponent
➲
Rendering Manager for many instances
●
Dynamic DataProvider
●

23. Repeater vs.
ListComponent
Repeater ListComponent
Rendering add and renders all Items Renders only the visible Items
DataProvider ArrayCollection ArrayCollection, XMLList
RenderItem normal Component ItemRenderer
Customize Data public attributes data Getter/setter API
Use Case All childrens should be visible RangeBased Rendering
More Information about ItemRenderes:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
More Information about Repeater in ActionScript 3:
http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-con

24. Skinning
Changes the visual experience of a Flex
➲
application
How to Skin
➲
● Use the skinning attributes via MXML
● Use <mx:Style> Tag
Type the style definition in the component
●
Include a .css file per source Attribute
●
Runtime Loading via SWF File
●

25. Graphical Skinning
Pixel Based
➲
Tools: Fireworks and Photoshop
●
Embed .png, .jpg or gif Files
●
Use Scale9-Grid Concept
●
Knowledge Base: http://www.scalenine.com/gallery/
●
Vector Based
➲
Tools: Illustrator and Flash
●
Embed: SWF and SWC Files
●
Use Scale9-Grid Concept
●
Tutorial:
●
http://developer.yahoo.com/flash/articles/flex-skinning.html
Flex component kit for Flash , Illustrator, Photoshop and
●
Fireworks

26. Programmatic Skinning
Programmatic Skinning for ActionScript based
➲
renderings
Use subclasses of Border, RectangularBorder,
●
ProgrammaticSkin or the interfaces
Tutorial for Programmatic Skinning
●
www.degrafa.org is a nice Skinning Library
●
Controlling the skinning functions
➲
Use the component functions setStyle() and getStyle()
●
StyleManager Class is able to change the complete
●
Graphical Experience of an application
Method setStyle() is perfomance hungry
●

27. Metatags...
The most important Tags
➲
● Bindable
[Bindable] or [Bindable(event=quot;eventnamequot;)]
●
Compiler adds EventListeners
●
Event
●
[Event(name=quot;enableChangedquot;, type=quot;flash.events.Eventquot;)]
●
For a well code completion and documentation
●
Embedded
●
[Embed(source=quot;logo.gifquot;)]
●
Importing graphics and other external data
●
Compiling external data into the swf
●
Many more Metatags
➲
http://livedocs.adobe.com/flex/3/html/metadata_3.html
●

28. Working with data
Source: http://www.flickr.com/photos/blude/

29. Array vs. ArrayCollection
Array
➲
Is native data typ
●
Bindable: No
●
API: very limited
●
Sorting: limited on one compare Function
●
Filtering: limited on one callback Function
●
ArrayCollection
➲
Is a wrapper class for arrays
●
Creation of ArrayCollection costs a lot of perfomance
●
compared to a creation of an array
Bindable: yes and very compatible to flex template
●
components (e.g. ListBox)
Flex Sorting API
●

30. Sort API
Sort API ()
➲
Sort Class
●
SortField Class
●
Add the stuff to an ArrayCollection
●
var dataSortField:SortField = new SortField();
dataSortField.name = quot;dataquot;;
dataSortField.numeric = true;
// Create the Sort object and add the SortField object
var numericDataSort:Sort = new Sort();
numericDataSort.fields = [dataSortField];
// Set the ArrayCollection object's sort property to our custom sort
arrColl.sort = numericDataSort;
arrColl.refresh();
http://blog.flexexamples.com/2007/08/05/sorting-an-arrayc

31. Binding
Binding looks for changes in a data structure and
➲
informs all listeners to this changes
Binding Properties
➲
Binding Datatypes
●
Binding Classes, especially ValueObject Classe
●
[Bindable] public var property:DataType;
●
Binding Functions (eventbased)
➲
[Bindable(event=quot;eventnamequot;)] public function
●
myFunction():DataType
Needs always a dispatchEvent(new Event(„eventname“)); call
●

32. Binding Part 2
Use carefully the Binding Functionality!
➲
Binding can cost a lot of Perfomance
➲
Because of a lot of listeners and dispatch Events
●
Needless datatransfers and rendering updates
●
Tools for better Binding Control
➲
(Advanced) Binding Functions
➲
MXML Tags Binding
●
BindingUtils Class
●
BindingWatchers Class
●

33. Custom Collection
MXML Model
➲
A data model for an MVC Architecture
●
The Model component and an XML File could be
●
directly combined
It is bindable
●
For Real Custom Data Structure
➲
implements the Interface ICollectionView
●
extends the base class ListCollectionView
●

34. Dynamic Data Handling
HTTP Service Component
➲
Use the Events to work with the data
●
Tutorial: Loading a XML File
●
Tutorial: Read and Send Variables to a Server
●
WSDL-Webservice Component
➲
Tutorial: Calling simple Web Service
●

35. Flex Learning Links
Introduction
➲
● Inside RIA: Flex Introduction Serie
● http://www.adobe.com/devnet/flex/videotraining/
● Flex Explorer
Deeper Flex Framework understanding
➲
● Costum Components
● Data Binding
Ressources & article overview:
➲
● http://www.scalenine.com → Skinning
● http://blog.flexexamples.com/tags/
● http://derhess.de/weblog_detail.php?id=58

36. Flex Books
Start & Concepts of Flex 3
➲
● Adobe Press: Training from the Source
● O´Reilly: Flex 3
● Friends of Ed: Advanced Flex 3
Daily Development
➲
● O´Reilly: Flex 3 Cookbook
● Friends of Ed: Flex Solutions
● Addison-Wesley: Creating Visual Experiences
Software Development
➲
● Head First: Software Development
● Head First: Design Patterns
● Addison-Wesley: Elements of Reusable Object-Oriented
Software

37. Flex Tools & Libs
Flex IDE PlugIns
➲
● Subversion
● CodeSnippet
● Task Explorer
Libraries
➲
● FlexLib: http://code.google.com/p/flexlib/
● Flex.org: http://flex.org/de/software/components
● Application Frameworks: PureMVC, Cairngorm
● Degrafa: http://degrafa.org/
● Test-Driven-Development: fluint, flexUnit

38. The End
Source: http://www.flickr.com/photos/moogan/

39. The End
QUESTIONS?

40. The End Part 2
Thanks :-)