Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Dynamic Flex UI patterns for Android and iOS

DZone's Guide to

Dynamic Flex UI patterns for Android and iOS

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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.

<fx:Script>
		<![CDATA[
			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];
				}
			}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:Button   label="Back" id="backButton" click="navigator.popView()"/>
	</fx:Declarations>

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"){
	s|ActionBar{
		defaultButtonAppearance:"beveled";
		titleAlign:"center";
		chromeColor:"0x3333AA";
		accentColor:"0x0000FF";
	}
}

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:

http://riagora.com/pvt_content/android/srcMobileLocal.zip



Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}