While all Flex Mobile apps are compatible with tablet and phone sized screens in both iOS and Android, a developer must put extra effort into making optimized UIs for tablets vs. phones. This article, and source code, explains how to produce a single Flex Mobile app that has UIs optimized separately for tablets and phones. The goals are to share as many components as possible, while also acknowledging that tablets and phones have very different application flows.
Separation of Design
The biggest design consideration is that while some of the UI components can certainly be shared, some must be unique to tablets and others to phones. Therefore it is important to identify which components are device type specific, and which can be shared. Generally speaking, device type specific components will be those that are for navigation, and layout. Shared components will generally be the main content views.
There is always that possibility that no components can reasonably be shared; and that's ok. The decision to have two completely separate applications can greatly simplify the process of producing a combined application. The result will be a larger application size, and double the work to maintain common feature sets; which can be perfectly acceptable in some cases.
Separation of Control
Because tablet and phone UIs vary mostly around navigation and layout, a combined app must provide for separation of control for shared components. For example, a tablet interface often provides a left-side list with a right side content view. A phone interface for the same application would generally provide a full screen view of the list, and a separate full screen view of the content selected from the list. Clearly there must be separate logic for what occurs when the user selects from the list on a tablet versus a phone. The list and content view components can be shared, but the logic around the navigation must be separate.
Implementing a Combined Application
The first step of implementation is to determine on which device type the application is being executed. Flex Mobile does not provide a built-in method for detecting tablet vs. phone, so we must derive our own. My application use the simple test that if a screen is greater than 5" in either width or height, it must be a tablet. Here is the code for that:
Determining Tablet or Phone
/** Measures the screen size, and then returns true/false based on whether
* the width or height of the screen is greater than 5 inches. */
protected function screenIsGreaterThan5Inches():Boolean {// Find the physical size in inches, using the devices real DPI
var width:Number = application.stage.stageWidth / application.runtimeDPI;
var height:Number = application.stage.stageHeight / application.runtimeDPI;
//this will resolve to the physical size in inches...
//if greater than 5 inches, assume its a tablet
return ( width >= 5 || height >= 5);
}
Instantiating Control with an Application Manager Singleton
Using the singleton design pattern, I have created an "ApplicationManager" class that detects and starts the correct UI controller. The main Flex Application class simply instantiates the first reference to the ApplicationManager singleton when it first starts.
The ApplicationManager then uses the above logic to determine whether a executing device is a tablet or a phone. For a tablet, the ApplicaitonManager passes control to the TabletController, and for a phone the PhoneController. Both of these classes implement the IController interface.
Designing Control for Common and Dissimilar Events
You will probably immediately notice that I choose not too define many functions in the IController interface. I could have easily made the IController interface a central function list of all of the navigation methods possible; for example "personListItemClicked". While this would have made initial definition and implementation easier, it would have strictly implied that all navigation actions on a tablet have a corresponding action on a phone and vice-versa. I find that this is not the case. Therefore I choose to use custom event classes, dispatched off the top level application, as the main method of detecting navigation commands from the user. This has the benefit that the tablet and phone can share some similar events, and have dissimilar events as well.
You could easily use an MVC framework like Cairngorm or PureMVC to provide control logic across both the tablet and phone interfaces.
Example Code
Here is a link to a Flex Builder 4.6 Mobile application archive with the above code and debug configurations for iPad and iPhone.
