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 :-)