Over a million developers have joined DZone.

Dynamic Flex UI patterns for Android and iOS

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Thanks to Flex 4.5, you can rapidly build and deploy mobile applications on Android. In June, we’ll update both the framework and Flash Builder to deploy your applications on iOS. The ViewNavigator architecture is valid on both platforms: you navigate from a view to another one with nice transitions between them. That said, there are still UI pattern differences between mobile platforms. In this article I’ll focus on Android and iOS UI patterns, and I’ll explain how you can target both. The code will dynamically adapt the UI of my views to the platform conventions. Here are two screenshots of my sample app running on iOS and Android. One code base, one application, two UI patterns:

In my sample application, on iOS, the title is centered, I display a back button with a beveled effect and the action bar is blue. The same application on Android doesn’t display a back button (as there’s always a hard back button on Android devices), aligns the title on the left and uses a grey background color.

The back button visibility

To dynamically display the back button, you need to determine what OS is running your app. To do so, I check the first three letters of the Flash version. This information is available in the flash.system.Capabilities class. It returns “IOS” for iOS or “AND” for Android.

The Back button on iOS is part of the navigation content of the action bar. The navigationContent property of your view is an array of objects. If you just try ‘myButton.visible=false’ on Android, your title won’t just align on the left as the space for your button will still be used. Don’t play with the visible property; directly instantiate the button on iOS and add it to the navigationContent array.

			import spark.events.ViewNavigatorEvent;
			protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
				// TODO Auto-generated method stub
				if (flash.system.Capabilities.version.substr(0,3) == "IOS"){
					this.navigationContent = [backButton];
		<s:Button   label="Back" id="backButton" click="navigator.popView()"/>

Styling the action bar

To style the ActionBar component, I’m using CSS Media Queries which helpyou specify attributes that depend on the running platform and on the application DPI. In this case, I’m just checking if the app is running on iOS. Notice that the defaultButtonAppearance property set to “beveled” automatically creates the iOS style for button (the beveled effect but also the arrow shape).

@namespace s "library://ns.adobe.com/flex/spark";
@media (os-platform:"IOS"){

Additional resources

This tutorial has been inspired by the excellent presentation titled “Multi-density/Multi-platform UI talk”  and presented by Nacisso Jaramillo at 360Flex. You can download the slides on his blog: http://www.rictus.com/muchado/2011/04/14/slides-on-multi-densitymulti-platform-ui-talk-from-360flex/

You can also download the source code of my sample here:


Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Michael Chaize, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}