Over a million developers have joined DZone.

Flex Mobile - Getting Rid of the Action Bar

DZone's Guide to

Flex Mobile - Getting Rid of the Action Bar

· Web Dev Zone ·
Free Resource

Have you seen our HERE Twitch channel to livestream our Developer Waypoints series?

The viewNavigatorApplication framework in Flex 4.5 is awesome. The ability to manage the various screens of your application is really useful and powerful. But one part of it doesn't make sense in all applications.

I speak of the ActionBar. This is the UI chrome at the top of the app that contains the screen title and any application navigator features you use. This make a lot of sense in iOS or PlayBook apps, where the entire UI is software based, but in Android, you should use the hardware buttons. If all of the controls move off of the ActionBar, then depending on your needs it might make sense to get rid of it completely.

This is easy enough to do in a view, you just turn it off by setting actionBarVisible="false" on the view. This worked for me for awhile, but then I changed the way I set up my application. I followed tip number 2 on this post by my colleague Michaël Chaize. In short, I load my data on application start, and push to the first view only after the data has loaded. Makes for a great experience for the user, except that I was getting flashes of the ActionBar while the data was loading up. I can't tell what exactly is going on, but it looks like there is some sort of placeholder or default view that's not obvious.

This was a pain for me for awhile, but today I finally figured out how to fix it. On your main application page, where you define viewNavigatorApplication, set actionBar.visible=false;

Good thing to note is that this only affects the ActionBar that is visible in that little flash; if you make another ActionBar visible later, it will show up.

Here's the source:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
			xmlns:s="library://ns.adobe.com/flex/spark" >
			import flash.utils.clearInterval;
			import flash.utils.setInterval;
			import mx.events.FlexEvent;
			import views.ActionBarHomeView;
			protected var intervalID:uint;
			protected function init(event:FlexEvent):void
				this.actionBar.visible = false;
				//just a timer to simulate calling some sort of service. 
				intervalID =  setInterval(pushToFirstView, 2000);
			private function pushToFirstView():void
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" actionBarVisible="false" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
	<s:TextArea left="10" right="10" top="10" bottom="10" 
				text="Just some placeholder data, nothing exciting." />

Developer Waypoints is a live coding series from HERE, which will teach you how to build with maps and location data.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}