Setting up a default skin on a custom Flex component

In my previous post I was building a custom component overlay component, which was animated through a custom skin. As stated in the closing arguments, the component will work fine as long as the skin gets attached to the component by setting the the skinClass property. However you don’t have to do that for none of the standard flex components. They all come with a default skin, so they will work even if you don’t attach any skin to them. So this is obviously possible and fortunately the docs tell us how to do it.

Flex includes a global style sheet, named defaults.css, inside the framework.swc file in the /frameworks/libs directory. This global style sheet contains style definitions for the global class selector and type selectors for most Flex components. Flex implicitly loads the defaults.css file and applies it to all Flex applications during compilation.

One of the most common ways for you to distribute your custom MXML and ActionScript components is to create a SWC file. A SWC file is an archive file of Flex components that make it easy to exchange components among Flex developers. You need to exchange only a single file, rather than the MXML or ActionScript files, images, and other resource files. The SWF file inside a SWC file is compiled, which means that the code is hidden from casual view.

A SWC file can contain a local style sheet, named defaults.css, that contains the default style settings for the custom components defined within the SWC file. When Flex compiles your application, it automatically applies the local defaults.css to the components in your SWC file. In this way, you can override the global defaults.css style sheet with the local version in your SWC file.

The only requirements on the local version are:

  • You can include only a single style sheet in the SWC file.
  • The file must be named defaults.css.
  • The file must be in the top-most directory of the SWC file.

Steps to reproduce for packaging my custom component:

1. Create a new Flex Library Project and name it overlay.
2. Copy the component and the skin which you want to keep as default inside the library project. (Make sure to keep the same directory structure as in the previous project).


3. Inside the default package create a new CSS file and name it defaults.css.

4. Set the default skin for the overlay component inside the CSS file as follows:

/* CSS file */
@namespace overlay "ro.a223.overlay.comp.*";
overlay|Overlay
{
	skinClass: ClassReference("ro.a223.overlay.skin.OverlayRectangleSkin");
}

5. Go to the compiler settings and add (Project/Properties/Flex Library Compiler) and add an additional argument to the compiler as follows:

-include-file defaults.css defaults.css

6. Build the project. The packed .swc file will be in the bin folder.

To use the packed component create a new project, drop the swc inside the libs folder, declare an instance of the component inside the main application. Do not set the skin class since it has already been set.

<overlay:Overlay 
	width="200"
	height="100"
	x="10"
	y="10"
	cornerRadius="5"
	filledElementColor="0xCC0000"
	info="Loading...">
</overlay:Overlay>

To override the default skin copy the other skin under the default package (or declare a dedicated skin directory). Set the skinClass of the component to point to the new skin.

<overlay:Overlay 
	width="200"
	height="100"
	x="10"
	y="120"
	cornerRadius="10"
	filledElementColor="green"
	info="Processing..."
	skinClass="OverlayCircleSkin">
</overlay:Overlay>

The project should look something like this.

Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

*