Over a million developers have joined DZone.

Flex Mobile - Getting Rid of the Action Bar

· Web Dev Zone

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" 
			creationComplete="init(event)" 
			xmlns:s="library://ns.adobe.com/flex/spark" >
	<fx:Script>
		<![CDATA[
			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
			{
				clearInterval(intervalID);
				navigator.pushView(views.ActionBarHomeView);
				
			}
			
		]]>
	</fx:Script>
</s:ViewNavigatorApplication>
<?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." />
	
</s:View>

Topics:

Published at DZone with permission of Terrence Ryan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
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.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}