This month, Adobe officially launched Flex 4.1, a minor update with a major feature: layout mirroring. One year ago, I worked on a project for a customer who needed to develop an AIR application and deploy it in 40 countries. Some countries use ‘right to left’ languages such as Arabic or Hebrew, which means that Flex developers use right-to-left locales. What you must realize about RTL (Right to left) is that it targets not only text fields, but the whole user interface. Look at this screenshot of Acrobat 8 (considered by James Ward as the OS of the future) localized in Arabic by my Winsoft friends: menus, lists, combo-boxes, labels… the entire UI is mirrored !!! Notice that vertical scroll bars appear on the left instead of the right, and that for horizontal scrollbars, the thumb appears on the right side of the control instead of the left.
To support layout mirroring, new APIs have been added including layoutDirection and direction for text. To change your application’s layout from LTR to RTL, 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. This new API works with MX and Spark components.
Regarding text, you need to use FTE (Flash Text Engine) introduced in Flash Player 10 to have bidirectional text. Set the direction property to “rtl” on text components to modify the flow’s direction. I developed some samples for Tour de Flex. To get the source code for these samples, download and install the Tour de Flex application, and go to the “Flex 4 > Coding techniques” folder.
My first experiment lets you play with the two new properties layoutDirection, and direction for text. Even advanced components, such as charting controls, are supported. I only modify the layout of the panel in my samples, I don’t target the application tag.
I also noticed that the API works with all coordinates. Draw something on this panel and play with the property. Your drawing will be mirrored !!!
Now, if you want to play with a “Right to Left” text input field, try this sample:
Congratulations to the Flex SDK team for this significant achievement. If you plan to use this feature in your future Flex developments, please let me know.
I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
Andrew Trice
Christophe Coenraets
Greg Wilson
Holly Schinsky
Piotr Walczyszyn
Raymond Camden
The Co-ordinates sample doesn’t work that great. The fact that the predrawn content is mirror is fine, but then if you try drawing, it doesn’t create the lines under the mouse, instead continually mirroing the movement (not what users would expect).
yes… it’s more due to my code actually that is not “relative” regarding the drawing coordinates. I should get the x,y coordinates of the mouse regarding the application container, and then draw. The behavior would be the one that you expect. Thanks for the feedback.
i’m developing a web application that support Arabic (RTL) using Flex 3 builder.
There is no layout direction property,
is there any possible solution ?
Hi. You must try to use start a Flex 4.1 project, include your code, and then you’ll get the property. MX components can live inside a Flex 4 project.