An even Smoother HSmoothBox

I'm currently working for a large used car publishing company and we're working on some pretty cool UI's that interface ColdFusion ColdSpring and the Endeca Search Engine. I've been meaning to blog for a while about some personal developments but an issue cropped up with the Open Source HSmoothBox component and I wanted to share the issue and my workaround...

HSmoothBox (as found here: http://strawberrypixel.com/blog/?p=21) also has a little sibling component called VSmoothBox and in a nutshell they are like HBox/ VBox components with animated scrolling.

it's part of a composite component that binds it's dataProvider to the HSmoothBox's dataProvider and each time the composite component's dataProvider setter function is called, we invoke hscroller.scrollToItemIndex(0);

the problem came to light when we were using the HSmoothBox with PopupManager which, has its data model injected via BindingUtils.bindProperty(). First time round, all is fine but on take-two of opening the poppedUp HSmoothBox, it throws a wobbly... This was because the injected data model was fetched from the server and the timings just so made it work on it's first view but attempt numero two meant the dataProvider's ArrayCollection was there already waiting and was being injected into the HSmoothBox before it was fully created.

so, inspecting the lovely Open Source code for HSmoothBox, you can see on it's FlexEvent.CREATION_COMPLETE handler an internal "_scroller" object is created which, is required when we call its scrollToItemIndex() function. The culprit was caught!

now I probably should contact the author as well (and I will) but for now here is the little Class that extends HSmoothBox and fixes the issue.

package com.middleweek.component
{
    import containerEx.HSmoothBox;
    
    import mx.events.FlexEvent;
    
    
    /**
     *
     * @author nick.middleweek 16th February 2011
     *
     * This is to fix component functionality by overriding some methods that are prematurely invoked.
     *
     */
    public class HSmoothBox2B extends HSmoothBox
    {
        /**
         * @private
         * Storage variable to test if the creationComplete phase has executed.
         */
        private var creationCompleted : Boolean = false;
        
        
        /**
         * Constructor
         *
         */
        public function HSmoothBox2B ()
        {
            super();
            this.addEventListener( FlexEvent.CREATION_COMPLETE, onCreationComplete );
        }
        
        
        private function onCreationComplete ( evt : FlexEvent ) : void
        {
            this.creationCompleted = true;
        }
        
        
        override public function scrollToItemIndex ( val : int, immediate : Boolean = false ) : void
        {
            if ( creationCompleted == true )
            {
                super.scrollToItemIndex( val, immediate );
            }
        }
        
        
        override public function head () : void
        {
            if ( creationCompleted == true )
            {
                super.head();
            }
        }
        
        
        override public function tail () : void
        {
            if ( creationCompleted == true )
            {
                super.head();
            }
        }
    
    }
}

now HSmoothBox is even smoother!