How to stop worrying and win the war! Mobile development has been arduous, volatile, and fragmented to say the least.

Every device has a vastly different approach to developing applications and code portability is almost non-existent. Now, thanks to Adobe Flash Builder you can use the Flex framework to build an application that will run on just about any mobile platform! That’s why Adobe canned flash in a mobile browser, so they can own the app space!

I’m a pretty skeptical developer and have a lot of distaste for mobile development approaches over the years (I’m looking especially at you RIM!). Each platform and their pains. RIM has Java feature fragmentation, poor component design, and a bizare deployment model. Android has device fragmentation, poor component design, and a lame linkage between the view and controller code. iOS is just messed up. Try using a COCOA component in a logical way and your application will cease to function! Now Flex is no exception. I mean, it’s running on actionscript for crap sake! There’s is no native MVC support, localization is a joke, and the mobile side is at it’s absolute infancy.

That said, if mobile development is going to suck.. at least it will only suck once! The ability to deploy to all devices is amazing!! And the performance is suprisingly great.. also, the audio / video codec issues are normalized because the app is running on top of a local AIR installation. So if you want to win the war, cut cost, and hold on to your sanity.. just follow this Flex Mobile survival guide and you might just make it out alive!

1. DPI (Dots per Inch)

Every device not only has a different DPI, a different resolution, and a different aspect ratio. Flex supports DPI scaling, so you set the DPI to the lowest range and it will auto scale up and size reference that you set in your view components. In your Spark ViewNavigatorApplication item, set the applicationDPI property = “160”. This way, whenever you position an item on the screen it will scale up to the other device DPI’s. Scaling down is really ugly in Flex unfortunately. Here’s a great article about how this works:

http://www.adobe.com/fr/devnet/flex/articles/mobile-skinning-part2.html#…

2. Vectors

Use vector artwork for everything you possibly can! Bitmap images don’t scale up, so make them vectors. SVG and EPS images don’t work so well, Flex really wants FXG files. These can be created in Adobe Illustrator and fine tuned in either a text editor or in Adobe Flash Pro. For more information about what a vector image is, check out wikipedia: http://en.wikipedia.org/wiki/Vector_graphics

3. MultiDPI Bitmaps

If you must to use a picture, use a Multi-DPI Bitmap. If your application is supported on both iOS and Android and runs on tablets and phones, you will be making at least 3 different images for each bitmap in your application. This applies both to the normal assets as well as the splash screen. The 320 DPI image will be 2x the size of the 160 DPI image, and the 240 DPI image will be 1.5x the size of the 160 DPI image. This is similar to how you need [email protected] to specify retina display images in iOS development.

<s:Button>
    <s:icon>
        <s:MultiDPIBitmapSource
            source160dpi="@Embed('/assets/frog160.png')"
            source240dpi="@Embed('/assets/frog240.png')"
            source320dpi="@Embed('/assets/frog320.png')"/>
    </s:icon>
</s:Button>

Here’s a great article about how this works: http://blogs.adobe.com/jasonsj/2011/06/using-bitmaps-mobile.html

4. Don’t use a bitmap for your splash screen

Flex splash screens using a bitmap as a source cannot accomidate all of the different devices sizes. Don’t even bother trying. I’m sure they will work this out in the future, but for now just make an application preloader in Adobe Flash Pro and export it as a Flash animation. Then simply use this as the preloader class. At least as of Flash Builder version 4.6, it will save you a lot of headache.

<s:ViewNavigatorApplication …
…
splashScreenImage="@Embed('assets/images/LoadingScreen.swf')">

5 States for Orientation and Device

For mobile devices you need to always consider whether you are on a tablet or a phone, and if it’s portrait or landscape. Save yourself a bit of trouble and use a device/orientation combination state. Trust me, this will save you from a nightmare of juggling hiding and showing junk based on rotation and if the tablet looks to big!

<s:states>
	<s:State name="portraitPhone"   stateGroups="portrait,phone"/>
	<s:State name="landscapePhone"  stateGroups="landscape,phone"/>
	<s:State name="portraitTablet"  stateGroups="portrait,tablet"/>
	<s:State name="landscapeTablet" stateGroups="landscape,tablet"/>
</s:states>

Then add an event listener to the ResizeEvent and call a handler to set the states.

addEventListener(ResizeEvent.RESIZE, resizeHandler);

private function resizeHandler(event:ResizeEvent):void {
	var isPortrait:Boolean = view.height > view.width;
	var isTablet:Boolean = view.height > 960 || view.width > 960;
			
	view.currentState = (isPortrait ? "portrait" : "landscape" ) +
							(isTablet ? "Tablet" : "Phone");
}

6. iOS vs Android

Android apps have a different navigation bar style then the iOS apps to. First off, because Android devices have a physical back button they don’t need a “Back” navigation button in the navigation bar. iOS apps on the other hand to. Android devices have a left aligned title with buttons on the left and iOS apps have a centered title with beveled buttons on either side. The Adobe Flex team put in a nice little present and gives you the “beveled” defaultButtonAppearance on the ActionBar. This makes the navigation bar buttons look like iOS buttons. So just add this below for multi OS style support and you’re good to go!

@media (os-platform: "ios") {
	s|ActionBar {
		defaultButtonAppearance: "beveled";
		textAlign: center;
		titleAlign: center;
	}
			
	.backButton
	{	
    	        skinClass:ClassReference("spark.skins.mobile.BeveledBackButtonSkin");
	}
}

Then in the back button declaration, you can just set it’s visibility to be the isIOS value and the back button will only be seen on iOS apps!

<.. visible="{DeviceInfo.isIOS}" ../>

7. Robotlegs

Check out Robotlegs for a good MVC framework to help keep the project clean. I’m still on the fence, but I can see benefits for more complex projects.

For more information about RobotLegs go here: http://www.robotlegs.org/

For a quick start project template go here: http://dougr.net/2011/07/10/robotlegs-project-skeleton-with-tdd/

8. Package AIR in the app

Instead of requiring the user to also have AIR installed on their Android device, you can choose to “Export application with embedded AIR runtime”.

http://help.adobe.com/en_US/flex/mobileapps/WSc5cd04c102ae3e97-67096d261…

Post comments below if you have other great survival skills that others should know!