|
The source of the HTML for the hidden frame contains JavaScript
that parses the data from the query string sent via the
getURL action.
<script language="JavaScript">
function parseQuery(q_str)
{
var pairHalves;
var queryVars = {};
var N_V_pairs = q_str.split("&");
var l = N_V_pairs.length;
for(i=0; i<l; i++){
pairHalves = N_V_pairs[i].split("=");
queryVars[pairHalves[0]]
= pairHalves[1];
}
return queryVars;
}
var undef;
var q_str = new String(window.location.search);
q_str = q_str.substr(1);
var queryVars = parseQuery (q_str);
if(queryVars.pageTitle != undef){
document.title = unescape(queryVars.pageTitle);
}
</script>
The parsed data is then passed to a small Macromedia Flash movie,
named "subswf.swf", within the hidden frameset. The data
is passed through the FlashVars HTML tag, which is dynamically
created by JavaScript.
<Script language="JavaScript">
document.write(
'<OBJECT
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="300"
HEIGHT="100"
id="subswf"
ALIGN="">');
document.write(
' <PARAM NAME=movie
VALUE="subswf.swf">
<PARAM NAME=FlashVars
VALUE="' + q_str + '">
<PARAM NAME=quality
VALUE=low>
<PARAM NAME=bgcolor
VALUE=#FFFFFF>');
document.write(
' <EMBED src="subswf.swf"
quality=low bgcolor=#FFFFFF
WIDTH="300"
HEIGHT="100"
FlashVars="' +
q_str + '"
NAME="subswf"
ALIGN=""
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>');
document.write(
'</OBJECT>');
</SCRIPT>
Here is the code snippet where the data is actually written
out and passed to Macromedia Flash:
<PARAM NAME=FlashVars VALUE="'
+ q_str + '">
When the subswf.swf movie loads, it contains all of the
information from the history event object passed from the
main Pet Market SWF. It then uses the ActionScript LocalConnection
object to pass this event history data back to the main
Pet Market Macromedia Flash movie. When the main Macromedia Flash Pet Market movie
receives this information, it recreates the state that the
information represents. If this is prompted by the user
navigating to a new section, the application will already
be in the state represented by the history event and thus
will not do anything.
//Setup _global.state_obj with data
passed in via FlashVars
_global.state_obj = new Object();
_global.state_obj.mode = _root.mode;
_global.state_obj.catOID = _root.catOID;
_global.state_obj.productOID = _root.productOID;
_global.state_obj.pageTitle = _root.pageTitle;
for(prop in _global.state_obj){
_global.traceIt("propName: "+prop+" =
"+_global.state_obj[prop]);
}
//open up the connection to the main Pet Market Flash movie
var main_lc = new LocalConnection();
main_lc.getBottomFrameState = function(){
return _global.state_obj;
}
//send the data to the Pet Market Flash movie
main_lc.send("main", "gotoState", _global.state_obj);
That in itself does not seem too useful. However, lets
review what happened when the user navigated to a section
of the Pet Market application. A getURL was called to a hidden
frame. This action is treated by the browser as a new page
loading, and is thus registered as a browser history event.
Since the hidden frame contains all of the data necessary
to recreated the state within the Pet Market application,
and since pressing the back button on the browser will move
the hidden frame to its previous state, with its previous
data, pressing the back button on the browser has the effect
of changing the state of the main Pet Market application.
Since the frame is hidden, this is all seamless to the end
user.
One of the main advantages of this technique is that it
relies on the browser’s own mechanisms for navigation, and
does not rely on complex Macromedia Flash / JavaScript / browser integration.
Because of this, it works across virtually all browsers.
Of course, there are a number of ways that this could be
improved and expanded. You could use Shared Objects to store
the history event data, or pass more complex data types
between application states. However, for the Pet Market application,
it was only necessary to pass a simply set of data represented
by the history event object.
|
