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.

7 Responses to New Flex 4 feature: Layout Mirroring

  1. This is seriously awesome.

  2. Tink says:

    “element.x += width;element.scaleX *= -1;”This would flip all the text which would be incorrect as rtl text, meaning that Arabic characters would then be flipped.It must be doing something a little more complex under the hood.

  3. B says:

    Great work! I like this nice demo.The arabic words in the datagrid headers are not properly rendered, the letters are not attached, maybe datagrid headers need an extra handling for localization of right to left letters.Cheers,B

  4. Daniel Koestler says:

    Thanks for the comment, B. Could you elaborate on the problems with the Arabic text in the DataGrid headers? I realize that the text didn’t get right aligned when I made the switch, but is there an additional problem?Thanks,Dan

  5. Matthew Horn says:

    This feature went live with the release of Flex SDK 4.1/Flash Builder 4.0.1 today. You can get more info at the Flex team blog here:http://blogs.adobe.com/flex/archives/2010/06/flex_sdk_4_and_flash_builder_4.html

  6. kannan says:

    Hi dkoestle,
    I have tried the new flex SDK, the RTL stuff is awesome. I am currently trying to create localized Arabic application from a existing English application. I have done all the necessary and everything works good. Except, we I try to retrieve datas from my database via my application, I end up with some symbols instead of arabics. Can any one please help me.

    thanks & regards,
    kannan

  7. kannan says:

    how to modify an alert box to rtl? pls help