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 Frankfur...
Why Flex? Why...




Source:
http://www.flickr.com/photos/dave_apple/ http://www.flickr.com/photos/adenocorticotropina/ ht...
Generally

      Motivation:
  ➲
          Flash Development != Flex Development
      ●
          Flex is not really easy...
Topics

       Choose the right Layout Management
   ➲
           Absolute Layout (pixelbased)
       ●
           Dynamic...
Topics


       Choose the right Layout Management
   ➲
           Pixelbased Layout
       ●
           Dynamicbased Layo...
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
  ➲...
Dynamic Layout
Dynamic based Layout


     Use Components like Hbox, Vbox etc. for
 ➲
     relativ (percentage) values

     use these Co...
Forms Layout


      For all bigger User Input Screens use the
  ➲
      Form Component

      Why:
  ➲
          Easy and...
Custom Components




   Source: http://www.flickr.com/photos/bikeman04/
Architecture of a visual
 Component

    Invalidation / validation Model
➲
        Aggregate changes and execute them to t...
Life Cycle of a visual
 Component

      3 Phases:
  ➲


      1. Initialization
  ➲
           Creating Components, attac...
Life Cycle Part 2

     The most important life cycle Functions
 ➲
         override protected function createChildren()
 ...
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 ...
State Management

    Attributes states and currentState are your
➲
    friends ;-)



    Defining changes with the Class...
State Management


     Never implement an own state Management!!!
 ➲




     Why use Flex States:
 ➲
         Preview wo...
Child Management




            Source: http://www.flickr.com/photos/kydd/
Example: Imagebar


      Requirements:
  ➲
          Headline
      ●
          dynamic numbers of pages (ToggleButtonBar...
Child Management


     Array or ArrayCollection
 ➲
         For easy Child Management without a complex
     ●
         R...
Repeater vs.
   ListComponent

               Repeater                          ListComponent
Rendering      add and rende...
Skinning


     Changes the visual experience of a Flex
 ➲
     application


      How to Skin
 ➲
     ● Use the skinning...
Graphical Skinning


     Pixel Based
 ➲
         Tools: Fireworks and Photoshop
     ●
         Embed .png, .jpg or gif F...
Programmatic Skinning


     Programmatic Skinning for ActionScript based
 ➲
     renderings
         Use subclasses of Bo...
Metatags...

      The most important Tags
 ➲
     ● Bindable
             [Bindable] or [Bindable(event=quot;eventnamequo...
Working with data




        Source: http://www.flickr.com/photos/blude/
Array vs. ArrayCollection

     Array
 ➲
         Is native data typ
     ●
         Bindable: No
     ●
         API: ver...
Sort API
      Sort API ()
 ➲
         Sort Class
     ●
         SortField Class
     ●
         Add the stuff to an Arra...
Binding

     Binding looks for changes in a data structure and
 ➲
     informs all listeners to this changes


     Bindi...
Binding Part 2

     Use carefully the Binding Functionality!
 ➲


     Binding can cost a lot of Perfomance
 ➲
         B...
Custom Collection


     MXML Model
 ➲
         A data model for an MVC Architecture
     ●
         The Model component a...
Dynamic Data Handling


     HTTP Service Component
 ➲
         Use the Events to work with the data
     ●
         Tutor...
Flex Learning Links


     Introduction
➲
    ● Inside RIA: Flex Introduction Serie
    ● http://www.adobe.com/devnet/flex...
Flex Books

       Start & Concepts of Flex 3
  ➲
      ● Adobe Press: Training from the Source
      ● O´Reilly: Flex 3
 ...
Flex Tools & Libs

     Flex IDE PlugIns
➲
    ● Subversion
    ● CodeSnippet
    ● Task Explorer


     Libraries
➲
    ●...
The End




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




          QUESTIONS?
The End Part 2




            Thanks :-)
Upcoming SlideShare
Loading in...5
×

Moving from AS3 to Flex - advantages, hazards, traps

3,573

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,573
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
108
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Moving from AS3 to Flex - advantages, hazards, traps"

  1. 1. Thema: Flex Development Guideline SFUG Talk vom 17. März 2009 von Florian Weil
  2. 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. 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. 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. 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. 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. 7. Flex Layout Management Source: http://www.flickr.com/photos/svensonsan/
  8. 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. 9. Dynamic Layout
  10. 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. 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. 12. Custom Components Source: http://www.flickr.com/photos/bikeman04/
  13. 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. 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. 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. 16. Which kind of component MXML vs. ActionScript Source: http://www.flickr.com/photos/dan4th/
  17. 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. 18. State Management Attributes states and currentState are your ➲ friends ;-) Defining changes with the Classes / MXML Tag ➲ SetProperty ● SetEventHandler ● AddChild ● RemoveChild ●
  19. 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. 20. Child Management Source: http://www.flickr.com/photos/kydd/
  21. 21. Example: Imagebar Requirements: ➲ Headline ● dynamic numbers of pages (ToggleButtonBar) ● Filter Interface (Checkboxes) ● Container for visible childrens ● Thumbs (Childrens) ●
  22. 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. 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. 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. 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. 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. 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. 28. Working with data Source: http://www.flickr.com/photos/blude/
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 38. The End Source: http://www.flickr.com/photos/moogan/
  39. 39. The End QUESTIONS?
  40. 40. The End Part 2 Thanks :-)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×