New Flex 4 feature: Layout Mirroring

Desktop or web applications written in Flex can currently display localized strings with relative ease (using tools such as data binding and the ResourceManager), but localizing an app involves more than just translating the strings: there are a number of languages that are written Right-to-Left instead of Left-to-Right, and this preference influences how the developer should design the application.

There is an upcoming feature in the Flex SDK that allows you to mirror your layout on the fly: you’ll be able to set a property during compile-time or runtime that will propagate a change down to every child UIComponent, resulting in a layout that RTL users are more familiar with.

Here’s a screencast demonstrating this feature. I’ve localized my Google Finance AIR application into Arabic, although I don’t actually speak the language; I used Google Translate, so I take no responsibility for its content. Feel free to correct my mistakes.

If you’re curious, Flex makes the change under the hood by setting:

element.x += width;
element.scaleX *= -1;

This horizontally moves the component and then flips it around the vertical axis. Though as a developer, you can just set:

layoutDirection = "rtl"

on a root component, and the change will propagate to that component’s children. This setting won’t propagate across open windows, so it’s necessary to change the property manually for all windows that you wish to modify.

To learn more, you can read the public specification on Flex’s open source site.