• Like
  • Save
Moving from AS3 to Flex - advantages, hazards, traps
Upcoming SlideShare
Loading in...5
×
 

Moving from AS3 to Flex - advantages, hazards, traps

on

  • 6,726 views

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....

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.

Statistics

Views

Total Views
6,726
Views on SlideShare
6,471
Embed Views
255

Actions

Likes
3
Downloads
107
Comments
0

6 Embeds 255

http://blog.derhess.de 221
http://www.derhess.de 15
http://www.slideshare.net 10
http://derhess.de 4
http://web.archive.org 3
http://translate.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Moving from AS3 to Flex - advantages, hazards, traps Moving from AS3 to Flex - advantages, hazards, traps Presentation 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) ●
    • Flex Layout Management Source: http://www.flickr.com/photos/svensonsan/
    • 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
    • Dynamic Layout
    • 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
    • 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) ●
    • 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 ● http://iamdeepa.com/blog/?p=39 ●
    • Which kind of component MXML 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 states and currentState 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 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 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
    • 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 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 ●
    • 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 ●
    • 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 = 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
    • 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 ●
    • 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 ICollectionView ● extends the base class ListCollectionView ●
    • 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 :-)