Flex TabNavigator Component - Browser Back/Forward Problems Resolved



Many of us are aware of the inherent problem with Flash and browser navigation. The browser buttons are generally independent of the Flash movie and lead to all sorts of problems. For example, let’s say you have an app with several screens that is guiding the user through a checkout process. If at any point the user hits the refresh or back button, they are sent to the previous page or site they were viewing. This assumes no additional coding has taken place to accommodate this problem. A common argument from a development standpoint is “why should I have to write extra code to handle the browser controls?”.

I’d like to introduce you to the Flex TabNavigator component:

Don’t get too excited just yet, I’ll explain what I mean shortly. Let’s take a quick look at the code used to generate this layout:

</p> <p>

The reason I say not to get too excited just yet is because the TabNavigator example above is embedded in an HTML page. This won’t do anything for us unless we’re building a true RIA which generally consists of an all Flash interface. So if you click on this link you’ll launch the TabNavigator in a new window. The back/forward buttons should now sync with the tab clicks.

Also, notice how the layout doesn “intelligent” sizing when you resize the browser window. Instead of just scaling to fit the window, the Flex engine has intelligence where components can resize proportionately to create truly dynamic layouts. I’ll post a better example later. Also, the refresh button issue hasn’t been resolved but I’ll post a workaround for that as well.



Comments are closed.