3 Replies Latest reply on Apr 27, 2009 12:05 PM by Gregory Lafrance

    move horizontal scroll position of HBox in canvas

    maheshrox

      Hi everybody, This is mahesh and I am new to this forum as well as new to flex. When i was working on a component, i could not scroll the horizontalScrollPosition of HBox which was present inside Canvas.

       

      Let me explain the code i have pasted here. When i click the button named "nex", it will call the event handler function named  "moveSlider" then it has to move the horizontal scroll position of HBox to show another image which has been placed inside HBox.

       

      for your convenience I have  paste the code here and hope it will help you to find the solution better.  Please help me as soon as possible bcoz i am completely helpless as of now.

       

      Code :

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

       

      <mx:Script>
          <![CDATA[
             
              public function moveSlider(event : Event) : void
              {   
                  eff.play([hBox]);
              }
             
          ]]>
      </mx:Script>

       

            <mx:AnimateProperty id="eff" property="horizontalScrollPosition" fromValue="0" toValue="810" />

       

                 <mx:Canvas id="display" width="800" height="350"  backgroundColor="white">
             
                   <mx:HBox id="hBox">
                       <mx:Image source="laptop.jpg" width="800" height="350" maintainAspectRatio="false" />
                       <mx:Image source="justlinen_logo.jpg" width="800" height="350" maintainAspectRatio="false"/>
                   </mx:HBox>
             
                   <mx:Button id="pre" label="Prev" left="10" bottom="175" />
                   <mx:Button id="nex" label="Next" right="10" bottom="175" click="{moveSlider(event)}"/>
                     
               </mx:Canvas>
      </mx:Application>

        • 1. Re: move horizontal scroll position of HBox in canvas
          Gregory Lafrance Level 6

          You may need to tweak the numbers, but this may work better for you:

           

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
            horizontalGap="0" verticalGap="0">
            <mx:Canvas id="display" width="810" height="370" horizontalScrollPolicy="off">
              <mx:Canvas id="images" x="0" y="0">
                <mx:Image x="5" y="0" source="laptop.jpg" width="800" height="350" maintainAspectRatio="false" />
                <mx:Image x="810" y="0" source="justlinen_logo.jpg" width="800" height="350" maintainAspectRatio="false"/>
              </mx:Canvas>
              <mx:Button id="pre" label="Prev" left="10" bottom="175" click="{images.x=0}"/>
              <mx:Button id="nex" label="Next" right="10" bottom="175" click="{images.x=-810}"/>
            </mx:Canvas>
          </mx:Application>

          1 person found this helpful
          • 2. Re: move horizontal scroll position of HBox in canvas
            maheshrox Level 1

            Thanks Greg Lafrance ! it exactly works the way i expected but i wanted to reduce positioning of controls using x and y position as much as possible because i felt its not good practice to code. So if we place images in Hbox then it will be horizantally placed one after another then i can scroll the HBox with horizontalScrollPosition. why it isnt possible to move horizontal scroll position of HBox which is present inside Canvas or any other container ? Can you temme greg ? I am hoping for another better solution from you. Thank you a lot.

            • 3. Re: move horizontal scroll position of HBox in canvas
              Gregory Lafrance Level 6

              I'm not sure why that is not working, but I'm wondering if it has anything to do with the fact that HBox is autolayout, and Canvas is absolute layout.