3 Replies Latest reply on Oct 22, 2010 12:24 AM by Shongrunden

    Extending Components

    daslicht Level 2

      Hello,

       

      I have implemented a animated Horizontal Spark List (http://forums.adobe.com/thread/738324?tstart=0)

       

      Now I like to go one step further and create a Class which extends the Spark List, so that I can reuse it later.

       

       

      I have the following, but I get errors that the viewport of the scroller is null.

       

      How do I initialze such component so that anything is working?

       

      package
      {
           import flash.events.Event;
           import flash.events.MouseEvent;
          
           import mx.events.EffectEvent;
           import mx.events.FlexEvent;
          
           import spark.components.HScrollBar;
           import spark.components.List;
           import spark.effects.Animate;
           import spark.effects.animation.MotionPath;
           import spark.effects.animation.SimpleMotionPath;
           import spark.effects.easing.Power;
          

           [Bindable]
           public class HAnimList extends List
           {
                private const FUDGE_FACTOR:Number = 0.5;
                private var scrollbar:HScrollBar;
                private var max:int;
                private var tempSliderPos:int = 0;
                private var anim:Animate;
                private var lock:Boolean;
                private var pth:SimpleMotionPath;
                private var currentPos:int;
               
                protected function scrollbar_changeEndHandler( e:FlexEvent ):void
                {
                     if( e.target.value > tempSliderPos  )
                     {
                          trace('tempSliderPos '+tempSliderPos+' e.target.value '+e.target.value)
                          //if(!lock) next();
                          pth.valueTo = e.target.value;
                          pth.valueFrom = tempSliderPos;
                          anim.play();    
                         
                          tempSliderPos = e.target.value;
                         
                     }else{
                          trace('tempSliderPos '+tempSliderPos+' e.target.value '+e.target.value)
                          //if(!lock) prev();
                          pth.valueTo = e.target.value;
                          pth.valueFrom = tempSliderPos;
                          anim.play();    
                          tempSliderPos = e.target.value;
                         
                     }
                }
               
                private function fudgeMouseWheel( event:MouseEvent ):void
                {
                     event.delta *= FUDGE_FACTOR;    
                     if( event.delta >0){
                          if(!lock)  next();
                     }else{
                          if(!lock)  prev();
                     }
                }
               
               
               
                protected function next():void
                {
                     currentPos = this.scroller.viewport.horizontalScrollPosition;
                     pth.valueTo = currentPos+250;
                     pth.valueFrom = currentPos;
                     anim.play();
                     scrollbar.value += 250;
                     tempSliderPos += 250;
                }
               
               
               
                private function prev():void
                {
                     currentPos = this.scroller.viewport.horizontalScrollPosition;
                     pth.valueTo = currentPos-250;
                     pth.valueFrom = currentPos;
                     anim.play();    
                     scrollbar.value -= 250;
                     tempSliderPos -= 250;
                }
               
               
               
                private function animend_handler( e:EffectEvent ):void
                {
                     this.lock = true;
                }
               
               
               
                private function animstart_handler( e:EffectEvent ):void
                {
                     this.lock = false;
                }
               
               
               
                public function HAnimList()
                {
                     super();
                     lock = false;
                    
                     //init animation
                     pth = new SimpleMotionPath();
                     pth.property = "horizontalScrollPosition";
                     anim = new Animate();
                     anim.duration = 500;
                     trace( this.scroller );
                    anim.target = this.scroller.viewport;
                     anim.easer = new  Power(0.5 , 8); //easeinfactor, exponent
                     anim.addEventListener(EffectEvent.EFFECT_START, animstart_handler );
                     anim.addEventListener(EffectEvent.EFFECT_END, animend_handler );*/
                    
                     //init scrollbar
                     scrollbar = new HScrollBar();
                     scrollbar.snapInterval = 250;
                     scrollbar.stepSize = 250;
                     scrollbar.width = this.width;
                     scrollbar.minimum = 0;
                     scrollbar.maximum = max;
                     scrollbar.addEventListener( FlexEvent.CHANGE_END , scrollbar_changeEndHandler );
                    
                    
                     this.addEventListener( MouseEvent.MOUSE_WHEEL, fudgeMouseWheel, true );
                    
                     max=this.scroller.viewport.contentWidth-250;
                    
                     this.addChild( scrollbar );
                    
                    
                    
                }
               
               
           }
          
          
          
          
      }

        • 1. Re: Extending Components
          Shongrunden Adobe Employee

          Scroller is a skin part on the spark List so I don't think it will be available until partAdded().  If you move your logic from the constructor to override partAdded you should be able to access it, but you will run into other errors.  For example this.addChild() won't work instead you should look into the spark skinning architecture and move the scrollbar to a custom skin part.

           

          This article is a good start: http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

          • 2. Re: Extending Components
            daslicht Level 2

            Hi, I know how to skin , but how could I override the default behaviour in a skin ? Lets say I want to add a animation when you scroll?

            • 3. Re: Extending Components
              Shongrunden Adobe Employee

              In your case I would probably custom skin your HAnimList and remove the Scroller so you're dataGroup skin part would look like this:

               

                      <s:DataGroup id="dataGroup" clipAndEnableScrolling="true" left="0" top="0" right="0" bottom="0" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                          ...
                      </s:DataGroup>

               

              Then make a new skin part for the HScrollBar and hook up your scrolling logic via the dataGroup rather than via a Scroller, so for example this...

               

                  anim.target = this.scroller.viewport;

               

              would become...

               

                  anim.target = this.dataGroup;

               

              Then move the logic in your constructor to the appropriate time in partAdded()