Geeks With Blogs
Mohamed Haamdi All about Mobile

Changing layout when the device orientation change is so common in many mobile apps that one might think it is automatic.But unfortunately it isn’t.

Given Adobe FLEX multiplatform nature it is wrong to listen to device OrientationChange but you should listen to resize Events.

First step , Add this code snippet to your view :

   1: import mx.events.ResizeEvent;
   2:             
   3:             protected function application1_resizeHandler(event:ResizeEvent):void
   4:             {
   5:                 if (width>height)
   6:                     this.currentState="landscape";
   7:                 else this.currentState="portrait";
   8:             }

Of course you need to listen to call this method every time the view changes its size.You do this by adding resize Listener to your View declaration

   1: <s:View ..... resize="application1_resizeHandler(event)" >

Then we need to add two states that we can use to dynamically modify our orientation

   1: <s:states>
   2:         <s:State name="portrait"/>
   3:         <s:State name="landscape"/>
   4: </s:states>

Then we should use either the Design mode in Flash Builder or manually do the orientation Change.For Example i tell the TileLayout to lay its content in columns if in landscape or in row if in portrait:

   1: <s:TileLayout id="Tiles" orientation.landscape="columns" orientation.portrait="rows" horizontalGap="0" verticalGap="0"/>

So that’s it and this was my first blog. Over.

Posted on Saturday, February 11, 2012 3:40 PM Adobe Flex | Back to top


Comments on this post: Detect Orientation Change in Adobe Flex Mobile

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © midoBB | Powered by: GeeksWithBlogs.net