Layout mirroring with Flex

When Adobe officially launched Flex 4.1 many developers were excited by a major new feature: layout mirroring. Some countries use right-to-left languages such as Arabic or Hebrew, which means that many Flex developers need to support right-to-left (RTL) locales. What you may not realize about RTL is that it targets not only text fields, but the whole user interface. Acrobat 8, for example, was localized in Arabic by Winsoft. Within the application, the entire UI is mirrored, including menus, lists, combo-boxes, and labels (see Figure 1). The vertical scroll bars appear on the left instead of the right, and with horizontal scrollbars, the thumb starts on the right side of the control instead of the left.

To support layout mirroring, new APIs have been added including the layoutDirection style property, which supports layout mirroring and the direction style property, which controls text direction in text controls. To change your application's layout from left-to-right (LTR) to RTL, simply set the layoutDirection property to "rtl" . It's the easiest way to work with RTL interfaces. This new property can also be set on any UIComponent, GraphicElement, SpriteVisualElement, or UIMovieClip object. This new API works with MX and Spark components.

For text in text components, you'll need to use the Flash Text Engine (FTE) introduced in Flash Player 10. Set the direction property to "rtl" on text components to reverse the default direction.

I developed some samples for Tour de Flex to illustrate these new capabilities. To access these samples, download and install the Tour de Flex application, and explore Flex 4 > Coding Techniques > Layout Mirroring.

The first sample lets you play with the two new properties: layoutDirection for layout controls, and direction for text controls. Even advanced components, such as charting controls, are supported. If you try out the sample, you'll notice that the characters themselves are not rendered from right to left. This is because they use an LTR-based character set.

Note: The samples modify the layout of the panel in, not the Application tag.

The second sample demonstrates how the new mirroring API works with all coordinates. To see this in action, draw something in the panel below and toggle the layout direction; your drawing will be mirrored:

The third sample illustrates mirroring text in a text input control:

As you can see in the examples above, the two new direction properties in Flex 4.1 make it easy to modify the direction of your application's layout controls, text controls, or both. The layoutDirection property deals strictly with layout mirroring, or how the containers and controls are drawn on the screen. By default, this property is set to "ltr" (left to right), but you can change this value at runtime to "rtl" (right to left). The easiest way is to set this property at the Application level (in the MXML Application tag) because all the containers and controls will inherit its value. You can use either MXML or ActionScript to set this property.

For example, in MXML, you can use the following:

Alternatively, you can use setStyle() in ActionScript:

myContainer.setStyle("layoutDirection", "rtl");

You can also use CSS to set the layoutDirection property on your components:

The direction property controls the direction in which text is rendered in text-based controls. Typically, you'd use the direction property on the Application tag or the parent container of your text controls. Remember that the direction style is built into Spark text components, because those text controls use the new Flash Text Engine. To use this text engine with MX controls you'll need to adjust your compiler settings; for example:

When you use the theme compiler option to specify the MXFTEText.css theme file, the compiler replaces mx.core.UITextField components with mx.core.UIFTETextField components, which support FTE and layout mirroring on text.

When possible, set the layoutDirection and direction properties directly on the Application container. Avoid using absolute positioning and be careful with mirroring images. If you plan to mirror the contents of images (or videos), you should reverse your graphical assets in your image editing tool prior to importing them into your Flex application. Also, note that the Image, BitmapImage, and VideoPlayer controls don't inherit the layoutDirection property from their parent container. Lastly, be aware that in many components, navigation with the arrow keys changes depending on the direction of the text. Always test your components with the arrow keys.

Now that you know how easy it is to add layout mirroring behavior to your Flex application, I encourage you to download and install Flex 4.1 and start playing with the layoutDirection and direction properties.

For more information, see Adobe Flex Layout Mirroring.