SparkSkin HostComponent - Null ressource issue

I got an error when I tried to access to the hostComponent's elements in my SparkSkin class (null reference).

My itemRenderer :

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/m开发者_StackOverflowxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         horizontalAlign="center"
         creationComplete="main()">

    <fx:Script>
        <![CDATA[

            [Bindable]
            public var progress:Number;

            public function getProgress():Number
            {
                return data.@progress;
            }

            //Define a property for returning the new value to the cell.
            public var result:Boolean=false;

            public function main():void{                
                progress = Number(data.@progress);
                editor.setProgress(Number(data.@progress), 100);
            }


        ]]>
    </fx:Script>

    <fx:Style source="../css/progressbar.css" />
    <!-- Moving Progress Bar -->
    <mx:ProgressBar id="editor" width="100%" height="20"
                    mode="manual" labelPlacement="center"
                    label="{Number(data.@progress).toString()+'%'}"
                    barSkin="startkit.skin.CustomProgressBarSkin"
                    maskSkin="startkit.skin.CustomProgressBarSkin"/>


</mx:VBox> 

My SparkSkin :

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomProgressBarSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             creationComplete="main()">

    <fx:Metadata>
        <![CDATA[       
            [HostComponent("startkit.renderer.ProgressBarRenderer")]
        ]]>     
    </fx:Metadata>

    <fx:Script>
        <![CDATA[

            import mx.controls.ProgressBar;
            import mx.core.UIComponent;         
            import spark.components.supportClasses.ItemRenderer;            
            import startkit.renderer.ProgressBarRenderer;

            override protected function initializationComplete():void {             
                useChromeColor = true;
                super.initializationComplete();
            }

            public function main():void
            {               
                trace(hostComponent.progress);
            }

        ]]>
    </fx:Script>

    <!-- layer 1: fill -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:fill>            
            <s:SolidColor color="#00FF00" />
        </s:fill>
    </s:Rect>

    <!-- layer 2: border -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0xFFFFFF" alpha="0.9" />
                <s:GradientEntry color="0xFFFFFF" alpha="0.5" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 3: right edge -->
    <s:Rect right="1" top="2" bottom="2" width="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.55" />
        </s:fill>
    </s:Rect>

</s:SparkSkin>

When i try to trace the "progress" attribute on the "hostComponent" resource i got this error:

TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
    at startkit.skin::CustomProgressBarSkin/main()[C:\Documents and Settings\hduborper\Adobe Flash Builder 4.5\kit_demarrage\src\startkit\skin\CustomProgressBarSkin.mxml:28]
    at startkit.skin::CustomProgressBarSkin/___CustomProgressBarSkin_SparkSkin1_creationComplete()[C:\Documents and Settings\hduborper\Adobe Flash Builder 4.5\kit_demarrage\src\startkit\skin\CustomProgressBarSkin.mxml:5]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:13128]
    at mx.core::UIComponent/set initialized()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:1818]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\LayoutManager.as:842]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1180]

I don't know what happens... Please help me :)

I think I see the problem. It looks like you're trying to apply a Spark Skin to an MX Component. This can't be done. Since the MX ProgressBar does not extend SkinnableComponent it will not be able to accept Spark style skins.

In the MX components, the 'skin' style properties are usually expecting a name defined in CSS.

The way I see it, you have a few options:

1. Create a Skin for an MX Component and use that.
2. Create a Spark version of the ProgressBar and use that instead.