8 Replies Latest reply on Nov 12, 2010 11:43 AM by lakshdn

    skinning spark scroller - looks easy but not working

    lakshdn Level 1

      Hi,

       

      I am trying to define a custom vertical scroll bar by just embedding images in the skin for each of the skin parts increment, decrement, track and thumb.

      The problem is that I am not able to hold the 'thumb' and move up or down. it behaves as though i clicked on the track to increment up or down one step.

      Also, if i try to place a 'thumb' as white image on a grey track, the thumb is not at all visible. The thumb was visible when i placed a dark grey image on a light grey track. It is so annoying, i could not guess what was going on...

      all i could find help on google is they use default spark.skins.spark(VscrollBarThumbSkin|VScrollBarTrackSkin), but i do not want to use this.

      It was quite easy in mxml comps by setting upskin, downskin etc in css itself, now i am struggling with spark.

       

      Any help is greatly appreciated.

       

      here is my declaration in the css style -

       

       

      s|VScrollBar {

      skinClass:ClassReference('assets.skins.VScrollBarSkin');

      }

       

       

      my VScrollBarSkin -

       

       

      <s:states>

           <s:State name="disabled"/>

           <s:State name="normal"/>

           <s:State name="inactive"/>

      </s:states>

       

       

      <s:Button id="decrementButton" top="0" left="0"

             width="20" height="20"

             focusEnabled="false"

             skinClass="assets.skins.VScrollBarUpArrowSkin"/>

       


      <s:Button id="incrementButton" bottom="0" left="0"

             width="20" height="20"

             focusEnabled="false"

             skinClass="assets.skins.VScrollBarDownArrowSkin"/>

       


      <s:Button id="thumb" top="0" bottom="0"

             width="20" height="30"

             right="2"

             focusEnabled="true"

             skinClass="assets.skins.VScrollBarThumbSkin"/>

       


      <s:Button id="track"

            width="20" height="100%"

             top="20" bottom="20" left="1" right="2"

             focusEnabled="false"

             skinClass="assets.skins.VScrollBarTrackSkin"/>

       

       

      -- My skin for "decrementButton" and "incrementButton" works just fine. It embeds only up-arrow/down-arrow image respectively.

      -- My Thumb skin is -

      <s:SparkSkin>

       

      <s:states>

           <s:State name="up"/>

           <s:State name="down"/>

           <s:State name="over"/>

           <s:State name="disabled"/>

      </s:states>

       

       

      <s:BitmapImage

           height="100%" width="100%"

           source.up="@Embed('assets/images/thumb-1.jpg')"

           source.over="@Embed('assets/images/thumb-1.jpg')"

           source.down="@Embed('assets/images/thumb-1.jpg')"/>

       

      </s:SparkSkin>

       

      --My Track skin is -

       

      <s:BitmapImage width="100%" height="100%"

           source="@Embed('assets/images/scrollBar/scrolltrack.png')"

      />

        • 1. Re: skinning spark scroller - looks easy but not working
          HansMuller Level 1

          Your skin constrains the location of the thumb in terms of bottom/top.  I suspect that you don't want to do that.

           

          - Hans

          • 2. Re: skinning spark scroller - looks easy but not working
            SashaKeith Adobe Employee

            The simplest way for me to skin a component is to start with the existing skin and then modify it. This will help with the scroller skin and ensure that you are contraining and positioning things correctly. I suggest copying the existing VScrollBar skin, and then substitute your customs skin parts and adjust positioning relative to what's in the original skin.

            • 3. Re: skinning spark scroller - looks easy but not working
              lakshdn Level 1

              Hi,

               

              I removed the top/bottom constraints on the thumb skin, still not luck, it behaves the same way.

              I cannot hold the thumb and move up or down, rather it steps up or down as though i click on the track.

               

              Any references to a working solution....will be appreciated.

              • 4. Re: skinning spark scroller - looks easy but not working
                SashaKeith Adobe Employee

                1. Create a new MXML skin and copy the default VScrollBar skin code into it.

                2. Create another MXML skin and copy the contents of VScrollBarThumbSkin into it.

                3. In the custom VScrollBar skin, scroll down to the Button with id thumb and substitute the skinClass with the newly created skin in step 2.

                4. Open the custom thumb skin and delete everything below the states declaration except for the background (you'll need this for positioning).

                5. Add your image there and position and size it the same as the existing background rect.

                6. Delete the background rect.

                • 5. Re: skinning spark scroller - looks easy but not working
                  SashaKeith Adobe Employee

                  Here's a sample that creates a scrollbar skin with an image as the thumb:

                   

                  In CustomVScrollBarSkin, everything is default except for this:

                      <s:Button id="thumb"
                                focusEnabled="false" visible.inactive="false"
                                skinClass="customSkins.CustomThumbSkin" />

                   

                  In CustomThumbSkin, leave the metadata and script tags as is, and replace the rest with this. You can set different sources for the states if you wish.

                      <s:states>
                          <s:State name="up" />
                          <s:State name="over" />
                          <s:State name="down" />
                          <s:State name="disabled" />
                      </s:states>

                      <s:BitmapImage left="0" top="1" right="0" bottom="2" minWidth="14" minHeight="14"
                                     source="@Embed('assets/Thumb.png')"/>

                   

                  Hope this helps.

                  • 6. Re: skinning spark scroller - looks easy but not working
                    lakshdn Level 1

                    Hi SashaKeith,

                     

                    Thanks for your reply but this did not help. i feel somehow the thumb looses focus and when i try to click on the thumb, the track gets the focus and hence unable to move up/down using thumb.

                     

                    i tried varying focusEnabled property to true/false for both thumb and skin and still cant get around it...

                     

                    this is driving me nuts now...

                    • 7. Re: skinning spark scroller - looks easy but not working
                      kevinklin Adobe Employee

                      Hi lakshdn,

                       

                      For your scrollbar skin, try it in this order:


                      <s:Button id="track"

                            width="20" height="100%"

                             top="20" bottom="20" left="1" right="2"

                             focusEnabled="false"

                             skinClass="assets.skins.VScrollBarTrackSkin"/>

                       

                      <s:Button id="thumb"

                             width="20" height="30"

                             right="2"

                             focusEnabled="false"

                             skinClass="assets.skins.VScrollBarThumbSkin"/>

                       

                      <s:Button id="decrementButton" top="0" left="0"

                             width="20" height="20"

                             focusEnabled="false"

                             skinClass="assets.skins.VScrollBarUpArrowSkin"/>

                       

                      <s:Button id="incrementButton" bottom="0" left="0"

                             width="20" height="20"

                             focusEnabled="false"

                             skinClass="assets.skins.VScrollBarDownArrowSkin"/>

                       

                       

                      where all of the skin parts have focusEnabled="false", the top/bottom constraints from the thumb has been removed, and the order of the parts appears as above. The order of the components is important because the stacking order on screen starts with the first component on the bottom. I think the problem you were having was that the "track" was placed after the "thumb". This means that on screen, the "thumb" is actually underneath the track so that when you click the thumb, you're still clicking the track. Let me know if you have anymore questions or troubles.

                       

                      Hope this helps,

                      -Kevin

                      • 8. Re: skinning spark scroller - looks easy but not working
                        lakshdn Level 1

                        Thanks much Kevin. My issue is now resolved. This drove me nuts, never found in any of the docs about the order of skin parts being important.