7 Replies Latest reply on Dec 30, 2009 10:34 AM by amandavoss

    Custom SliderThumb that does not extend Button

    amandavoss

      I need to create a custom SliderThumb that has an increment and a decrement button on the thumb. Instead of the SliderThumb extending Button I would need it to be a composite componenet including two buttons and a label or three buttons. The first two buttons are small arrows for incrementing and decrementing. The last portion takes up most of the visual space and is used for dragging the thumb along the slider. I am having an incredibly hard time getting events from the inc/dec buttons. Is this even possible?

       

      Attached is a visual of the thumb itself which might help the reader understand the use of this control.

        • 1. Re: Custom SliderThumb that does not extend Button
          David_F57 Level 5

          Hi,

           

          First up its xmas, i've been drinking and I gave myself an hour to look at this, so

           

          http://ezflex.net/slider/  sourceview enabled

           

          What you want is pretty simple, as I wasn't sure what value you were incrementing I just created a variable to apply the dec/inc to. This isn't ideal as for a 'special' slider you would inherit the slider component and add public variables to it so they are exposed through the hostcomponent variable. I just used flexglobals to access the variable.

           

           

          protected function button1_clickHandler(event:MouseEvent):void

          {

          FlexGlobals.topLevelApplication.myInt -= 1;

          }

           

          protected function button2_clickHandler(event:MouseEvent):void

          {

          FlexGlobals.topLevelApplication.myInt += 1;

          }

           

          <s:Group width="80" height="40" x="{thumb.x-25}" y="-40">

          <s:Path data="M36.142,9.7c0,2.679-1.086,5.104-2.841,6.859c-1.756,1.755-4.181,2.841-6.859,2.841L18 ,24.125

          L9.842,19.4c-2.679,0-5.104-1.086-6.859-2.841C1.228,14.804,0.142,12.379,0.142,9.7l0,0l0,0c0 -2.679,1.086-5.104,2.841-6.859

          C4.738,1.086,7.163,0,9.842,0h8.3h8.3c2.679,0,5.104,1.086,6.859,2.841C35.056,4.597,36.142,7 .021,36.142,9.7L36.142,9.7L36.142,9.7

          z" top="0" left="0" bottom="0" right="0">

          <s:fill>

          <s:SolidColor color="0x939393"/>

          </s:fill>

          </s:Path>

          <s:Button left="0" width="18" verticalCenter="-5" click="button1_clickHandler(event)" fontWeight="bold" label="&lt;&lt;" fontSize="16" skinClass="btnSkin"/>

          <s:Button right="0" width="18" verticalCenter="-5" click="button2_clickHandler(event)" fontWeight="bold" label="&gt;&gt;" fontSize="16" skinClass="btnSkin"/>

          <s:Label verticalCenter="-5" horizontalCenter="0" verticalAlign="middle" text="{FlexGlobals.topLevelApplication.myInt}"/>

          </s:Group>

           

          adding this code to the slider skin should achieve what you want to do - notice by binding the group position to the thumb it tracks with the thumb.

           

          Ok, 20 minutes used so I went beyond that to use hostcomponent in the skins, adjusted all the slider skins to a bare minimum and added a left and right bump to the thumb so you could in theory have a stepsize for the thumb and a fine tune to the left or right of the slider value.

           

          Anyway thats my 1 hour xmas day computer time so I hope the example helps.

           

           

          David.

          1 person found this helpful
          • 2. Re: Custom SliderThumb that does not extend Button
            Shongrunden Adobe Employee

            Hope everyone is having a Merry Xmas.  I whipped up a sample that extends HSlider while I was waiting for a bottle of wine to decant.

             

            In this example I custom skinned the thumb button to make it bigger and add two new skin parts on top of that to allow for increment and decrement buttons. (See attached)

             

            Not very polished, but my wine is ready now so I ran out of computer time too.  Hopefully it can get you started.

            1 person found this helpful
            • 3. Re: Custom SliderThumb that does not extend Button
              amandavoss Level 1

              Thanks so much for the replies - especially over the Holidays!

               

              The very last thing I did before Christmas was to write a sample app to try to find out why I wasn't getting events as I had expected to from the inc/dec buttons. Lo and behold the visual design I had gotten from our UX group had ended up with the two very small buttons (which I may not have done a "hit area" layer on in the skin.

               

              The middle example in the attached screenshot is what I was to implement. The first and third samples work wonderfully. So, my original source was not the problem! It was actually that I could not hit the inc/dec buttons in the middle example. All of the hits are being received by the slider itself and so the button click handler was never getting called. Out of about 20 attempts, I can hit the button once.

               

              So, I was able to convince the UX team that my left/right buttons were better for inc/decrement. But... being able to set a stepper increment is fantastic so I am about to go lift that code from the posted examples

              • 4. Re: Custom SliderThumb that does not extend Button
                amandavoss Level 1

                This is exactly what I need. As you probably noticed, it brings up usability issues because the slider thumb moves when the slider value changes. But this is a problem for the user interaction group to overcome as this was the design they came up with

                • 5. Re: Custom SliderThumb that does not extend Button
                  amandavoss Level 1

                  And here is my modified source which just uses  left and right buttons on the front/back of the thumb button.

                  • 6. Re: Custom SliderThumb that does not extend Button
                    Shongrunden Adobe Employee

                    I revisited my first example and changed it a little to include a "thumbGroup" which I believe is what you were originally asking for.  This will position the thumbGroup skin part instead of the the thumb skin part.  This frees you up to position the thumb and increment buttons inside the thumbGroup how you would like in the skin.  It will also mean that the increment buttons won't spill over the end of the track.

                    • 7. Re: Custom SliderThumb that does not extend Button
                      amandavoss Level 1

                      Absolutely great! Thanks!