Flex 3 and Backwards Compatibility … bugs and how to

After many months of work, we officially released our first public beta of “Moxie” or Flex 3. For myself, on the Flex Framework QA team, one of the biggest things about this the fact that we really are on our way to being open source for the framework. No more secrets… our builds are coming out nightly. You can get them here. And, you can log as many bugs as your heart desires at our Public Bug Base. Really, you can search and see all of our bugs from WAY back. There are definitely bugs older than my life on the team (which is 2004).

Anyways, the thing I wanted to talk about today was some of the backwards compatibility issues you might come upon when you try to upgrade your Application to Flex 3. All of the Compatibility Issues should be written up in the Release Notes, but, I just wanted to highlight a couple of them. First and foremost, you may see some different behaviors with your Button. Specifically, you may notice some Labels that may be truncated. This is NOT a bug. I repeat… its not a bug. In Flex 3, there was a major bug fix to get padding working for a Button. This includes the styles paddingLeft, paddingRight, paddingTop and paddingBottom. Previously, there was a hack in the code and these didn’t really work. Our Button measurement logic had a default of about 10 pixels on its left and right side which was adjusted depending on your label length and whether you had an icon. But, setting padding styles didn’t really work. Now, padding works and the default paddingRight and paddingLeft are 10. Therefore, if you have a button like:

<mx:Button width=”60″ label=”Submit”/>

This may render fine in Flex 2.0.1. In Flex 3, the Submit label is truncated. To fix your problem, you can just reset the paddingLeft and paddingRight to smaller values.

<mx:Button width=”60″ label=”Submit” paddingRight=”5″ paddingLeft=”5″/>

If you do not want to go through the trouble of updating your code, Flex 3 comes with a way for you to go back to the old behavior of Flex 2.0.1. If you compile your application with the additional arguments “-compatibility-version=2.0.1”. You won’t getting the Button padding fix and your Application should look exactly the same as before. However, if you do use this compiler argument, there are several other Flex 3 behavior changes that you won’t get. They are all described here. If you want, you can search the Flex SDK code for the inclusion of “FlexVersion”. These are the areas of the code where we have provided various code paths for using old Flex 2.0.1 behavior or the new Flex 3 behavior.

On caveat for using the -compatibility-version compiler argument is that it doesn’t work right now if your Application is using a DataGrid. We found this late in our cycle and therefore didn’t fix it in this beta. So, you will get a runtime error if you use the compatibility flag with a DataGrid (“Bug SDK-11231“).

10 responses

  1. I know this is technically not a bug, but the padding “fix” extends to all the tabbing components as well, TabBar, ButtonBar, TabNavigator, ToggleButtonBar. It’s nice that it’s consistent, but padding has a very different result with the TabNavigator than it does with the button. Essentially padding on the TabNavigator applies to the padding for the canvas not to the text padding for the button. If there is a way to change the padding for just the button I have yet to find it. So, what once fit nicely in my tabs, is not so nicely truncated.

  2. You can adjust the padding styles for just your Tabs if you want. Create a Tab type selector like this in your Application:

    Tab
    {
    paddingRight: 2;
    paddingLeft: 2;
    }

    You can adjust the values to whatever works for you. I’ve randomly chosen 2. The default for Button now is paddingRight=10 and paddingRight=10.

    I hope this addresses your question.

  3. hmmm. I guess I’m just not seeing it. If I add a tabNavigator component, then put a couple of canvas components in it, I simply can’t find a way to adjust the padding on the autogenerated tabs.

    For example

    the padding doesn’t seem to have any effect on the text position whatsover. Is there something I’m missing?

    Thanks much!

  4. sorry, wordpress barfed on my MXML example. I’ve posted my example here:

    http://www.gstreetlabs.com/tab_test.mxml

  5. Ah sorry. I see now that you were referring to CSS styling. So this can’t be done within the elements of a tab navigator (canvas, vbox, etc) but instead should be done through CSS.

  6. I’ve found this truncation issue just after upgrading to Flex 3 Beta 3. It looks like it always appears for buttons without a set width. This problem can be fixed by explicitly setting the width of all Buttons. Does this mean that Flex no longer supports dynamically wide buttons?

  7. I’ve decreased padding. It works for windows but I still have this problem in Mac.
    I have 2 checkboxes of the exactely same size. Text length is different 2 times. All the paddings set to 0. The button with shorter text should definitely be fine. But both labels are truncated.

  8. It sounds like you are using the default system fonts for your Buttons? If so, the system fonts on Mac and Windows are different, so, you can’t depend on their measurement being the same (although, I would expect them to be only a pixel or two off). If you used an embedded font for your Button, then, you could guarantee that they would be exactly the same for both platforms. Or, if you don’t want to do that, you might just need to make your Button a pixel or two bigger. I can’t imagine that the Mac vs Windows differences is more than a couple of pixels.

  9. it is not about width of a button
    both buttons have the same size 120
    label_1 is 9 symbols (lets say 012345678)
    label_2 is 15 symbols (lets say 012345678901234)
    they both are truncated for about 1 symbol
    I see
    01234567…
    01234567890123…
    So the label_1 is definitely shorter and have to fit because both buttons have the same size
    The issue exists only under Mac+Firefox2

  10. it was “8 )” instead of smile

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: