Flex 2 Application Repeating BackgroundImage Style (updated)

Posted on December 8, 2006 | 14 comments

UPDATE: see comments, the skin class works with any UIComponent and checks for many exceptions of different backgroundImage style values. Note backgroundImage values of embedded images only work, embedded SWF’s with symbol names throws an error.

I created a RepeatingImage component last month that works nicely for applying repeating images any where in your Flex application. But most repeating image usages are typical implemented as repeating background image for the whole Application. There is no easy way to apply the background image as a style and have it repeat.

You could use the RepeatingImage component to apply a image class on the Canvas of an Application component, but that might not work for non absolute layout apps. The basic code to repeat a bitmap over an graphic area requires BitmapFill. Stefan Richter modified Jemery Lu’s code to apply a bitmap image to the Application component through AS code in the Script block. This looks a lot like the RepeatingImage in its approach.

Then in Stefan’s comments Maikel Sibbald applied the BitmapFill approach to a borderSkin. This approach makes more sense when you are thinking of just applying a background image on the Application that repeats. The one done side to the code was that it you have to hard code the image source into the custom borderSkin class.

I decided to take that code and modify it so you set the borderSkin and backgroundImage styles on the Application component class to make it work. The trick is the modifications in the custom borderSkin called RepeatedBackground, they RepeatedBackground class locates the backgroundImage style from the parent (which is Application or any other component with borderSkin set to RepeatedBackground) and uses that as the class for the image. It then clears the backgroundImage style on the parent to make sure that that doesn’t get drawn.

See for your self, here is the live example and the source code through context help.

Share the post "Flex 2 Application Repeating BackgroundImage Style (updated)"

  • Peter

    Cool trick…. and any idea how to achieve horizontal or vertical only repeating? I want to figure out a horizontal repeated fixed height gradient (is not the same as the default scalable application background gradient), where the application background color takes over where the gradient ends at the bottom (so the end of the gradient is the same color as the background).

  • http://labs.flexcoders.nl Maikel Sibbald

    Nice one!!..Make more sense to set backgroundImage in your component than in the skin..

    And if you wondered what it was before Renaun’s improvement:
    http://labs.flexcoders.nl/?p=16

  • Pingback: Labs@flexcoders » Blog Archive » Repeated background for flex components (Update)

  • http://labs.flexcoders.nl/ Maikel Sibbald

    I made some more improvements.. Now you can use it for more containers..
    http://labs.flexcoders.nl/?p=21

  • http://twmug.com Jeremy

    hey Renaun,

    Just a quick note, I had figured out how to do repeat-x, repeat-y and even making the tile always centered in the background (will post on the blog soon), finished that on the flight back from Vegas after Max 2006.

    Btw, it’s really my pleasure to meet you in person, forgot to buy you a drink though…maybe next time ?

  • http://www.renaun.com Renaun Erickson

    Yeah, it was great to meet up with you to Jeremy. The RepatingImage component already does the repeatX and repeatY. To do the repeatX or repeatY using hte styles method (skin class, with backgroundImage) you would have to custom a skin class for both methods.

  • http://www.renaun.com Renaun Erickson

    The code has been updated with Maikel’s casting to UIComponent. Also there is a lot of error checking and exception handling for different backgroundImage style values.

    Peter,

    To do the specific Horizontal or Vertical repeating create copies of the RepeatedBackground class.

    Renaun

  • http://labs.flexcoders.nl/ Maikel Sibbald

    Nice one.. I think this is a workable version!! I’ll update my code asap. Greetings Maikel Sibbald

  • http://www.renaun.com Renaun Erickson

    Cool, next step is to create multiple skin classes:

    BackgroundImageTiled
    BackgroundImageRepeatX
    BackgroundImageRepeatY
    BackgroundImageCentered

    Package them up and write some docs….

  • brian Weisenthal

    What do you think the performance hit of redrawing a bitmap on resize would be?

    vs.

    draw the bitmap once, larger than needed, then just resize a mask? Or even create a large vector pattern as a clip, attach that behind a mask that resizes?

  • http://www.renaun.com Renaun Erickson

    It is a valid approach and might be worth it, especially if you have many Application and Components using the component.

  • Peter

    There’s a huge issue : as soon as your browser is made smaller than the minimum size of the main application, the tileble background will disappear from the application.

    Any fixes for this?

  • http://www.renaun.com Renaun Erickson

    i have noticed this, but haven’t had the time to explore any fixes.

  • Erik

    Hi all,

    I have been using the RepeatedBackground and it worked great until I started using it together with states:

    If I first add a Canvas that uses RepeatedBackground i a new state (ie “state1″) that is not basedOn another state it works fine.
    But if I afterwards enter another state (“state2″) that is basedOn (“state1″) then the background image dissapaers :-(

    To fix this I removed the following line:
    this.parent as UIComponent).setStyle( “backgroundImage”, “” );

    This line was of course there for a reason but it works for now.
    Perhaps this is related to Peters problem.

  • http://www.renaun.com Renaun Erickson

    Take a look at Degrafa’s package, they have some better functionality to handle this kind of stuff.