Property.state doesn't work

Question

Hallo everybody. I am using Flash Builder not since much time but i learned basilar things.. One of these things is that if i have a flex component and in my applications i have 2 states, state1 and state2, if i want to change a property (es. width) of that component in state1 and i wish it can be different in state2 i can write like this:
width.state1
width.state2
This works always. Now, i just created my own component. The name of this component is "mioPannello":
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
     <![CDATA[
          public var rett_titolo_bottom:int;
          public var rett_centrale_top:int;
          public var rett_centrale_bottom:int;
          public var font_label:Number;
]]>
</fx:Script>
</s:Panel>
As you can see, i just created my 4 properties which i will use in my own skin. The name of this skin is "mioPannello_skin":
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%" bottom="0" creationComplete="aCreazioneCompletata(event)">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <fx:Metadata>
        [HostComponent("componenti.mioPannello")]
    </fx:Metadata>
<fx:Script>
<![CDATA[
import componenti.mioPannello;
import mx.collections.ArrayList;
import mx.events.FlexEvent;
[Bindable]
public var font_label:Number;
public function aCreazioneCompletata(event:FlexEvent):void
     this.rett_titolo.bottom = hostComponent.rett_titolo_bottom;
     this.rett_centrale.top = hostComponent.rett_centrale_top;
     this.rett_centrale.bottom = hostComponent.rett_centrale_bottom;
     this.font_label = hostComponent.font_label;
]]>
</fx:Script>
<s:Rect id="rett_sfondo" height="90%" width="100%" bottom="0">
<s:fill>
<s:SolidColor color="#BDCCD4"/>
</s:fill>
</s:Rect>
<s:Rect id="rett_centrale" height="100%" width="90%" horizontalCenter="0">
<s:stroke>
<s:SolidColorStroke caps="none" color="#FFFFFF" joints="miter" miterLimit="10" weight="1"/>
</s:stroke>
    </s:Rect>
    <s:Rect id="rett_titolo" alpha="0.71" height="100%" width="80%" top="0" horizontalCenter="0">
    <s:fill>
    <s:SolidColor color="#E8EBF2"/>
    </s:fill>
    </s:Rect>
    <s:Label id="titleDisplay"
top="5"
    color="#FFFFFF"
    fontWeight="bold"
    fontFamily="Myriad Pro" fontSize="{font_label}"
    horizontalCenter="0"/>    
</s:SparkSkin>
When i call my component in my application, i can set property values in this way:
<componenti:mioPannello width="100%" height="100%" title="panel title" skinClass="skins.mioPannello_skin" rett_titolo_bottom="15" rett_centrale_bottom="10" rett_centrale_top="30" font_label="12"/>
Everything works good if i have just 1 state, but if, in my application i have 2 states, state1 and state2, the code doesn't work. So, if i write:
<componenti:mioPannello width="100%" height="100%" title="panel title" skinClass="skins.mioPannello_skin" rett_titolo_bottom.state2="5" rett_titolo_bottom="15" rett_centrale_bottom="10" rett_centrale_top="30" font_label="12"/>
rett_titolo_bottom.state2="5" it should change in state2 (or not??) but it doesn't change... It takes always the value 15 as it is in main state.
Why this thing happen??.. I though i just created a normal property... How can i change that property in each different state. I hope you understand my problem and can help me..
Sry for bad english
Thx for all
Max   

Answer 1

Ok, i solved my problem. The problem was that i was applying my properties in the CreationComplete event but now i changed it and i applied the new value through render Event and it works fine.
Thx a lot CoreyRLucier
Max