Styling and skinning overview

Version 3.7

About styling and skinning

Creating an alternate visual appearance to components gives a unique branding value to your application. Styling and skinning are two approaches for changing the look of Flex components. Styles are used to change the appearance of a single component or apply them across all components. The appearance of components is changed using Cascading Style Sheets (CSS). In Flex 4, skins control all visual elements of a component including the layout. The new skinning model gives developers greater control over the appearance and layout of their components. With custom skins you can change the look of your application including adding background colors and images, borders, and so on. The decoupling of display logic with skins is one of the most valuable architectural enhancements in Flex 4. This decoupling allows you to create an unlimited number of skins for each of the Spark-based components. You can then declare a different default skin for each instance of the same component or even swap skins on-the-fly.

The skin class of a component defines the visual appearance of a component. Modifying the skin class of a component enables you to change just the visual appearance of a component without affecting the business logic or behavior of the component. Creating a unique appearance for components involves creating a new skin class or modifying an existing skin class. The source code for the default skins used by all the components in ArcGIS API for Flex such as navigation, scale bar, editor, attribute inspector, template picker, and so on, are provided with the API download. These skins can be used as a starting point to create a custom look and feel for your application. There are some alternate skins available in the download that can readily be used in your applications. The source code for the skin classes can be found under the <Extracted_API_Download_Location>/src/com/esri/ags/skins folder. See the following screen shot:

Skins directory structure from src folder

To get a better understanding of the Flex framework's styling and skinning architecture, read Adobe's Enhancing the user interface.

For specific information on how to change the appearance of the different ArcGIS API for Flex components, see Navigation or ScaleBar.

Additional references