I was setting skin class on a host component , but it is giving null point exception

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark SkinnableContainer container.  

     @see spark.components.SkinnableContainer

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<skins:MPLBaseWidgetContainerSkin xmlns:skins="com.directv.mpl.player.chrome.widgets.skins.*" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" minWidth="9" minHeight="9" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="mplbasewidgetskin1_creationCompleteHandler(event)" xmlns:widgets="com.directv.mpl.player.chrome.widgets.*">
    <fx:Metadata>[HostComponent("com.directv.mpl.player.chrome.widgets.MPLWidgetContainer")]</fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[         
            import com.directv.mpl.player.chrome.widgets.MPLStepSliderWidget;
            import com.directv.mpl.player.chrome.widgets.events.MPLSliderEvent;
            import com.directv.mpl.player.metadata.MPLVolumeMetadata;

            import mx.events.FlexEvent;
            /**
             *  @private
             */

            private function updateVolumeChips():void{
                if(metadata){
                    volChip1.alpha = volChip2.alpha = volChip3.alpha = volChip4.alpha = volChip5.alpha = volChip6.alpha = volChip7.alpha = 0;
                    if(!MPLVolumeMetadata(metadata).mute){      
                        var chipIndex:Number = Math.round(MPLVolumeMetadata(metadata).volume / MPLStepSliderWidget.VOLUME_STEP_SIZE);
                        while(chipIndex > 0){
                            this["volChip"+chipIndex].alpha = 1;chipIndex--;
                        }
                    }
                }
            }

            protected function volChip_clickHandler(chipIndex:Number):void
            {
                var evt:MPLSliderEvent = new MPLSliderEvent(MPLSliderEvent.SLIDER_CHANGE);
   开发者_C百科             evt.chipIndex = chipIndex;
                this.dispatchEvent(evt);
            }


            protected function mplbasewidgetskin1_creationCompleteHandler(event:FlexEvent):void
            {
                this.updateView = updateVolumeChips;
            }

        ]]>        
    </fx:Script>
    <skins:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </skins:states>


    <widgets:MPLSparkButton id="volumeTrack" width="100%" height="100%"/>
    <s:HGroup gap="1" x="4" y="9">
        <widgets:MPLSparkButton  width="100%" height="100%" id="volChip1" click="volChip_clickHandler(1)"/>
        <widgets:MPLSparkButton  width="100%" height="100%" id="volChip2" click="volChip_clickHandler(2)"/>
        <widgets:MPLSparkButton  width="100%" height="100%" id="volChip3" click="volChip_clickHandler(3)"/>
        <widgets:MPLSparkButton  width="100%" height="100%" id="volChip4" click="volChip_clickHandler(4)"/>
        <widgets:MPLSparkButton  width="100%" height="100%" id="volChip5" click="volChip_clickHandler(5)"/>
        <widgets:MPLSparkButton  width="100%" height="100%" id="volChip6" click="volChip_clickHandler(6)"/>
        <widgets:MPLSparkButton  width="100%" height="100%" id="volChip7" click="volChip_clickHandler(7)"/>
    </s:HGroup>

</skins:MPLBaseWidgetContainerSkin>

TypeError: Error #1009: Cannot access a property or method of a null object reference. at spark.components.supportClasses::SkinnableComponent/commitProperties()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:427] at com.directv.mpl.player.chrome.widgets::MPLWidgetContainer/commitProperties()[/Users/kodaliasha/Documents/Adobe Flash Builder 4/_workspace/MediaPlayerLibrary/includes/core/MPLCoreSkinUpdateInclude.as:178] at mx.core::UIComponent/validateProperties()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:7933] at mx.managers::LayoutManager/validateProperties()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:572] at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:730] at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]

None of this code actually shows your host component or where you set the skin class.

In the spark architecture, classes are made up of two classes; one is the component class (AKA the Host Component) and the other is the skin class. You've only shown us your skin class.

Somewhere in your component class (the class name is com.directv.mpl.player.chrome.widgets.MPLWidgetContainer based on the code you have provided) you'll want to give that class a skin using the skinClass style. Something like this:

this.setStyle('skinClass',com.directv.mpl.player.chrome.widgets.MPLBaseWidgetContainerSkin);

I would usually add this code in the constructor--for a default skin; although I believe it is also possible to set it via CSS.