5 Replies Latest reply on Apr 29, 2008 6:24 AM by Flexerer

    2-row image tiles scrolling horizontally

    Flexerer
      Hi everyone,

      I am new to Fx - I am sure I am missing something - I'd appreciate any help.

      My task is to display two rows of image tiles that scroll horizontally. Horizontal list has only one row, Tile & TileList scroll vertically only - is there any way to do this?

      Thanks!
        • 1. Re: 2-row image tiles scrolling horizontally
          Dizzia Level 1
          Alright, two rows.. let me work on that for a little bit.

          You can force the vertical scrolling off by setting verticalScrollPolicy = off
          You can force a horizontal scroll on by setting horizontalScrollPolicy = on

          Since you specifically want it to be two rows (mind you I'm going to look into this right now) The easy way would be to just use two HBox components vertically aligned.

          I'll post back in a little bit to see if I can force a tile to only hold two rows.
          • 2. Re: 2-row image tiles scrolling horizontally
            Dizzia Level 1
            Posted a little fast there.
            Here's the code, you'll need to adjust the height of it so it contains two of your images vertically, then the rest should lay out horizontally.

            <mx:Tile horizontalScrollPolicy="on" verticalScrollPolicy="off" direction="horizontal" id="yourTile">
            <mx:Image source="yourimage.png"/>
            </mx:Tile>
            • 3. Re: 2-row image tiles scrolling horizontally
              Dizzia Level 1
              Posted a little fast there.
              Here's the code, you'll need to adjust the height of it so it contains two of your images vertically, then the rest should lay out horizontally.

              <mx:Tile horizontalScrollPolicy="on" verticalScrollPolicy="off" direction="horizontal" id="yourTile">
              <mx:Image source="yourimage.png"/>
              </mx:Tile>
              • 4. Re: 2-row image tiles scrolling horizontally
                Flexerer Level 1
                Dizzia - I won't get to my dev machine today but I'd like to thank you for your help even before I get a chance to test your code. I will post back when I get a chance to test.

                Thanks!
                • 5. Re: 2-row image tiles scrolling horizontally
                  Flexerer Level 1
                  Dizzia,

                  I just managed to VPN and test.
                  I forgot to mention two things - the image info loads from an HTTPService and the user must be able to click on an image and generate an event - looks like the Tile component doesn't do that.

                  I tried your fix - the Tile gets a disabled horizontal scroll bar and won't scroll. But since user can't click on images I can't use a Tile anyway.

                  Is there a 3rd-party component out there that can do the job?
                  Thanks!

                  <mx:Tile width="80%" height="50%" horizontalScrollPolicy="on"
                  verticalScrollPolicy="off" direction="horizontal">
                  <mx:Repeater id="slideRepeater" dataProvider="{acSlides}">
                  <mx:VBox horizontalAlign="center" verticalAlign="middle" width="200">
                  <mx:Image source="assets/thumbs/{slideRepeater.currentItem.source}"/>
                  <mx:Text width="100%" text="{slideRepeater.currentItem.caption}"
                  textAlign="center"/>
                  </mx:VBox>
                  </mx:Repeater>
                  </mx:Tile>