I am dipping my toes into skinning and getting cold feet. I made a very simple component StepIndicator to show what step in a process you are on. It all seems like it should just work, but I get this error "ArgumentError: Undefined state 'doing'". Any ideas?
########### Main File
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<components:StepIndicator skinClass="ArrowStepIndicator" y="0" currentState="doing"/>
<components:StepIndicator skinClass="ArrowStepIndicator" y="40"/>
<components:StepIndicator skinClass="ArrowStepIndicator" y="80"/>
</s:Application>
########### StepIndicator.as
package menu.components {
import spark.components.Label;
import spark.components.supportClasses.SkinnableComponent;
[SkinState("not_done")]
[SkinState("doing")]
[SkinState("done")]
public class StepIndicator extends SkinnableComponent {
[SkinPart(required="true")]
public var text : Label;
}
}
########### ArrowStepIndicator.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("StepIndicator")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="not_done" />
<s:State name="doing" />
<s:State name="done" />
</s:states>
<s:Path data="M 0 0 L 10 0 L 10 29 L 0 29 L 10 15">
<s:fill>
<s:SolidColor color="#55FF55"/>
</s:fill>
</s:Path>
<s:Rect top="0" bottom="0" left="10" right="10">
<s:fill>
<s:SolidColor color="#99FF99"/>
</s:fill>
</s:Rect>
<s:Path data="M 0 0 L 10 15 L 0 29" right="0">
<s:fill>
<s:SolidColor color="#55FF55"/>
</s:fill>
</s:Path>
<s:Label id="text" paddingLeft="15" paddingRight="15" horizontalCenter="0" verticalCenter="0"/>
</s:Skin>
