November 5, 2007 2

Adding a Persistent Flash Element to an Ajax Application

By Levi Senft in Web

To illustrate adding statefulness to our application I’m going to add a flash music player to our application. Using web 1.0 techniques getting our player to remain static would require either a pop-up or some sort of frames setup. We’re going to add the player to the masthead of our page and let the ajax anchor component take care of the rest. The idea being that the only area being “refreshed” is the #content div, so really our player should be happy any place outside of that div.

I’m using the XSPF Web Music Player available from Source Forge and the playlist from the example applications. Other then the #flashPlayer css rules and element this is the same as my last post.

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2 <html>
    3     <head>
    4         <title>Ajax Anchor Demo in Prototype</title>
    5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6         <style type="text/css">
    7             html, body {
    8                 margin: 0 0;
    9             }
   10
   11             div {
   12                 margin: 0 auto;
   13                 width: 600px;
   14             }
   15             #loadingmessage {
   16                 position:absolute;
   17                 background-color: maroon;
   18                 color: white;
   19                 padding: 4px;
   20                 top: 0px;
   21                 left: 0px;
   22             }
   23             #flashPlayer {
   24                 position: absolute;
   25                 height: 18px;
   26                 width: 400px;
   27                 right: 0px;
   28                 top: 0px;
   29             }
   30         </style>
   31     </head>
   32     <body>
   33         <span id="loadingmessage">Loading...</span>
   34         <div id="flashPlayer">
   35             <object width="400" height="15" align="middle" id="xspf_player" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
   36                 <param value="sameDomain" name="allowScriptAccess"/>
   37                 <param value="xspf_player_slim.swf?autoplay=1&playlist_url=http://cchits.ning.com/recent/xspf/?xn_auth=no" name="movie"/>
   38                 <param value="high" name="quality"/>
   39                 <param value="#e6e6e6" name="bgcolor"/>
   40                 <embed width="400" height="15" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="xspf_player" bgcolor="#e6e6e6" quality="high" src="xspf_player_slim.swf?autoplay=1&playlist_url=http://cchits.ning.com/recent/xspf/?xn_auth=no"/>
   41             </object>
   42         </div>
   43         <div><h1>Ajax Anchor Demo in Prototype</h1></div>
   44         <div><a href="about.htm" rel="#content">about</a> | <a href="links.htm" rel="#content">links</a> | <a href="contact.htm" rel="#content">contact</a></div>
   45         <div id="content">
   46             Default Content
   47         </div>
   48         <br />
   49         <br />
   50         <br />
   51         <div>Footer</div>
   52
   53 <script type="application/javascript" src="prototype.js"></script>
   54 <script type="application/javascript">
   55
   56 // Base components object
   57 components = {
   58     init: function() {
   59         components.ajaxanchor.init();
   60
   61         // Register global ajax listeners
   62         Ajax.Responders.register({
   63           onCreate: function() {
   64             // show loading message
   65             $("loadingmessage").setStyle({display: "block"});
   66           },
   67           onComplete: function() {
   68             // Hide loading message
   69             $("loadingmessage").setStyle({display: "none"});
   70           },
   71
   72            onException: function(oXHR, exception) {
   73             alert("An exception occurred: " + exception.name + "n" + exception.message);
   74            },
   75             onFailure: function(oXHR, oJson) {
   76             alert("An error occurred: " + oXHR.statusText);
   77
   78            }
   79         });
   80     }
   81 };
   82
   83 // Ajax Anchor
   84 // A prototye/scriptaculous version of the Ajax Anchor component
   85 components.ajaxanchor = {
   86     init : function() {
   87         // Attach an event to each link  with a rel tag to open the href in an element with an id that macht
   88         $$('a').each(function(thisElement){
   89
   90             // If this anchor has a rel tag and it's rel tag starts with a hash.
   91             if (thisElement.rel != "" && thisElement.rel.match(/^#/) && thisElement.href != "") {
   92                 Event.observe(thisElement, 'click', function (evt) {
   93                     // show loading message
   94                    $("loadingmessage").setStyle({display: "block"});
   95
   96                    // Get the element that generated the event
   97                    var eventElement = Event.element(evt);
   98                    var contentArea = eventElement.rel.replace(/#/,'');
   99
  100                    // Perform an ajax call that updates an element based on eventElements href and rel tag
  101                    new Ajax.Updater(contentArea, eventElement.href, {evalScripts: true, method: 'get'});
  102
  103                    // Stop the event (equivelent to return false.)
  104                    Event.stop(evt);
  105                 });
  106             }
  107         });
  108     }
  109
  110 };
  111
  112 Event.observe(window, 'load', function() {
  113     // Initialize our components
  114     components.init();
  115
  116     // hide the loading message
  117     // this should always be the last thing we do.
  118     $("loadingmessage").setStyle({display: "none"});
  119
  120 });
  121     </script>
  122     </body>
  123 </html>

You can check out the demo here. I’ve zipped up the code you can download it here.

Tags: , , , , ,

2 Responses to “Adding a Persistent Flash Element to an Ajax Application”

  1. BJ March says:
    November 12, 2007 at 8:04 pm

    Smart guys are sexy.

  2. Levi Senft says:
    November 12, 2007 at 8:14 pm

    Thank Barbara. Tough luck with the supreme court, eh?

Leave a Reply