Preventing TabNavigator from selecting tabs.

I’ve been working for couple of weeks now on a large Flex 3 based project at the company I work for. It’s a multi-user  publishing system for various flash based creative types, that aids and alleviates the whole creative from concept creation through approval cycles to deployment on various platforms.

In this project I had a page that contained a tab navigator with a custom editors inside of it. It all worked fine, before I needed to make sure the data on the page is saved before going onto another tab. To make this work I had to essentialy force tab navigator to cancel select child action after user click on the other tab and the data on the current weren’t saved.

This proved to be a problem.

After a bit of poking around I discovered there are 2 viable solutions to this problem.

1. to use IndexChangedEvent.CHANGE event listener.

This solution involved storing current selected child index in a variable , assigning the IndexChangedEvent.CHANGE listener via actionscript to the tab navigator and then checking whether page was saved and if it wasn’t setting the selectedIndex back to the stored index.

Problem with this solution was that it allowed tab navigator to change momentarily to that tab I was clicking on and then changing back. I needed a solution where the tab wouldn’t render at all…

2. to use click event.

Nice things about Mouse Events is that they can be prevented from propagation. So even though the initial click event is captured, with stopImmediatePropagation it can be stopped before the components does it’s implementation. 

With this solution I had to check that I will stop only the actions that happened when user clicked on the tab bar and not on the tab content. Otherwise nothing inside the tab container would respond to mouse events which would be rather undesirable effect..

This example illustrates this technique and all the code is pasted bellow.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500"
height="300" layout="vertical" creationComplete="init()" verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.controls.tabBarClasses.*;