
By Jason Olmsted:
Lately, I have been getting more involved into working with the visual aspect of Flex. Up to now, I had been able to pass off the styling to Alex after working on the functionality or have just worked on projects where the visuals weren’t a concern. Anyway, it is often good to get opportunities to explore.
So, the simple thing that I needed to do was to create a rectangular component based on mx:Canvas with a tiling background and rounded corners. Figuring this ought to be a straightforward thing to do, I blithely set about it.
First snag: Flex doesn’t seem to offer a straightforward way of identifying a repeatable background for the Canvas class. Quick searching revealed that one can do this with Degrafa, but I didn’t want to go that route. (Not that Degrafa isn’t tremendous, it just seems like a lot of overhead just to tile a background image.) There is another solution for setting a tiled image as a background.
That is a really nice solution, but, for my immediate purposes, has distracting elements like loading the image at run-time. Run-time loading could be an incredibly useful feature, and it is worth noting, but if you have a small, single image you want to use, it is nicer to just embed it and not have dependencies at deployment. The core of the solution is use lower level AS3 functions to draw a rectangled that is filled with the bitmap of choice.
Read more at: http://blog.shortfusion.com/index.cfm/2009/10/22/Flex–Rounded-Corner-Component-with-Tiled-Bitmap-Background
