"The Devil is in the Details" - Mike Jones (Flex Components)

Day 2 of Flash on the Beach. The weather was crazy - balmy yet windy with sweeping showers. You arrived as if you've walked out of the Singaporean rainy season, damp with both rain and sweat.

First up for the day was Mike Jones to talk about Flex components...

• AS3/Flex 2 components - the architecture now works!


• Create and extend with MXML or AS


• Core methods
  
  
  
  • Constructor() - replaces init()
  
  
  • createChildren() - same as before, instantiate children
  
  
  • measure()
    
    
    
    • replaces size()
    
    
    • calling measure() or invalidateSize() won't necessarily size
    
    
    
    
  • updateDisplayList() - replaces draw()
  
  
  • targetChrome()
    
    
    
    • deals with the chrome around containers
    
    
    • doesn't effect anything in it (i.e. the panel)
    
    
    
    
  • commitChanges() - if you change anything, this will do changes on the next frame
  
  
  
  
• To implement the components, you declare a namespace in the MX:Application tag
  
  
  
  • Lists path to the package
  
  
  • Its bits and bobs are now available in the intellisense
  
  
  
  
• Next step is to allow users to manipulate
  
  
  
  • Main metadata tags
    
    
    
    • [Bindable]
      
      
      
      • Is equivalent of [Bindable(event="propertyChange")]
      
      
      • [Bindable(event="FCChangeEvent")]
        
        
        
        • For custom events
        
        
        • Create your own event class to handle this
        
        
        
        
      • [Inspectable]
        
        
        
        • Same as AS2
        
        
        • Few extra properties (incl category)
        
        
      • [Event]
        
        
        
        • [Event(name="FGClickEvent", type="flash.events.EVENT")]
        
        
        • May want to make a public static
          
          
          
          • Helps assist avoiding code spaghetti and is easy to change
          
          
          
          
        • Events also
          
          
          
          • Bubble!
          
          
          • Can be cancelled
          
          
          
          
• Customising components
  
  
  
  • Inherit, composite or customise?
  
  
  • Overriding methods
    
    
    
    • invalidateDisplayList()
    
    
    • invalidateProperties()
    
    
    • invalidateSize()
      
      
      
      • Calls the redraw but doesn't notify parent
      
      
      
      
• IMXML Object
  
  
  
  • Can create a bespoke component
  
  
  • Has one public method called initialized()
  
  
  • Can't create in the IDE
    
    
    
    • Create any other component type in the IDE
    
    
    • Change by hand to type <mx:Object>
    
    
  • Method receives 2 params Initalized(document:Object, id:String)
  
  
  
  
• A few components are different from traditional components
  
  
  
  • One is IMXMLObject (above)
  
  
  • Another is Template component
  
  
  • Based on UIComponent or IDDeferredInstance
  
  
  • You can restrict parts of it and what can be in it
    
    • E.g. restrict to only buttons can be in it
    
    
  • Throws an exception in IDE and at runtime if this restriction is broken
  
  
  
  
• IDeferredInstance is different
  
  
  
  • Slightly different syntax in how you restrict
  
  
  • Bit more flexible as it can be modified on the fly
  
  
  
  
• Detail - Documents, Samples and Source
  
  
  
  • Assume no prior knowledge by the user of your component
  
  
  • Just because it makes sense to you, doesn't mean it will make sense to your users
  
  
  • Samples give a chance for you to catch bugs before it goes out
  
  
  • Keep it clear and simple
  
  
  • Treat every component as a black box
  
  
  • Try to provide some sort of context
    
    
    
    • Clear and transparent naming
    
    
  • ..args allows any length of args (check this)
  
  
  
  
• Packaging your components
  
  
  
  • Still SWCs
  
  
  • Create with Flex library project
    
    
    • Dump all code and assets into directories
    
    
    
    
  • If compiling from the command line - needs a manifest.xml (eek!)
  
  
  • Go into classes in properties and do it that way - automatically compiles them
    
    • You can choose library paths, asset by asset
    
    
  • Best way to distribute is SWC
  
  
  • Creating a SWC and adding it to design is how you get live preview
  
  
  • SWCs are zip based
  
  
  
  
• Add a bit of polish
  
  
  
  • Custom icon [IconFile ... ]
  
  
  • 18x18 PNG file