Mirroring layouts in Flex

Now that Flex 4 is out the door, don’t be fooled into thinking the Flex SDK team is resting on their laurels! We are planning a followup release to Flex 4 which should come out in the first half of 2010. This release will include support for Flash Player 10.1 and AIR 2 as well as contain some new feature work and critical bugfixes.

The feature I’m most excited about is the new “layout mirroring” feature. This feature allows developers to mirror their layouts for right-to-left locales. The intent of this feature is to trivialize repurposing a Flex UI designed for a left-to-right language (like English or French) for a right-to-left language (like Hebrew or Arabic).

To support layout mirroring, some new APIs have been added. The two most important are layoutDirection (defined by the new interface mx.core.ILayoutDirectionElement) that is settable on any UIComponent, GraphicElement, SpriteVisualElement or UIMovieClip. [Note: on UIComponent, layoutDirection is a style and for GraphicElement, SpriteVisualElement and UIMovieClip, layoutDirection is implemented as a property].

The new layoutDirection property can be set to “ltr”, “rtl”, or null. When set to “rtl”,  a mirroring transform is applied to mirror the layout. This mirroring transform is implemented atop the advanced layout features that was introduced in Flex 4.

What about text? First off, applications that depend on layout mirroring need to use FTE text which supports bi-directionality. If you have a Spark based application or component, FTE is used by default. If you intend to mirror a Flex 3 application, you need to enable FTE text in order to have bi-directional text. Once the text in your application is FTE-based, all you need to do is turn “on” bi-directionality by setting direction=”rtl” on the text components (this style inherits, so you can simply set it at the top-level and it will percolate down). This will ensure the default embedding level of all text blocks in your application is right-to-left.

There are definitely some parts of your application you will want to hand-tweak as the UI gets mirrored. However, in order to get your feet wet, I’d suggest taking the application you want to mirror and setting layoutDirection=”rtl” and direction=”rtl” on the top-level container of your application. This will percolate down through the display list and mirror according to the default Flex implementation.

So, what does this all mean? Well, on Tuesday, 3/31/10 the layout mirroring feature signed off!  This is a huge accomplishment for the SDK Dev and QA teams as this feature required a lot of coordination across multiple engineers on the team (as well as input from our globalization teams and external customers). I encourage people to use the multi-SDK feature in Flash Builder 4 to download a build containing the newly landed layout mirroring feature, and give it a try. The best build to download would be 4.1.0.15132 or any build posted after that changelist. To learn more about the layout mirroring feature, please read the specification and if you find issues, file them in JIRA.

Edit (4/4/10): I wanted to point out that the advanced data visualization components like the Advanced DataGrid and charting libraries also support mirroring. You can read more about that here.

6 Replies to “Mirroring layouts in Flex”

  1. Any chance the next flex update will offer a formal support for transitions in virtual layouts (e.g. while filtering items in a List, allow hooks to animate items removed, items remaining, items added etc ?)

  2. @anon – yes, we are thinking about adding native support for data effects to our spark list based components. i would encourage you to file a feature request at ideas.adobe.com and vote on it 🙂

  3. Hi Deepa,

    You presentation today in the adobe developer week online is very good and informative. Is there any link where I can re look the session?

    Thank You

Leave a Reply

Your email address will not be published. Required fields are marked *