8 Replies Latest reply on Sep 15, 2009 10:02 AM by trancepriest

    Using Horizontal/Vertical Scrollbars without a datalist.

    Luke Pearce

      I want to use a horizontal scrollbar in a web application Im working on but don't want to create a datalist. I just want to be able to scroll content across a bounded area. Is this possible in catalyst itself?

       

      Thanks for any help,

       

      Luke.

        • 1. Re: Using Horizontal/Vertical Scrollbars without a datalist.
          acath Level 4

          Hi Luke,

           

          There's no easy way to do this in the current beta, but check again in the next beta.

           

          For now, you can do this with some coding in Flash Builder:

           

          1.  Convert the content that you want to scroll to a custom component.

          2.  Create a scrollbar that you want to scroll the content.

          3.  Import your project to Flash Builder.

          4.  Find your custom component in the code. It will look like this:

           

           

           

          And add this:

           

          <HScrollBar viewport="scrollingArea"...

           

           

          Voila!

           

          -Adam

          1 person found this helpful
          • 2. Re: Using Horizontal/Vertical Scrollbars without a datalist.
            Luke Pearce Level 1

            Thanks Adam i'll give that a try.

             

            Luke.

            • 3. Re: Using Horizontal/Vertical Scrollbars without a datalist.
              Luke Pearce Level 1

              Hi Adam.

              Ive finally come around to trying to edit the code in flash builder and I think you missed out some text in your reply. Where you've said what the custom component will look like there isnt any text.

               

              Ive been reading further and am I right in saying that i need the custom component to be the viewport for the scroll bar?

               

              thanks,

              luke.

              • 4. Re: Using Horizontal/Vertical Scrollbars without a datalist.
                acath Level 4

                Hi Luke,

                 

                Sorry about that. The forum seems to have problems with email responses...here's my original full reply:

                 

                Hi Luke,

                 

                There’s no easy way to do this in the current beta, but check again in the next beta.

                 

                For now, you can do this with some coding in Flash Builder:
                Convert the content that you want to scroll to a custom component.
                Create a scrollbar that you want to scroll the content.
                Import your project to Flash Builder.
                Find your custom component in the code. It will look like this:

                 

                <CustomComponent1 ...

                 

                Add this stuff:

                 

                <CustomComponent1 id=”scrollingArea” width=”100” height=”100” clipAndEnableScrolling=”true” ...

                 

                (of course, you can set the width and height to whatever you want the clipped, viewable area to be).

                 

                5. Now find your scrollbar. It will look like this:

                 

                <HScrollBar .../>

                 

                And add this:

                 

                <HScrollBar viewport=”scrollingArea”...

                 


                Voila!

                 

                -Adam

                • 5. Re: Using Horizontal/Vertical Scrollbars without a datalist.
                  Luke Pearce Level 1

                  thank you! I got it all working at last! Only thing I had to change was when adding the viewport tag in the scrollbar I needed to put { } around the id.

                   

                  thanks,

                  luke.

                  • 6. Re: Using Horizontal/Vertical Scrollbars without a datalist.
                    trancepriest Level 1

                    Thanks this seems like it will be a solution to my current problem of trying to create external urls in a flash catalyst design time data list.

                    • 7. Re: Using Horizontal/Vertical Scrollbars without a datalist.
                      trancepriest Level 1

                      Cannot get it to work with the following code:

                       

                      <components:CustomComponent1 includeIn="Portfolio" x="380" y="60" id="PortfolioScrollingArea" width="580" height="420" clipAndEnableScrolling="true">

                      </components:CustomComponent1>

                      <s:VScrollBar includeIn="Portfolio" x="967" y="60" id="vscrollbar1" skinClass="components.VerticalScrollbar2" fixedThumbSize="true" viewport="PortfolioScrollingArea"/>

                       

                       

                      I tried using {} around the viewport tag id and still wasn't working. Any help would be very much appreciated.

                       

                      The error result is:

                       

                      Description Resource Path Location Type

                      Initializer for 'viewport': values of type spark.core.IViewport cannot be represented in text. Main.mxml facetmediacomp-scrollbar/src line 941 Flex Problem

                       

                       

                      ---------------------------------------------------------------------------

                       

                       

                      *** Disregard... problem solved with:

                       

                      <components:CustomComponent1 includeIn="Portfolio" x="380" y="60" id="PortfolioScrollingArea" width="580" height="420" clipAndEnableScrolling="true">

                      </components:CustomComponent1>

                      <s:VScrollBar includeIn="Portfolio" x="967" y="60" id="vscrollbar1" skinClass="components.VerticalScrollbar2" fixedThumbSize="true" viewport="{PortfolioScrollingArea}"/>

                       

                       

                      A secondary error was reported elsewhere after this change due to the default FC target tag needed to be changed... to "PortfolioScrollingArea"

                      • 8. Re: Using Horizontal/Vertical Scrollbars without a datalist.
                        trancepriest Level 1

                        How do you add buttons to the scrolled content when the content extends beyond the artboard?

                         

                        http://facetmedia.com/new/

                         

                        I was able to create the vertical scroll bar/custom component but now the buttons are stuck in place on the portfolio page.