The Browser’s Back Button in AS3 (Deep Linking). The Flex 3 way.

May 20

The Browser’s Back Button in AS3 (Deep Linking). The Flex 3 way.

Introduction.

Fortunately, Flex 3 has full support for deep linking, that means that you can enable the browser’s back button really easy. The guys from Adobe made 2 classes for this purpose, the HistoryManager class and the BrowserManager class. Both of them are singleton. You cannot use both BrowserManager and HistoryManager in the same application. So in the next example, we will see how to enable the browser’s back button in a fast deployed Flex 3 application, using only mx tags and of course the provided history Javascript file.

Using the browser’s back button with Flex 3 in a fast deployed application.

In this example we will use the HistoryManager class, although it doesn’t offer us the flexibility that BrowserManager class does, it helps us to enable the browser’s back button really quick using only mx tags.

Ok, first we have to copy in our project folder the Adobe provided history folder. If you use Flex 3 Builder you have to follow the next steps:

1. Select Project > Properties.
2. Select the Flex Compiler option.
3. Select the “Enable integration with browser navigation” option.

After that, Flex 3 Builder will copy the history folder in your project folder.

If you use FlexSDK, just copy the history folder located here: (FlexSDK main folder) /templates/client-side-detection-with-history/history to your project folder. The next steps are really easy.

Step 1: Create your mxml file. Here we will create an accordion that changes whenever the browser’s back button is pressed. Here is the code.

[-]View Code XML

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Accordion
		historyManagementEnabled="true"
		height="80%"
		width="30%"
		>
		<mx:VBox label="Panel 1">
			<mx:TextArea width="100%" height="100%" borderColor="0xFFFFFF" text="Some text for the first panel." />
		</mx:VBox>
		<mx:VBox label="Panel 2">
			<mx:TextArea width="100%" height="100%" borderColor="0xFFFFFF" text="Now here we have some text for the second panel." />
		</mx:VBox>
		<mx:VBox label="Panel 3">
			<mx:TextArea width="100%" height="100%" borderColor="0xFFFFFF" text="And to finish the things" />
		</mx:VBox>
	</mx:Accordion>
</mx:Application>

The historyManagementEnabled=”true” line does all the trick. Now you have an accordion that reacts to browser’s control. Of course the historyManagementEnabled=”true” property is available not only to the accordion container, but also to other containers that have user interaction (like TabNavigator for example). I think this is the easiest way to enable the browser’s back button.

Ok, now that we have the SWF, we have to place it into a HTML wrapper. The best way to insert a SWF into a HTML is by using SWFobject. In your project folder copy the swfobject.js into a folder with the same name as the file (swfobject). Here is the HTML code for the wrapper

[-]View Code HTML4STRICT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
 
		<title>Back button example in Flex</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="history/history.css" rel="stylesheet" type="text/css"/>
		<link href="main.css" rel="stylesheet" type="text/css"/>
 
 
    </head>
 
 
	<body>
 
        <div id="flashcontent">
            This content here will be replaced by the SWF.
        </div>
		<script src="swfobject/swfobject.js" type="text/javascript"></script>
        <script src="history/history.js" type="text/javascript"></script>
		<script type="text/javascript">
		   var so = new SWFObject("backbutton.swf", "backbutton", "100%", "100%", "8", "#CCCCCC");
		   so.addParam("allowScriptAccess", "always");
		   so.addParam("swliveconnect", "true")
		   so.write("flashcontent");
		</script>
 
    </body>
</html>

The code simply creates a div with “flashcontent” id and puts in it the backbutton.swf (for better understanding please check the swfobject examples). Don’t forget to add the main.css to your project folder for a nice layout. This is it, you have enable the browser’s back button in your fast deployed application.
Here is a working example.

I think that Adobe made a great thing with the HistoryManager class and the BrowserManager class in Flex, so that standard browser experiences are the same with Flash as they are with HTML. If you have any questions please leave a comment.

Cheers!

mindnoise.blog