Reflow Flex mobile app content using s:states

I am enjoying Flex 4.5 more and more as I learn how to build mobile apps. One of the characteristics of mobile app is the orientation of the device. It is possible to reflow the mobile app content as the device is held in portrait or landscape orientation. One simple strategy is to use spark TileGroup component. Constraint the tile dimension to the edges of the app like:

<s:TileGroup left=”0″ right=”0″ top=”0″ bottom=”0″>

As the tile resize, the content would reflow.

However, a more flexible approach is to use view states: one for portrait and one for landscape:

<s:states>

<s:State name=”portrait”/>

<s:State name=”landscape” />

</s:states>

Now you can reposition a button when the device is switch to state “landscape” using code like this:

<s:Button label=”Submit” id=”myButton”  x=100″ y=”100″ x.landscape = “200” y.landscape=”200″ />

Lastly we can use the resize event listener to monitor when the device orientation is changed:

protected function view1_resizeHandler(event:ResizeEvent):void
{
if (screen.width < screen.height)
{
currentState = “portrait”;
}
else
{
currentState = “landscape”;
}
}

Apart from the above, we can even apply state transition for better UI experience:

<s:transitions>
<s:Transition fromState=”*” toState=”*”>
<s:Parallel>
<s:Move duration=”500″ targets=”{myButton}” />
</s:Parallel>
</s:Transition>
</s:transitions>

That’s it. Simple. Obviously there are lots more options to control the states and its transitions. It is all in the Flex 4.5 Help.

Advertisements

~ by brianchau on May 15, 2011.

One Response to “Reflow Flex mobile app content using s:states”

  1. Magnificent beat ! I would like to apprentice while
    you amend your site, how could i subscribe for a
    blog web site? The account aided me a acceptable deal.
    I had been a little bit acquainted of this your broadcast provided bright clear concept

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: