9 Replies Latest reply on Jul 26, 2011 5:09 AM by Seglespaan

    Scrollbar control

    Seglespaan Level 1

      Hi,

       

      I'm trying to add a scrollbar control to my application. I don't want to use the default scrollbars that appear ona a canvas as there is a bug when the contents of the canvas are centred.

       

      So I'm adding a scroobar controll in the mxml.

       

      Can anyone tell me how to change the handle on the scrollbar? I seem to only be able to use the default size which is pretty small, I want to be able to alter it's size dependant on the level of zoom.

       

      Cheers

       

      Tim

        • 1. Re: Scrollbar control
          Flex harUI Adobe Employee

          Setting up a scrollbar is a fair amount of work.  What is the centering

          problem?  If scrollbars are always on, will setting

          verticalScrollPolicy="on" fix your centering issue?

          • 2. Re: Scrollbar control
            Seglespaan Level 1

            Hi,

             

            the problem is as follows

             

            Canvas_A is fixed and has scrollbars set to on, Canvas_B is inside Canvas_A and has a horizontal and vertical centre of 0 so it is always centered within Canvas_A.

             

            I then have a zoom componenet that consists of a slider, when the slider control is used Canvas_B is increased in size, at this point the scrollbars always start from the top left corner and even though I'm still looking at the center of Canvas_B I can't use the scrollbars to navigate to the top left of Canvas_B

             

            you can see an example of what I mean hear

             

            http://www.sephiroth.it/weblog/archives/2007/11/flex_canvas_bug_when_it_is_zoomed_in.php

             

            Thanks

            • 3. Re: Scrollbar control
              Flex harUI Adobe Employee

              Are you required to use Flex 3.x?  I just showed someone how to do something

              similar in Flex 4.

               

              <?xml version="1.0" encoding="utf-8"?>

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

                             xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx">

                   

                  <fx:Script>

                  <![CDATA[

                      private function scaleAndZoom():void

                      {

                          img.scaleX = img.scaleY = zoomFactor.value;

                      }

                       

                      private function checkScrolling():void

                      {

                          var imgWidth:Number = img.width * img.scaleX;

                          var imgHeight:Number = img.height * img.scaleY;

                           

                          if (group.contentWidth < imgWidth ||

                              group.contentHeight < imgHeight)

                          {

                              var excessW:Number = imgWidth - group.contentWidth;

                              var excessH:Number = imgHeight - group.contentHeight;

                              group.setContentSize(imgWidth, imgHeight);

                              if (scroller.verticalScrollBar)

                              {

                                  scroller.verticalScrollBar.minimum = -excessH;

                                  scroller.verticalScrollBar.maximum = excessH;

                                  group.verticalScrollPosition = 0;

                              }

                              if (scroller.horizontalScrollBar)

                              {

                                  scroller.horizontalScrollBar.minimum = -excessW;

                                  scroller.horizontalScrollBar.maximum = excessW;

                                  group.horizontalScrollPosition = 0;

                              }

                          }     

                      }

                  ]]>

                  </fx:Script>

                  <s:layout>

                      <s:VerticalLayout />

                  </s:layout>

                  <s:HSlider id="zoomFactor" minimum="1" maximum="100" stepSize="0.1"

              change="scaleAndZoom()" width="100%" />

                  <s:Scroller id="scroller" width="100%" height="100%" >

                      <s:Group id="group">

                          <s:Image verticalCenter="0" horizontalCenter="0"

              source="umbrellas.jpg" id="img" updateComplete="checkScrolling()" />

                      </s:Group>

                  </s:Scroller>

              </s:Application

              • 4. Re: Scrollbar control
                Seglespaan Level 1

                The whole program thus far is written in 3 and I don't fancy having to convert it to 4 just yet!

                 

                Any solution in 3?

                • 5. Re: Scrollbar control
                  Seglespaan Level 1

                  Or even if there is just a way to set the scrollbar handle size would be good!

                  • 6. Re: Scrollbar control
                    Flex harUI Adobe Employee

                    I'm not sure what you mean by handle, but there is an API on Scrollbar for

                    setting various properties to describe what is being scrolled.  Is the

                    content just an image?  You might have the option of offsetting the content

                    in a UIComponent.

                    • 7. Re: Scrollbar control
                      Seglespaan Level 1

                      Thanks

                       

                      in a vertical scrollbarr I'd say theres 4 parts, an up arrow, a down arrow, the track and the handle that slides up and down the track, I want to be able to increas or decrease this size of this.

                       

                      No the contents are quite complex

                       

                      Tim

                      • 8. Re: Scrollbar control
                        Flex harUI Adobe Employee

                        That's what we call the 'thumb'.  There should be a setScrollProperties

                        method and minimum and maximum properties that control the appearance of the

                        scrollbar.

                        • 9. Re: Scrollbar control
                          Seglespaan Level 1

                          Could you possibly post a really basic example, i can't seem to affect the

                          thumb size at all

                           

                          TIm