Flex 4, Spark Architecture Overview: Notes

Based on a great article by Deepa Subramaniam.

Intro

• Every Spark component consists of the skin class (defined declaratively via an MXML file) and a component class (defined via ActionScript).
• Previous Flex component architecture and component set was MX, aka as Halo.
• Spark components extend the MX class mx.core.UIComponent, and so Spark containers can hold MX components and vice-versa, and Spark and MX components can live side-by-side. The same component lifecycle methods, properties, and events that existed for the MX components apply to Spark components.

Skinning

Three key elements— data, parts, and states—define the skinning contract upon which Spark is founded:

• Every Spark component class:
  
  
  • defines the data the component expects, 
  • defines the constituent parts that make up the component (aka skin parts), and 
  • defines the states the component can enter and exit; responsible for all of the event handling needed to identify when a state change has occurred and ensures the component is put in the right state.
• The corresponding skin class:
  
  
  • how that data is visually displayed, 
  • how the parts are laid out and visualized (it instantiates the parts), and 
  • what the component looks like as it enters and exits different states.

New Capabilities of Spark Architecture

• Effects in Spark: faster and more capable; can be invoked directly within Spark skin classes through state-based transitions.
• New layouts
  
  
  
  • APIs for robust 2D and 3D transformations,
  • the ability to easily implement custom layouts
  • assignable layout
  
  
• FXG and MXML Graphics: graphics library that captures drawing primitives as simple MXML tags. FXG is a declarative XML syntax for defining vector graphics in applications built with Flex and can be created by Adobe Illustrator (or manually) and understood by other Adobe CS tools as well as by FlashPlayer (and probably created and read by Catalyst).

What Next
For more information, read references from the base article  by Deepa Subramaniam. For examples and details on skinning read article by Ryan Frishberg. For more information on FXG, read this Adobe well written documentation.