Tutorials

Dynamic UI patterns

14 Comments 11 May 2011

Dynamic UI patterns

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

Post to Twitter

Your Comments

14 Comments so far

  1. There’s no physical back button on Honeycomb (Android 3.0). Is the virtual button handled as if it were a physical one in Flex?

  2. Hannes says:

    Hello,

    how should this be done in a professional, extendable application?

    An application full of if/else is not really maintainable and testable.

    Thanks
    Hannes

  3. Julien says:

    Hello, when I lauch app in my iphone, I don’t see the list of employee.

    The CSS File was apply, but I think that XML file doesn’t include.

    I have to change my ant task?

    How I can include this file?

    Thanks

  4. I suppose flash.system.Capabilities returns QNX on Playbook tabletOS?

  5. david roux says:

    I don’t succed this code :
    many errors

    Erreur lors de l’analyse de la feuille de style : E:\Mes documents2. Projets\Flex 4\MobileLocal\src\style.css

    +

    ViewNavigatorApplication : Impossible de résoudre en une implémentation de composant.

    +

    1017: La définition de la classe de base HTTPServiceWrapper est introuvable.

    Is there a library to import ?

    (sorry for english written, I’m french and very bad in Shakespear’s language!!!)

  6. admin says:

    @David Je suis français aussi, no soucy. you’re using Flash Builder 4.5 and Flex 4.5 SDK right? Remember that it’s a Flex mobile project also.

  7. david roux says:

    On va se le faire en français alors,
    j’utilise bien Flash Builder 4.5 et Flex Hero (donc sdk 4.5.0)

    j’ai créé un “Projet Flex Mobile” nommé “MobilLocal” puis collé le code …

    j’ai du raté une marche mais je vois pas ou,
    il ne connait pas les objets “mobile” que vous utilisez (ViewNavigatorApplication, HTTPServiceWrapper, …)

    pour info, je suis toujours en version d’essai de Flash Builder 4

  8. david roux says:

    bon je vais pas t’embêter plus longtemps,
    j’arrive à faire fonctionner celui la :
    http://coenraets.org/blog/2010/12/tutorial-flex-for-android-in-90-minutes/

    en plus je pense que c’était pas l’objet du post (de se trainer des débutants en appli mobile),
    je voulais juste faire un test, j’y arrive avec le lien donc je vois à peu près ce que ca donne sur un pc de bureau, pour l’instant ca me suffit

  9. Alex Co says:

    Hi Michaël!
    how to make an application for detecting the group passed on the List, not the Detail view?

    for example xml:

    1
    James
    King
    james_king.jpg

    2
    Julie
    Taylor
    julie_taylor.jpg

    3
    Eugene
    Lee
    eugene_lee.jpg

    __
    Thank You!

  10. Sanchit says:

    Hi Michael, Flex 4.5 is great for all mobile platforms. One thing I notice currently is that remote call to webservices/xml is parsed very slowly on Android. The same call though works very fast on iOS. Do you have any suggestion on how I could improve on this? I have tried XML, Webservice and HTTP using DataServices and the result on Android isn’t very great. The amount of data I am loding would be 50 Xml Nodes.

  11. admin says:

    @sanchit Interesting. Is it the loading time from the server, or the time for parsing the XML file on the client side ?


Trackbacks/Pingbacks

  1. Mobilizando o Twitter – Edição. 01 - May 28, 2011

    [...] #escritóriocio.uol.com.br/tecnologia/201…  brunofuster Bruno Fuster RT @nvasconcelos_: riagora.com/2011/05/dynami… Como aplicar as diferenças de UI do android e do iOS no Flash Builder  macworld_brasil [...]

  2. @renaun posts: Designing and Skinning Mobile Applications Link Roundup - June 8, 2011
  3. Eskimo, skins your mobile apps | RIAgora - July 24, 2011

    [...] to explain how to adapt dynamically the layout of your app depending on the screen resolutions, how to adapt your app to some UI patterns or how to manage custom gestures. Jason’s blog is also a fantastic set of resources. I was [...]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2014 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes