4 Replies Latest reply on Mar 17, 2010 1:04 AM by Shongrunden

    How to make ns:Image tile or repeat?

    Paul The Lad Level 1

      How can one make the ns:Image be tileable or have it repeat over and over again in the area provided?

        • 1. Re: How to make ns:Image tile or repeat?
          David_F57 Level 5

          Hi,

           

          The spark bitmapimage component has a repeat method <s:BitmapImage fillMode="repeat"/>, with mx:image you need to do this yourself, there are lots of various examples around on repeat tiling,  google 'flex repeat image' will yield dozens of sites with examples.

           

          David.

          • 2. Re: How to make ns:Image tile or repeat?
            Paul The Lad Level 1

            I had done a search before posting. The search results tend to talk about how to do this for embedded images but that's not what I'm looking for. Also there might be a simplerr way to do this in the Flex framework itself therefore my post here.

            • 3. Re: How to make ns:Image tile or repeat?
              Paul The Lad Level 1

              So I have devised a not so clever way to do this but I haven't worked out all the kinks yet and I need help from all of you

               

              Here's the plan:

              1) Have a DataGroup inside the are where you want to tile an ns:Image

              2) Enable theclipAndEnableScrolling on the DataGroup

              3) Feed a dynamically generated ArrayCollection which has a reference to the same image repeated enough times so as to cause a horizontal and vertical overflow.

              4) Apply a TileLayout to the DataGroup

              5) And hopefully we get something that tile dynamically loaded images.

               

              The problem right now is that I also need to set the requestedColumnCount on TileLayout to make sure that I ask it to show more columns than it respectably can, therefore, causing the clipping to happen horizontally (vertically is already working) for the tiled image as well.

              a) Setting requestedColumnCount="2" (static binding) works but I don't want to hardcode that as it may be a diff # for diff size images.

              b) So I have requestedColumnCount="{(dataGroup.width / image1.width) + 1}" but even though I can see the dynamically calculated number "2" being  being set on TileLayout.as when I step through it in debug mode ... it doesn't have the same effect as the static binding any ideas?

               

              Here's the unfinished and rather hard-coded proof-of-concept source:

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application
                  xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/halo"
                  height="100%"
                  xmlns:ns="library://ns.adobe.com/flex/mx">

               

                  <s:HGroup height="100%">

               

                      <s:DataGroup
                          id="dataGroup"
                          width="700"
                          height="140"
                          clipAndEnableScrolling="true"
                          >
                          <s:ArrayCollection id="images">
                              <!-- 502 x 72 image-->
                              <ns:Image id="image1" source="images/top_banner.png" scaleContent="false"/>
                              <ns:Image source="images/top_banner.png" scaleContent="false"/>
                              <ns:Image source="images/top_banner.png" scaleContent="false"/>
                              <ns:Image source="images/top_banner.png" scaleContent="false"/>
                          </s:ArrayCollection>
                          <s:layout>
                              <!--<s:TileLayout verticalGap="0" horizontalGap="0" requestedColumnCount="2"/>-->
                              <s:TileLayout
                                  id="tileLayout"
                                  verticalGap="0"
                                  horizontalGap="0"
                                  requestedColumnCount="{(dataGroup.width / image1.width) + 1}"
                              />
                          </s:layout>
                      </s:DataGroup>
                      <s:Label text="{(dataGroup.width / image1.width) + 1}" />
                  </s:HGroup>

               

              </s:Application>