HOW DEVELOPERS SKIN FLEX APPLICATIONS

HOW DEVELOPERS SKIN FLEX APPLICATIONS

You customise the look of an application using styles and skins . The Flex® 4 framework contains two sets of components: the original MX ... 01:25

You customise the look of an application using styles and skins. The Flex® 4 framework contains two sets of components: the original MX components, which you can customise by setting styles, and the new Spark components, which you customise by creating custom skins that define the look and layout of a component and then associate the skins with the components using styles. Spark skins are typically created with MXML and use graphics tags to draw the graphic elements. The graphics code can be written by a programmer or generated by a designer using Adobe Photoshop® CS5, Adobe Illustrator® CS5 or Adobe Fireworks® CS5 software. Learn More

SEE HOW IT'S DONE Here is the code for an application that creates and uses a custom component skin. Main.mxml http://ns.adobe.com/mxml/2009

"
  xmlns:s="library://ns.adobe.com/flex/spark">
  
  
  
     x="122" y="34"/>
PlusButtonSkin.mxml (in /com/adobe/samples/skins/)
http://ns.adobe.com/mxml/2009
"
  xmlns:s="library://ns.adobe.com/flex/spark" >
  
    [HostComponent("spark.components.Button")]
  
  
    
    
    
    
  
  
    
      
    
    
      
    
  
  
    
      
    
  
  
    
      
    
  
Explore the code for an application that uses custom component skins: Download the sample application files.
Get a detailed explanation of the code. LEARN TO DO IT YOURSELF Video: Learn about Skinning
Tutorial: Skin a Flex 4 Application

Learn More

FIND MORE RESOURCES Browse the Flex Developer Centre
Explore Code in Tour de Flex
Subscribe to the News Flash Newsletter