Adapting Flex Mobile Projects Based on Form Factor

A quick follow up on my last post. Here’s two video demos of the app (FormFactorStyles.fxp) showing how to write a single app that targets phones and tablets using the Flex SDK and Flash Builder 4.5.1.

The first video shows how I apply separate phone and tablet skins using the CSS technique seen here. The Application changes behavior based on the existence of each skin part (e.g. the two navigators). To adapt for ViewNavigator navigation (i.e. popView() and pushView()), views instead dispatch NavigateEvents that the application listens to and determines which ViewNavigator to act on. More details on that in a future post.

This second video shows how the application adds in form-factor specific behavior, again based on the presence of skin parts as well as the utility functions in my FormFactorUtil class. In portrait mode, the primary ViewNavigator is hidden automatically. This feature will be coming up in Flex 4.6 with the new SplitViewNavigator component. I’ve added event handlers for swipe gestures to hide and show the ViewNavigator. This video also shows the exact same project but running on an Android phone and tablet.

Keep in mind that I’ve written this single app that can runs on Android phones and tablets, Apple’s iPad, iPhone and iPod as well as the BlackBerry Playbook. For more information on mobile development with the Flex SDK, go to Adobe’s Flex Developer Center.

Share on Facebook