2 Replies Latest reply on Apr 4, 2011 2:58 AM by louiecueto

    Display image in an array format

    louiecueto

      I'm new to flex and I would really appreciate anyone who can help me. My  problem is I need to display an (1)image in columns and rows depending  on the user input. I have two text inputs one for length and width on  the other. Say the user inputs 5 for length and 6 for width so the  image will be displayed in a 5 x6 picture array(5 pictures in 6 rows).  Looking forward for your advise on how I can workon this. I hope I was able to explain my problem very well. Thank you in  advance.

       

      z.jpg

        • 1. Re: Display image in an array format
          Shongrunden Adobe Employee

          You might find TileLayout to be useful.  It exposes a requestedColumnCount and requestedRowCount property.


          Here is a simple example:

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

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

           

              <s:controlBarContent>

                  <s:HSlider id="colSlider" minimum="2" value="3" maximum="6" />

              </s:controlBarContent>

           

              <s:List width="100%" height="100%">

                  <s:layout>

                      <s:TileLayout requestedColumnCount="{colSlider.value}" />

                  </s:layout>

                  <s:itemRenderer>

                      <fx:Component>

                          <s:ItemRenderer>

                              <s:Rect width="100" height="100">

                                  <s:fill>

                                      <s:SolidColor color="0xe3e3e3" />

                                  </s:fill>

                              </s:Rect>

           

                              <s:Label text="{data}" verticalCenter="0" horizontalCenter="0" />

                          </s:ItemRenderer>

                      </fx:Component>

                  </s:itemRenderer>

                  <s:dataProvider>

                      <s:ArrayCollection>

                          <fx:String>1</fx:String>

                          <fx:String>2</fx:String>

                          <fx:String>3</fx:String>

                          <fx:String>4</fx:String>

                          <fx:String>5</fx:String>

                          <fx:String>6</fx:String>

                          <fx:String>7</fx:String>

                          <fx:String>8</fx:String>

                          <fx:String>9</fx:String>

                          <fx:String>10</fx:String>

                          <fx:String>11</fx:String>

                          <fx:String>12</fx:String>

                          <fx:String>13</fx:String>

                          <fx:String>14</fx:String>

                          <fx:String>15</fx:String>

                      </s:ArrayCollection>

                  </s:dataProvider>

              </s:List>

          </s:Application>

          1 person found this helpful
          • 2. Re: Display image in an array format
            louiecueto Level 1

            thank you so much I'll look into this.more power to you Shongrunden.