Monthly Archives: March, 2010

Support for right to left layouts in Flex 4.x (aka Mirroring)

In the past couple of weeks, I’ve been working on a new feature in the Flex SDK that we’ve been calling “Layout Mirroring”. Since flash player 10’s text engine now supports right to left text, it was a natural progression for the Flex SDK to support RTL (right to left) layouts. This feature did not make it into the Flex 4 release (which we’ve pretty much wrapped up, but, hasn’t been kicked out the door, officially). However, we’ve started developing and testing on Layout Mirroring for a future release of Flex 4. I’ll call it 4.x until there is an official name for this release that our trusty product managers will allow me to talk about.

The specification for this feature was pushed out to our open source site a few weeks ago:

Layout Mirroring Spec:

http://opensource.adobe.com/wiki/display/flexsdk/Layout+Mirroring

While the code and testing for this feature is a pretty big effort (We need to make sure all of our components mirror correctly in a RTL scenario), the API changes for Flex Developers are minimal. We have just added one style “layoutDirection” to all of our components that takes a value of “ltr” or “rtl”. layoutDirection is actually both a style and a property (which gets a bit confusing sometimes). The reason for having layoutDirection as a style and property is to allow our graphic elements (which don’t support styles) to also use the property.  The default value for layoutDirection is “ltr”. Here is an quick screenshot of a LTR layout vs a RTL layout.

Simple default Left to Right layout using MX and Spark components:

RTL layout where layoutDirection=”rtl” and direction=”rtl”

Note, this feature is still under development, so, there are some bugs around placement of Form labels and the error tips… but, hopefully, the previous screenshots give you an idea of what changing the layoutDirection style will give you.

There are a couple of confusing areas that people tend to run into when using layoutDirection=”rtl” that I want to call out:

1. When using layoutDirection=”rtl”, you almost always want to use direction=”rtl”. The direction style controls text alignment, so, if you don’t use it, your text will likely not align to the right.

2. When using RTL layouts with MX components, you should use the Flash Text Engine to get support for bi directional text. The Spark components use FTE by default, but, the MX components do not. To use the Flash Text Engine for MX components, check this option in your Flash Builder compiler options.

3. The direction style actually conflicts with a direction property that is on many of the MX components like ProgressBar or the Tile container. Therefore, you won’t be able to specify direction=”rtl” inline because you will get a compiler error. Instead, you should set the direction style with these components in css or using myTile.setStyle(‘direction’, ‘rtl’);

4. When you set layoutDirection=”rtl” on a parent container (like Application), all of the children inherit this value. However, not all of the Flex Spark and MX components will mirror. We are not mirroring components that we believe developers won’t want mirrored. This includes:

– AIR HTML component, Label, RichText, VideoPlayer, Image, BitmapImage, RichEditableText, and Text.

If you do want one of these components mirrored, you can set layoutDirection=”rtl” directly on the component instead of allowing it to get inherited from its parent.

Now that I’ve put all of this information regarding layout mirroring out there, please give it a try in our 4.x nightly builds. You can find builds with the ‘Layout Mirroring’ code at:

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

I would love to hear feedback from people about whether we are mirroring our components correctly for RTL layouts. I’m not a native speaker in any RTL languages (nor are the developers on this feature), so, we may not be catching some fundamental behavior correctly for RTL layouts.  For example, should a CheckBox icon mirror? Should a Video player be mirrored? Does the DateChooser calendar component look correct for a RTL layout?  … your comments are welcome.

Update 3/10/10:

I updated the RTL screenshot of a Flex app. The CheckBox icon was un-mirrored in recent builds due to feedback from some native speakers. Also, I figured out how to make the Form Item Labels work in both LTR and RTL layouts. Note, the tooltip position in the RTL screenshot is still a bug that is open.

Also, here is the code for this example:

Source: MirroringSparkProject.mxml

SWF: MirroringSparkProject.swf