[DB75]: Flex TabNavigator and Browser Refresh

March 21, 2005

Flex TabNavigator and Browser Refresh

I posted last week about the forward/back browser buttons and how Flex has built-in support to handle them. I also mentioned that I would follow up with a quick fix for handling the browser refresh problem. The basic approach is to use a SharedObject (aka Flash Cookie) to store the currently selected tab and restore the last selected tab when the page is refreshed. You can see an example by clicking here. Be sure to click around and then refresh the page.

Whenever a tab is selected, the index of the selection is written to the SharedObject. The handleTabChange method is called and writes the selected index to the SharedObject. Whenever the page is refreshed the application checks for the existence of the index variable in the SharedObject and then sets the last viewed tab. The code looks like:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="restoreSelectedTab();">

<mx:Script>

function restoreSelectedTab()
		{
			var so = SharedObject.getLocal("cookie");
			tabNavigator.selectedIndex = so.data.index;
		}
		
		function handleTabChange(event)
		{
			var so = SharedObject.getLocal("cookie");
			if(event.newValue > 0)
				so.data.index = event.newValue;
			so.flush();
		}
	</mx:Script>

<mx:Panel id="panel" title="M2M Portal" width="100%" height="100%">
		<mx:TabNavigator id="tabNavigator" width="100%" height="100%" change="handleTabChange(event);">
			<mx:Canvas id="Dashboard" label="Dashboard">
	
			</mx:Canvas>
			
			<mx:Canvas id="Monitor" label="Monitor">
			
			</mx:Canvas>
			
			<mx:Canvas id="Alarms" label="Alarms">
			
			</mx:Canvas>
			
			<mx:Canvas id="Behaviors" label="Behaviors">
			
			</mx:Canvas>
			
			<mx:Canvas id="Commands" label="Commands">
			
			</mx:Canvas>
			
			<mx:Canvas id="Accounts" label="Accounts">
			
			</mx:Canvas>
			
			<mx:Canvas id="Users" label="Users">
			
			</mx:Canvas>
			
			<mx:Canvas id="Devices" label="Devices">
			
			</mx:Canvas>
			
			<mx:Canvas id="Logs" label="Logs">
			
			</mx:Canvas>
			
			<mx:Canvas id="Map" label="Map">
			
			</mx:Canvas>
			
			<mx:Canvas id="QoS" label="QoS">
			
			</mx:Canvas>
			
		</mx:TabNavigator>
		
		<mx:ControlBar width="100%">
		</mx:ControlBar>
	</mx:Panel>
</mx:Application>

I'll continue to extend this example in the coming weeks. Posted by dennis baldwin at March 21, 2005 09:45 PM

Comments