7 Replies Latest reply on Feb 23, 2010 10:03 AM by Luis Pedro Ferreira

    s:VScroll with a fix heigth size

    Luis Pedro Ferreira Level 1

      Hey all !!

       

      I'm trying to skin a spark VScroll removing both top abd bottom buttons and skinning the track and the thumb.

       

      Removing the both buttons it's easy by deleting the code corresponding.

      Skinning the track is also easy but the thumb..... :/ god, is making my head in!!

       

      I want the thumb to be a simple small PNG but some i end always having some funny behaviors when i drag the thumb up and down.

      One of them is that the thumb doesent use all the track to scroll my list, for example, if i have a track of 200px on heigth, the thumb only goes down 100px and stops there...

       

      Wha am i missing??

      Thanks all in advance

        • 1. Re: s:VScroll with a fix heigth size
          David_F57 Level 5

          Hi,

           

          When you modify the different layers of a scroller you need to do a lot of resizing of the relevant groups or you start getting a difference between the recognised tracking area and the area you are scrolling in, for instance you can't just remove the buttons without resizing the group they are in.

           

          There are 3 different sets of skins that work together to give you a scrollbar. Its a long winded explaination, so instead of trying to explain how it all works together i've attached a link to a horizontal scrollbar that is an extreme modification, the skins involved have all been simplified then changed to suit the purpose. These skins have simpler code so it may help you to see what needs to be done.

           

           

          http://flashhub.net/ezflex/slider    - right click on the swf to see the source code.

           

          David

          1 person found this helpful
          • 2. Re: s:VScroll with a fix heigth size
            Luis Pedro Ferreira Level 1

            Hi David, Thank you for your reply.

            I will check that link and give you some feedback.

             

            Thanks

            • 3. Re: s:VScroll with a fix heigth size
              Luis Pedro Ferreira Level 1

              I tried to understand the code but it could be able to help me.

              The method measure() sets the usefull area where the thumb is going to slide?

               

              I try to use the code from the examplo both ways, making a smal changes and without making anu changes and the result was always the same...same behavior told on my 1st post.

               

              I realy don't know how to do this and i'm not even having a clue on where to start

               

              Do you think that i can swap the s:VScroll for an s:VSlider? Is it easy to make a s:VSlider scroll a DataGroup?

               

               

               

               

               

               

              • 4. Re: s:VScroll with a fix heigth size
                David_F57 Level 5

                Hi,

                 

                Can you post the code that is causing you problems, it maybe something very simple.

                 

                You have 2 measurements to consider the track, which is usually the same as the viewed width or height and the actually width or height of the datagroup. Tracking should just work (i.e. you scroll and it will display the full range of the contents in the datagroup), that being said if you have modified scroller objects they may not display correctly as you need to adjust the bounding areas of the objects. The measured function uses the different dimensions to calculate where the thumb needs to be placed, in my example if I left the default track dimensions the thumb would not scroll all the way to the left or right as the track graphic is shaped but the track bounds need to be rectangular so you adjust the measure behaviour to have the thumb display beyond the tracks rectangular boundary so that the graphic element looks correct.

                 

                You still need a scroller in order to have a view port, you can disable the scroll policy then use a slider for control but without seeing your code I can only guess the problem is more graphical which means you may end up with the same problem using a slider, or even end up with a bigger problem if you resize the datagroup in runtime.

                 

                David.

                1 person found this helpful
                • 5. Re: s:VScroll with a fix heigth size
                  Luis Pedro Ferreira Level 1

                  Going to try to show all the afected code:

                   

                  Here's my DataGroup with all the data coming from the database:

                  <s:DataGroup id="categoryGroup" y="150" dataProvider="{categoryArray}" clipAndEnableScrolling="true" height="100%">
                       <s:layout>
                            <s:VerticalLayout useVirtualLayout="true" gap="-1"/>
                       </s:layout>
                       <s:itemRenderer>
                            <fx:Component>
                                 <s:DataRenderer>
                                      <LeftComponent:MenuCategory categoryName="{data.name}" categoryColor="{data.color}"/>
                                 </s:DataRenderer>
                            </fx:Component>
                       </s:itemRenderer>
                  </s:DataGroup>

                   

                  <LeftComponent:MenuCategory> it's a component that i made in Flash CS.

                   

                  Here is my VScrollBar controlling the scroll of the data contained the DataGroup:

                  <s:VScrollBar viewport="{categoryGroup}" left="{categoryGroup.width}" top="150" height="100%" skinClass="assets.skins.VScrollBar.CustomVScrollBarSkin"/>

                   

                  The CustomVScrollBarSkin:

                  <fx:Metadata>
                       <![CDATA[
                            [HostComponent("spark.components.VScrollBar")]
                       ]]>
                  </fx:Metadata>

                  <fx:Script>
                       static private const exclusions:Array = ["track", "thumb"];
                       override public function get colorizeExclusions():Array {return exclusions;}
                  </fx:Script>

                  <s:states>
                       <s:State name="normal" />
                       <s:State name="disabled" />
                       <s:State name="inactive" />
                  </s:states>

                  <s:Button id="track" buttonMode="false" top="0" bottom="0" skinClass="assets.skins.VScrollBar.CustomVScrollBarTrackSkin" />
                  <s:Button id="thumb" top="1" bottom="1" left="0" y="0" y.normal="16" skinClass="assets.skins.VScrollBar.CustomVScrollBarThumbSkin" />

                  I've removed the measure() override function to post the code here.

                   

                  The CustomVScrollBarTrackSkin:

                  <fx:Metadata>
                       <![CDATA[
                            [HostComponent("spark.components.Button")]
                       ]]>
                  </fx:Metadata>

                  <s:Rect width="10" height="100%">
                       <s:fill>
                            <mx:LinearGradient>
                                 <mx:entries>
                                      <mx:GradientEntry color="0xC8B098"/>
                                      <mx:GradientEntry color="0xF1E8DA"/>
                                 </mx:entries>
                            </mx:LinearGradient>
                       </s:fill>
                  </s:Rect>

                   

                  The CustomVScrollBarTrackSkin:

                  <fx:Metadata>
                       <![CDATA[
                            [HostComponent("spark.components.Button")]
                           ]]>
                  </fx:Metadata>

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

                  <mx:Image source="@Embed('assets/images/vscrollThumb.png')"/>

                  The image as a size of 13px width and 34px height.

                  • 6. Re: s:VScroll with a fix heigth size
                    Luis Pedro Ferreira Level 1

                    I've just found one part of the solution about making a s:VSlider scroll a DataGroup by reading this article abour Scroll and Viewports:

                    http://www.adobe.com/devnet/flex/articles/flex4_viewport_scrolling_print.html

                     

                    Here's the code:

                     

                    DATAGROUP:

                    <s:DataGroup id="categoryGroup" y="150" height="100%" dataProvider="{categoryArray}" clipAndEnableScrolling="true">
                         <s:layout>
                              <s:VerticalLayout useVirtualLayout="true" gap="-1"/>
                         </s:layout>
                         <s:itemRenderer>
                              <fx:Component>
                                   <s:DataRenderer>
                                        <LeftComponent:MenuCategory categoryName="{data.name}" categoryColor="{data.color}"/>
                                   </s:DataRenderer>
                              </fx:Component>
                         </s:itemRenderer>

                    </s:DataGroup>

                     

                    VSCROLL:

                    <s:VSlider id="categorySlider" x="{categoryGroup.width}"
                                    y="150" height="100%"
                                    maximum="{categoryGroup.contentHeight-categoryGroup.height}"
                                    change="{categoryGroup.verticalScrollPosition=categorySlider.value}"/>

                     

                    Now i need the value 0 at the top of the VScroll and not on the bottom.

                    How can i do that?

                     

                    Updated: Made it by flipping vertically the VSlider.

                    Prob not the best option but it works.

                    If anyone has a better way to do it, please tell me.

                    • 7. Re: s:VScroll with a fix heigth size
                      Luis Pedro Ferreira Level 1

                      Probably not using the best pratices but it's working...