Sizing using percentage in Flex applications

26Jun08

Here’s another Flex annoyance – though I can see that from some users’ perspectives, this might be more of a feature than a bug.

The problem arose for me (as with most of my problems with Flex) in trying to apply a basically CSS/XHTML style workflow to a Flex application. I’m guessing most people who have done much fiddling about with CSS/XHTML design will have gotten used to creating graphics and texture files that are, say, maybe twice as large as they will generally need to be in order to accommodate different browsers and display resolutions: you can then size whatever component (probably a tab or a button) the graphic is for by percentage, confident that the background graphics file will be large enough for whatever platform the site visitor happens to be using. Other reasons for making an image larger than the area to be displayed might also include creating multiple states in a single file and then displaying them using positioning to save on bandwidth.

Unfortunately for this workflow, Flex has a peculiar behaviour when it comes to sizing and skins. Normally, it is possible to create a skin file larger than the component it skins – but only if the sizing is done in pixels (or rather, given that we’re talking about Flex, if the sizing is done without units). If the sizing is done using percentages, the component displays with the dimensions of the skin file instead.

I suppose a die-hard Flexhead would reply that one of the advantages of Flex and Flash is that you don’t have to worry as much about creating fluid layouts using these tools: you can set everything to be pixel-perfect, and the swf compiler does the magic for you. In addition, there’s no reason to be compiling excessively large graphics resources into the finished product. As with everything Flex, though, the (much appreciated!) close similarity to other web-technology workflows can lead to the assumption that they’re identical …

Filed under: Flex   |  Leave a Comment
Tags: Flex, Flex Bugs