moving from as3 to flex - advantages, hazards, traps
DESCRIPTION
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.TRANSCRIPT
Thema: Flex Development Guideline
SFUG Talk vom 17. März 2009
von Florian Weil
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
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/
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...
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...
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)● ChildManagement
● Repeater vs. ListComponent● Item Renderer
➲ Data Driven Approaches● ArrayCollection vs. Array● Filter and Sort API● Binding (Events based, ValueObject, Properties,
Watcher und MXML Binding Tag● DataProvider -> ICollectionView,
ListCollectionView...
Flex Layout Management
Source: http://www.flickr.com/photos/svensonsan/
Absolute Layout
➲ For pixelbased Layout use the CANVAS ComponentCANVAS Component
➲ For a dynamic layout, e.g. the constraintsconstraints are your friends
➲ Why:● working with absolute values● No active Layout Management
Dynamic Layout
Dynamic based Layout
➲ Use Components like Hbox, Vbox etc.Hbox, Vbox etc. for relativ (percentage) values
➲ use these Components carefully
➲ What can you do:● For paddings or align issues use the space space
componentcomponent
Forms Layout
➲ For all bigger User Input Screens use the Form ComponentForm Component
➲ Why:● Easy and automatic Layout (FormItems)● Error Handling Functionality● Skinning/Render Functionality (Tooltips, required Fields)
Custom Components
Source: http://www.flickr.com/photos/bikeman04/
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
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
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_2.html● http://iamdeepa.com/blog/?p=39
Which kind of component
MXML vs. ActionScriptMXML vs. ActionScript
Source: http://www.flickr.com/photos/dan4th/
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...
State Management
➲ Attributes statesstates and currentStatecurrentState are your friends ;-)
➲ Defining changes with the Classes / MXML Tag● SetProperty● SetEventHandler● AddChild● RemoveChild
State Management
➲ Never implement an own state Management!!!
➲ Why use Flex States:● Preview workflow in Flex Builder● CurrentState code completion● Flex Transition APIFlex Transition API
Child Management
Source: http://www.flickr.com/photos/kydd/
Example: Imagebar
➲ Requirements:● Headline● dynamic numbers of pages (ToggleButtonBar)● Filter Interface (Checkboxes)● Container for visible childrens● Thumbs (Childrens)
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
Repeater vs. ListComponent
Repeater ListComponentRendering add and renders all Items Renders only the visible ItemsDataProvider ArrayCollection ArrayCollection, XMLListRenderItem normal Component ItemRendererCustomize Data public attributes data Getter/setter APIUse 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-controls-using-the-repeater-in-flex-redux/
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
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
Programmatic Skinning
➲ Programmatic SkinningProgrammatic 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 StyleManager Class is able to change the complete
Graphical Experience of an application● Method setStyle()setStyle() is perfomance hungry
Metatags...
➲ The most important Tags● Bindable
● [Bindable] or [Bindable(event="eventname")]● Compiler adds EventListeners
● Event● [Event(name="enableChanged", type="flash.events.Event")]● For a well code completion and documentation
● Embedded● [Embed(source="logo.gif")]● 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
Working with data
Source: http://www.flickr.com/photos/blude/
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
Sort API
➲ Sort API ()● Sort Class● SortField Class● Add the stuff to an ArrayCollection
var dataSortField:SortField = new SortField(); dataSortField.name = "data"; dataSortField.numeric = true;
// Create the Sort object and add the SortField objectvar numericDataSort:Sort = new Sort();numericDataSort.fields = [dataSortField];// Set the ArrayCollection object's sort property to our custom sortarrColl.sort = numericDataSort;arrColl.refresh();http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/
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="eventname")] public function
myFunction():DataType● Needs always a dispatchEvent(new Event(„eventname“)); call
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
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 ICollectionViewICollectionView● extends the base class ListCollectionViewListCollectionView
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
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
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
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
The End
Source: http://www.flickr.com/photos/moogan/
The End
QUESTIONS?
The End Part 2
Thanks :-)