Creating custom Spark skins as MXML components in Adobe Flex (Spark architecture) involves extending the SparkSkin class or another relevant skin class and using MXML to define the visual appearance of the component. Spark skins separate logic from presentation using the "skinning architecture" introduced in Flex 4.
Here's a step-by-step guide to creating custom Spark skins in MXML:
✅ 1. Understand Spark Skinning Architecture
Spark components are built around skinnable components and separate logic (component class) from appearance (skin class).
-
Component class: Logic, properties, and states.
-
Skin class: Layout, visual elements, and states.
✅ 2. Create a Skinnable Component (if needed)
You can create a new component that supports skinning, or use an existing one like Button, Panel, etc.
Example custom component:
package com.example.components {
import spark.components.SkinnableContainer;
[SkinState("normal")]
[SkinState("disabled")]
public class MyCustomComponent extends SkinnableContainer {
override protected function getCurrentSkinState():String {
return enabled ? "normal" : "disabled";
}
}
}
✅ 3. Create the Skin in MXML
Create a new MXML file that extends SparkSkin or Skin.
Example: MyCustomSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="100" minHeight="30"
alpha.disabled="0.5">
<!-- Host component reference -->
<fx:Metadata>
<![CDATA[
[HostComponent("com.example.components.MyCustomComponent")]
]]>
</fx:Metadata>
<!-- States -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!-- Visual Content -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="0x3399FF" />
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
text="My Custom Component"
horizontalCenter="0" verticalCenter="0"
color="0xFFFFFF"/>
</s:SparkSkin>
✅ 4. Link the Skin to the Component
You can set the skin using:
-
[SkinClass]metadata -
Programmatically using
setStyle("skinClass", ...) -
In MXML markup via
skinClassproperty
Example (using metadata):
[SkinClass("com.example.skins.MyCustomSkin")]
public class MyCustomComponent extends SkinnableContainer {
...
}
Or in MXML:
<components:MyCustomComponent skinClass="com.example.skins.MyCustomSkin"/>
✅ 5. Compile and Test
Ensure your project includes both:
-
MyCustomComponent.as -
MyCustomSkin.mxml
Run the application and verify that your skin is applied and reacts to states (e.g., disabled).
📝 Tips
-
Use
labelDisplay,contentGroup, etc. when skinning Spark components—they're often required parts. -
Support states (
over,down,disabled) in your skins for interactivity. -
You can also define custom parts using
@SkinPartin the component and reference them byidin the skin.
📦 Example Use in Application
<fx:Declarations>
<components:MyCustomComponent id="myComponent" />
</fx:Declarations>
<s:Application xmlns:components="com.example.components.*"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
<components:MyCustomComponent width="200" height="50"/>
</s:Application>
If you tell me which component you're trying to skin (e.g., Button, List, CustomComponent), I can provide a more targeted example.
Follow us for more...
