Define custom states for skins to use with degrafa

[pulse00]

hi,

i'm currently trying to skin a couple of my components using degrafa. most of the sample code uses buttons and their pre-defined flex states like overSkin, downSkin, selectedUpSkin etc.

In my case i'd need much more different states which are available for the button, that's why i would need to implement my own custom states.

The adobe docs say you can define your custom states like this:

[Style(name="mySkin", type="Class", inherit="no", states="foo, bar")

The test component i've written looks like that now:

<?xml version="1.0" encoding="utf-8"?>
<mx:UIComponent xmlns:mx="http://www.adobe.com/2006/mxml">
  
  <mx:Metadata>
    [Style(name="mySkin", type="Class", inherit="no", states="foo, bar")] 
  </mx:Metadata>
  
  <mx:states>  
    <mx:State name="foo"/>
    <mx:State name="bar"/>
  </mx:states>
  
</mx:UIComponent>

Here's the part of the degrafa skin:

    <geometry>
        <GeometryComposition state="bar">
            <RegularRectangle fill="{solidFill}" height="{aheight}" width="{awidth}"/>              
            <RegularRectangle fill="{diagFill}" height="{aheight}" width="{awidth}"/>              
        </GeometryComposition>

        <GeometryComposition state="foo">
            <RegularRectangle fill="{solidFill}" height="{aheight}" width="{awidth}"/>
            <RegularRectangle fill="{diagFill}" height="{aheight}" width="{awidth}"/>              
        </GeometryComposition>
    </geometry>

Unfortunately, when applying the skin to the component using mySkin="myDegrafaSkinClass", no skin is applied to it.

It works without any problem if i use the pre-defined states, ie if i use the button and use the overSkin etc states.


Anyone knows how this is done ?


thanks!

[wvxvw]

I'm afraid you'll need to define states inside myDegrafaSkinClass, because, as it seems now the states aren't bound to anything... though, I'm not a pro with Degrafa, so, I can't tell for sure... Another suggestion, I'd make the component in AS, override the setStyle() and look what I'm getting in there...

[pulse00]

thanks for the hint, myDegrafaSkinClass eventually subclasses ProgrammaticSkin which doesn't seem to let me define states. i'm getting

Could not resolve <mx:states> to a component implementation.

inside the class.

I guess i'll post in the degrafa group and see what they say.

[wvxvw]

Another guess... What happens if you do:

<mx:Style>
     MyComponent {
        foo: ClassReference("myDegrafaSkinClass");
        bar: ClassReference("myOtherDegrafaSkinClass");
     }
  </mx:Style>

EDIT:
http://livedocs.adobe.com/flex/3/htm..._7.html#224961
OK, kind of figured that out..
So, what you needed to do is to define what happens once the component enters some specific state. I.e. Your <state/> tags ware empty, but, you needed to do something like this (in the skinning class)

<mx:State name="over">
            <degrafa:GraphicSurface/>
            ..... define what to do when this state is entered .... 
</mx:State>