Moods, Tutorials

Flex and layout mirroring

7 Comments 26 July 2010

Flex and layout mirroring

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.

Post to Twitter

Your Comments

7 Comments so far

  1. tINK says:

    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).

  2. admin says:

    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.

  3. Ibrahim says:

    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 ?

  4. admin says:

    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.


Trackbacks/Pingbacks

  1. 50 resources to get up to speed with the Flash Platform : Mihai Corlan - July 29, 2010

    […] Michaël Chaize’s layout mirroring article […]

  2. 有助于Flash平台开发提速的50个学习资源 « echo "RenYuan's Blog" - August 6, 2010

    […] •        介绍Flex 4(Spark)布局 •        新的动画引擎 •        Michaël Chaize的布局镜面文章 •        用Flash Builder 4风格化Flex 3组件 •        Chet […]

  3. 有助于Flash平台开发提速的50个学习资源 – 新闻资讯 – 9RIA.com天地会 – 论坛 | 谱曲 - August 8, 2010

    […]       介绍Flex 4(Spark)布局•        新的动画引擎 •        Michaël Chaize的布局镜面文章•        用Flash Builder 4风格化Flex 3组件 •        Chet […]

Share your view

Post a comment

Who am I ?

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.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2018 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes