| Flex 2 Developer's Guide > Customizing the User Interface > Using Skins > About skinning | |||
|
|||
|
|||
|
|||
Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of images, SWF files, or class files that contain drawing API methods.
Skins define parts or entire components in various states. For example, a Button control has many skins, each representing a state for the button. These skins include downSkin, upSkin, and overSkin, and represent the way a button appears when it is down, up, and when the mouse is over the button. These three default skins appear as follows:
Other controls have similar states. For example, RadioButton and RadioButton controls, which derives from Button, also have upSkin, downSkin, and overSkin properties. A control such as ComboBox also has skins the define the appearance of the control when it is in certain states. These skins include disbaledSkin, downSkin, and overSkin. Controls that have no direct hierarchical relationship to Button, such as Accordion, have skins such as borderSkin and focusSkin.
Skins are applied as style properties. You apply them using MXML tag properties, the StyleManager class, <mx:Style> blocks, or in style sheets. Most complex skinning uses style sheets to organize and apply the skins to a Flex application. Style sheets can be loaded at compile time or at run time. For information on loading style sheets at run time, see Loading style sheets at run time.
There are two types of skins: graphical and programmatic. Graphical skins are images that define the appearance of the skin. These images can JPEG, GIF, or PNG files, or they can be symbols embedded in SWF files.
You draw programmatic skins by using ActionScript statements and define these skins in class files. To change the appearance of controls that use programmatic skins, you edit an ActionScript class file and compile it with your Flex application.
One advantage of programmatic skinning is that it provides you with a great deal of control over styles. For example, you cannot control the radius of a Button control's corners with style sheets or graphical skins. You can also develop programmatic skins directly in your Flex authoring environment or any text editor, without using a graphics tool such as Adobe Flash. Programmatic skins also tend to use less memory because they contain no external image files.
Icons are special style properties that are treated similarly to skins. Icon style properties (such as icon, upIcon, and downIcon) define a visual element added to a control. This visual element does not replace the appearance of the component's skin, but is added to that skin.
For Button controls, icons enhance a button's appearance. They are added to the button and displayed next to the button's label. For CheckBox and RadioButton controls, icons replace the appearance of the checkbox or button on the control. They do not affect the appearance of the control's label.
For list-based controls, icons define the appearance of an item's graphical representation in the list. For containers, icons define a symbol for the container in some navigator containers (such as in the tab of a TabNavigator or the header of an Accordion).
For Buttons, setting the icon property overrides all other icon settings such as upIcon and downIcon.
Flex 2 includes the following graphical and programmatic source files for skins:
Base skin classes in the mx.skins package These abstract skin classes define the basic functionality of skin classes in Flex. For more information, see Programmatic skinning.
Programmatic Halo skins in the mx.skins.halo package These concrete skin classes extend the base skin classes in the mx.skins package. You can extend or edit these skins to create new programmatic skins based on the default Flex look and feel. For more information, see Programmatic skinning.
HaloClassic skins These skins were used in Flex 1.x. You can retain the look of Flex 1.x applications by using these skins. The HaloClassic.swc file is located in the framework/themes directory. For more information, see About themes.
Graphical Aeon theme The Aeon theme includes the AeonGraphical.css file and the AeonGraphical.swf file that defines the skin symbols. These are in the framework/themes directory. In addition, Flex includes the FLA source file for the AeonGraphical.swf file. For more information, see About themes.
You can use these files to create skins based on the Flex look and feel, or you can create your own by following the instructions in this topic.
For additional information about skinning, see www.adobe.com/go/flex2_skinning.
Flex 2.01
