11 Replies Latest reply on Feb 7, 2010 11:15 AM by rfrishbe

    Required Skin states missing

    monkeymagiic Level 1

      Hi Adobe peoples

       

      I recently did an update from Flex 4.0 (early build) to Flex 4.0 (build 13875) and while of course I had to make a few changed to accomodate the new build I am having problems with my Skins (buttons, backgrounds etc...).

       

      The error I get is obvious of course:


      .The required skin state 'disabled' is missing.

      .The required skin state 'down' is missing.

      .The required skin state 'over' is missing.

      .The required skin state 'up' is missing.

       

      Now I have declared all these states though it is worth noting that I create all my skins in pure AS3 (with no mxml), is there a specific way in the metadata to tell the class I have these states!

       

      Example of my class:

       

      package com.skysongs.mediaplayer.view.skins.button
      {
           
           import flash.events.Event;
           
           import mx.events.FlexEvent;
           import mx.events.StateChangeEvent;
           import mx.graphics.GradientEntry;
           import mx.graphics.LinearGradient;
           import mx.states.State;
           import mx.states.Transition;
           
           import spark.components.supportClasses.Skin;
           import spark.effects.AnimateColor;
           import spark.primitives.BitmapImage;
           import spark.primitives.Rect;
      
           /* == METADATA == */
           
           /* Reference to host component */
           [ HostComponent("com.skysongs.mediaplayer.view.controls.button.ButtonWithData") ]
           
           /* Reference to available Styles */
           
           //Colors
           [Style(name="backgroundColorTop",type="Number",format="Color",inherit="yes")]
           [Style(name="backgroundColorBottom",type="Number",format="Color",inherit="yes")]
           
           //Icons
           [Style(name="stateOneIcon",type="*",format="Class",inherit="yes")]
           [Style(name="stateTwoIcon",type="*",format="Class",inherit="yes")]
           
           /**
            *     Two State Rounded Border Skin
            * 
            *     @langversion ActionScript 3.0
            *     @playerversion Flash 10.0.0
            *
            *     @author Tyrone Neill <tyroneneill@gmail.com>
            *     @since  22.10.2010
            */
           public class TwoStateRoundedBorderSkin extends Skin
           {
                /* ==================================================== */
                /* = PRIVATE VARIABLES                                        = */
                /* ==================================================== */
                
                /**
                 * Main Container
                 * @private
                 * */
                private var _mainContainer:Rect;
                /**
                 * Icon Image
                 * @private
                 * */
                private var _iconImage:BitmapImage;
                /**
                 * Icon Image Source
                 * @private
                 * */
                private var _iconImageSource:Class;
                /**
                 * Background Top Gradient
                 * @private
                 * */
                private var _bgTopGradient:GradientEntry;
                /**
                 * Background Bottom Gradient
                 * @private
                 * */
                private var _bgBottomGradient:GradientEntry;
                
                /* ==================================================== */
                /* = PUBLIC METHODS                                             = */
                /* ==================================================== */
                
                /**
                 * Constructor
                 * */
                public function TwoStateRoundedBorderSkin()
                {
                     super( );
                }
                
                /**
                 * Dispose Skin
                 * @public
                 * */
                public function dispose( ):void
                {
                     removeEventListeners( );
                     
                     
                     _iconImageSource = null;
                     if( _iconImage ) {
                          
                          _iconImage.source = null;
                     }
                     
                     removeAllElements( );
                }
                
                /* ==================================================== */
                /* = OVERRIDE METHODS                                      = */
                /* ==================================================== */
                
                /**
                 * Create Children
                 * @inheritDoc
                 * */
                override protected function createChildren() : void
                {
                     super.createChildren( );
                     
                     _mainContainer = new Rect( );
                     addElement( _mainContainer );
                          
                     _iconImage = new BitmapImage( );
                     addElement( _iconImage );
                }
                /**
                 * Children Created
                 * @inheritDoc
                 * */
                override protected function childrenCreated() : void
                {
                     super.childrenCreated();
                     
                     this.states = setupSkinStates( [ 'disabled', 'down', 'over', 'up' ] );
                     
                     _mainContainer.fill = fillGradient( getStyle( 'backgroundColorTop' ), getStyle( 'backgroundColorBottom' ) );
                     
                     this.transitions = setupSkinTransitions();
                     
                     /* Setup Static Properties */
                     _mainContainer.percentHeight = 100;
                     _mainContainer.percentWidth = 100;
                     _mainContainer.alpha = 0.8;
                     
                     /* Add Event Listeners */
                     addEventListeners( );
                }
                /**
                 * Commit Properties
                 * @inheritDoc
                 * */
                override protected function commitProperties() : void
                {
                     super.commitProperties( );
                     
                     _mainContainer.radiusX = hostComponent.getStyle( 'cornerRadius' );
                     _mainContainer.radiusY = hostComponent.getStyle( 'cornerRadius' );
                }
                /**
                 * Update Displaylist 
                 * @inheritDoc
                 * */
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                {
                     super.updateDisplayList( unscaledWidth, unscaledHeight );
                     
                     _iconImage.x = ( unscaledWidth / 2 ) - ( _iconImage.width / 2 );
                     _iconImage.y = ( unscaledHeight / 2 ) - ( _iconImage.height / 2 );
                }
                
                /* ==================================================== */
                /* = OVERRIDE METHODS                                      = */
                /* ==================================================== */
                
                /**
                 * Setup Skin States
                 * @private
                 * */
                private function setupSkinStates( states:Array  ):Array
                {
                     var newStates:Array = [ ];
                     
                     var i:int = 0;
                     for( i; i < states.length; i++ ) {
                          
                          newStates.push( new State( { name:states[ i ] } ) );
                     }
                     
                     return newStates;
                }
                /**
                 * Fill Gradient
                 * @private
                 * */
                private function fillGradient( color1:uint = 0x333333, color2:uint = 0x000000 ):LinearGradient
                {
                     var linGradient:LinearGradient = new LinearGradient( );
                     linGradient.rotation = 90;
                     
                     _bgBottomGradient = new GradientEntry( color1 );
                     _bgTopGradient = new GradientEntry( color2 );
                     
                     linGradient.entries = [ _bgBottomGradient, _bgTopGradient ];
                     
                     return linGradient;
                }
                /**
                 * Handle Icon
                 * @private
                 * */
                private function handleIcon( state:int ):void
                {
                     switch( state )
                     {
                          case 0:
                               _iconImageSource = getStyle( 'stateOneIcon' ); 
                               break;
                          case 1:
                               _iconImageSource = getStyle( 'stateTwoIcon' );
                               break;
                     }     
                     invalidateDisplayList( );
                     
                     _iconImage.source = _iconImageSource;
                }
                /**
                 * Add Event Listeners
                 * @private
                 * */
                private function addEventListeners( ):void
                {
                     addEventListener( Event.REMOVED_FROM_STAGE, onEvtHandler, false, 0, true );
                     addEventListener( FlexEvent.CREATION_COMPLETE, onEvtHandler, false, 0, true );
                     addEventListener( StateChangeEvent.CURRENT_STATE_CHANGE, onEvtHandler, false, 0, true );
                }
                /**
                 * Remove Event Listeners
                 * @private
                 * */
                private function removeEventListeners( ):void
                {
                     removeEventListener( Event.REMOVED_FROM_STAGE, onEvtHandler, false );
                     removeEventListener( FlexEvent.CREATION_COMPLETE, onEvtHandler, false );
                     removeEventListener( StateChangeEvent.CURRENT_STATE_CHANGE, onEvtHandler, false );
                }
                /**
                 * On Event Handler
                 * @private 
                 * */
                private function onEvtHandler( evt:Event ):void
                {
                     switch( evt.type )
                     {
                          case FlexEvent.CREATION_COMPLETE:
                               switchView( currentState );
                               break;
                          case StateChangeEvent.CURRENT_STATE_CHANGE:
                               switchView( ( evt as StateChangeEvent ).newState );
                               break;
                          case Event.REMOVED_FROM_STAGE:
                               dispose( );
                               break;
                     }
                }
                /**
                 * Switch State
                 * @private 
                 * */
                private function switchView( state:String ):void
                {
                     handleIcon( int(hostComponent.data) );
                }
                /**
                 * Setup Skin Transitions
                 * @private 
                 * */
                private function setupSkinTransitions( ):Array
                {     
                     var trUpToOver:Transition = new Transition( );
                     trUpToOver.fromState = 'up';
                     trUpToOver.toState = 'over';
                     trUpToOver.autoReverse = true;
                     trUpToOver.effect = generateAnimation( [ _bgBottomGradient ], getStyle( 'backgroundColorTop' ), 0xFFFFFF );
                     
                     var trOverToUp:Transition = new Transition( );
                     trOverToUp.fromState = 'over';
                     trOverToUp.toState = 'up';
                     trOverToUp.autoReverse = true;
                     trOverToUp.effect = generateAnimation( [ _bgBottomGradient ], 0xFFFFFF, getStyle( 'backgroundColorTop' ) );
                     
                     return [ trUpToOver, trOverToUp ];
                }
                /**
                 * Generate Animation
                 * @private
                 * */
                private function generateAnimation( targets:Array, colorFrom:Object = null, colorTo:Object = null ):AnimateColor
                {
                     var animColor:AnimateColor = new AnimateColor( );
                     animColor.targets = targets;
                     
                     if( colorFrom ) {
                          
                          animColor.colorFrom = colorFrom as uint ;
                     }
                     if( colorTo ) {
                          
                          animColor.colorTo = colorTo as uint;
                     }
                     return animColor;
                }
           }
      }