mindnoise.blog

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

radu.v.valentin — Tue, 20 May 2008 12:49:23 +0000

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

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

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


 xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
 
		</span></span>Back button example in Flex<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">
                 http-equiv="Content-Type" content="text/html; charset=utf-8" />
		 href="history/history.css" rel="stylesheet" type="text/css"/>
		 href="main.css" rel="stylesheet" type="text/css"/>
 
 
    
 
 
	
 
         id="flashcontent">
            This content here will be replaced by the SWF.
        
		 src="swfobject/swfobject.js" type="text/javascript">
         src="history/history.js" type="text/javascript">
		 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");

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!

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

radu.v.valentin — Mon, 12 May 2008 23:29:19 +0000

Introduction.

Breaking standard browser experiences with Flash is an old problem and i’ve seen that although there are a bunch of tutorials for As2 and some for As3, using different or same adapted Javascript library there is still a big question mark about this issue.In the past 2 days i’ve tried to find the best solution for this problem, I’ve surf the net and i’ve found some interesting things. I’ll try to show you the solutions which i think that are best from most of the aspects. The entire tutorial is written in As3.

Using the browser’s back button with Flash.

I’ve seen many people searching for a so called As3 solution, without javascript. Well, unfortunately , there is no such solution. Imagine the SWF as a guest and the HTML wrapper as a host, you simply can’t let your guest to give commands in your own house right? Of course you are polite and give him everything he needs but if he asks kindly. He could ask kindly via Javascript.

From all the Javascript libraries for Flash (As3), that help the SWF to ask or give kindly data to browsers, i think the best is SWFAddress. The next example shows how to enable the browser’s back button using SWFAddress.

Step 1: Download the latest distribution of SWFObject and SWFAdress. You can also download the FlashIDE example and follow from there the tutorial.

Step 2: In your project folder (which should be empty right now) copy the swfobject.js and swfaddress.js into 2 folders with the same name as the files (swfaddress, swfobject). Next create an index.html that will serve as a wrapper for the swf. Put the next tags into it.

[-]View Code HTML4STRICT

 id="flashcontent">
            This content here will be replaced by the SWF.
 src="swfobject/swfobject.js" type="text/javascript">
         src="swfaddress/swfaddress.js" type="text/javascript">
		 type="text/javascript">

The code simply creates a div with “flashcontent” id and puts in it the backbutton.swf (for better understanding please check the swfobject examples). There are 2 things here that we have to pay attention to. First, the order in which we add the swfobject.js and swfaddress.js, it will always be first the object and second the address, this is very important. Second, we have to put the Javascript after we create the div because the Javascript uses the div and we don’t want it to use a null value. Don’t forget to add the main.css to the index.html by using the “link” tag
Then, add the two AS3 classes from the SWFAddress package(SWFAddress.as and SWFAddressEvent.as) to the root directory of your project.

Step3:Now we have it all set up, the index.html (wrapper), the swfaddress.js, the swfobject.js and the CSS linked to it, and the two SWFAdress class at their place. What we need to do next is to create the SWF, so compile the backbutton.as Actionscript code with Flash.(don’t forget to name the document class “backbutton”).

To understand the code you need a basic knowledge in using Flash Components. If you don’t have it, but you choose to write the code don’t forget that when you create a new component by code (ex: var cd=new ComboBox) you need to add the component also in the Library ( Drag and Drop from the Component Panel to Library)

[-]View Code ACTIONSCRIPT

package {
	import flash.display.MovieClip;
	import fl.controls.ComboBox;
	import fl.data.DataProvider;
	import flash.events.Event;
	import fl.controls.TextArea;
	import fl.containers.UILoader;
	import flash.net.URLRequest;
	import SWFAddress;
	import SWFAddressEvent;
 
	public class backbutton extends MovieClip {
		private var dp:DataProvider = new DataProvider();
		private var myCombo = new ComboBox();
		private var mytextArea = new TextArea();
		private var mySWFAddress=SWFAddress;
		private var image=new UILoader();
		private var urlreq=new URLRequest();
 
		public function backbutton() {
 
			dp.addItem( { label:"Spring" , pictureUrl:"images/1.jpg" , shortDes:"We love it!!!"} );
			dp.addItem( { label:"Summer" , pictureUrl:"images/2.jpg" , shortDes:"Lazy days"} );
			dp.addItem( { label:"Winter" , pictureUrl:"images/3.jpg" , shortDes:"Is really cold here in Cluj"} );
 
			myCombo.dataProvider=dp;
			myCombo.x=50;
			myCombo.y=50;
			addChild(myCombo);
			myCombo.addEventListener(Event.CHANGE, onComboBoxChange);
 
			mytextArea.width = 300;
			mytextArea.height = 80;
			mytextArea.x = 200;
			mytextArea.y = 50;
			addChild(mytextArea);
 
			image.x=200;
			image.y=140;
			image.scaleContent=false;
			addChild(image)
 
			mySWFAddress.addEventListener(SWFAddressEvent.CHANGE, onLinkChange);
 
		}
 
		private function onComboBoxChange(e:Event) {
			var newLink = e.target.selectedIndex;
			mySWFAddress.setValue(newLink);
		}
 
		private function onLinkChange(e:SWFAddressEvent) {
			var newLink = mySWFAddress.getValue();
			newLink = newLink.substr(1);
			mytextArea.text = dp.getItemAt(newLink).shortDes;
			urlreq.url=dp.getItemAt(newLink).pictureUrl;
			image.load(urlreq);
			mySWFAddress.setTitle(dp.getItemAt(newLink).label);
			myCombo.selectedIndex = newLink;
		}
	}
}

So this is it, pay attention to the comments in the backbutton.as file to understand how it works. Everything should work just fine. If not, leave a comment, and i will help.
Here is a working example.
Just choose a item in the ComboBox and then hit the browser’s back button

Well I hope you got the idea, in the second part of the tutorial I’ll talk a little about how to implement something like this in a large application (best practices, design patterns and all).

Have a day nice day!