Date post: | 05-Dec-2014 |
Category: |
Technology |
Upload: | florian-weil |
View: | 6,925 times |
Download: | 1 times |
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 :-)