TileBox - background image container component

Recently I had to implement a layout, which had in its header's background an image that could be tiled to create a rather nice looking effect. One problem in Flex is that creating containers that have a tiling background image is not so simple as in CSS (i.e. specify background-image and background-repeat properties ). To accomplish this, you would need to extend an existing component and then rewrite the rendering method.

Taking into account the fact that I slice a lot layouts, it made sense to make a component that could be easily added to any project, that needs a container with a tiling background image. I named it TileBox because you can basically use it as a standard (H/V)Box container (well, almost, you'll see...).

Before we take a look at the code, let's see a quick demo: http://romualdhalasz.com/projects/tilebox/

The way to use it in a Flex application goes something like this (I'll use MXML for simplicity):

1. Create a TileBox object (notice the namespace) with a text object as its child


<tilebox:TileBox width="100%" height="100%">
          <mx:Text text="One line" />
</tilebox:TileBox>


2. Set the source property, which is the equivalent property of an Image object's:

<tilebox:TileBox width="100%"

                          height="100%"

                          source="@Embed(source='assets/bg-image.jpg')">

        <mx:Text text="One line" />

</tilebox:TileBox>

Voila! Now we have a container that has a tiling image as it's background. But it's still not quite enough. What if we want to tile the image only on a specific axis? This is a situation we find ourselves in more often that the one described above. Not to worry, specifying the repeat axis is as is easy as setting the background-repeat property in CSS:

<tilebox:TileBox width="100%"

                          height="100%"

                          source="@Embed(source='assets/autumn-leaf-tile.jpg')"

                          backgroundRepeat="repeat-x">

        <mx:Text text="One line" />

</tilebox:TileBox>

The backgroundRepeat property's default value is "all", meaning both axes. Use repeat-y if you want to tile the background only on the vertical axis.

So far so good! But now we can tile horizontally only on top of the container, and vertically on the left side. What if we want to tile an image horizontally, on the bottom of the container, or vertically on the right side? We might have a problem, if we didn't have the backgroundPosition property:

<tilebox:TileBox width="100%"

                          height="100%"

                          source="@Embed(source='assets/autumn-leaf-tile.jpg')"

                          backgroundRepeat="repeat-x"

                          backgroundPosition="top">

        <mx:Text text="One line" />

</tilebox:TileBox>

This property work exactly like you would expect it to: it can take the usual values - "bottom", "left", "right" and "top".

You can see the demo here: http://romualdhalasz.com/projects/tilebox/

Just use the combo menus on top to modify the repeat or position property to see different uses.

If you want to use the component in your own projects, just add TileBox.swc file to your libs. You can download it here: http://romualdhalasz.com/projects/tilebox/TileBox.swc

For any suggestions on improving this little component, drop a line and I'll see what can be done!