Accessibility
Addam Driver

Addam Driver

www.reignwaterdesigns.com

Created:
19 May 2008
User Level:
Intermediate, Advanced
Products:
Dreamweaver
Spry

Creating a scoreboard in Spry in five easy steps

In this article, I will step you through the process of building a nifty, real-time scoreboard for your sports-viewing pleasures on your personal website. Using the Adobe Spry Data and Effects libraries, you are able not only to get scores and display them; you also have the ability to do exciting things by including notifications and other WOW factors.

Also, check out the following video to learn more about how I discovered and use Spry on the job.

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

 

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS3 (optional)

Sample files:

Prerequisite knowledge

Familiarity with building web pages, CSS, and JavaScript. For an introduction to Spry, refer to Introducing the Spry framework to Ajax. To learn more about Spry, go to Adobe Labs.

Step 1: Prepare the data

The first step is to decide on the data you want to include on your scoreboard. For example, a typical scoreboard may contain the following details:

  • Location
  • Team names / Cities
  • Timeouts
  • Foul trouble
  • Scores

Then put the data into an XML file; for example:

<games>
    <game id="1">
        <location>Staples Center, Los Angeles</location>
        <home>
            <teamName>Lakers</teamName>
            <teamCity>Los Angeles</teamCity>
            <teamStats timeOuts="2" foulTrouble="Kobie Bryant">
                <score quarter="1">49</score>
                <score quarter="2">23</score>
                <score quarter="3">55</score>
            </teamStats>
        </home>
        <away>
            <teamName>Heat</teamName>
            <teamCity>Miami</teamCity>
            <teamStats timeOuts="5" foulTrouble="Shaq">
                <score quarter="1">35</score>
                <score quarter="2">65</score>
                <score quarter="3">22</score>
            </teamStats>
        </away>
    </game>    
</games>

Next, you have to prepare the datasets.

Step 2: Prepare the datasets

When your XML data is ready, you need to prepare the datasets you are going to be working with. Follow these steps:

  1. In Dreamweaver, choose File > New > Basic page > JavaScript to create a new (external) JavaScript file and save it as games.js. This file will contain all of the necessary functions to make things work.

  2. Create the datasets to capture all the information you need. Start with the game information. To your JavaScript file, add:

    var dsGames = new Spry.Data.XMLDataSet("games.xml", "games/game");

    This is a dataset declaration. It will fetch the XML file and convert it into a Spry dataset.

  3. Next, capture the home team information. Typically, this information contains a lot more data, so you can use the Spry subPaths function to capture it. I also recommend you use the loadInterval feature to ensure the scoreboard can update itself, in this case, every 3 seconds. The useCache option ensures that the new data is fetched from the server:

    var dsHome = new Spry.Data.XMLDataSet("games.xml", "/games/game/home", { subPaths: ["teamStats", "teamStats/score" ], loadInterval:3000, useCache:false});

  4. Finally, get the away team information, which follows the same format you used in Step 3:

    var dsAway = new Spry.Data.XMLDataSet("games.xml", "/games/game/away", { subPaths: ["teamStats", "teamStats/score" ], loadInterval:3000, useCache:false});

At this point, you're ready to build the HTML page that contains your data.

Step 3: Prepare the HTML page

To prepare the HTML page follow these steps:

  1. In Dreamweaver, choose File > New > Basic page > HTML to create a blank HTML page.

  2. Inside of the <head> section of the document, include the following Spry files. Ensure that the src paths match your file setup. Also, include them in the same order as shown here:

    <script language="JavaScript" type="text/javascript" src="/spry/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="/spry/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="/spry/SpryEffects.js"></script>

  3. Between the <body> tags of the document, add a <div> that will contain all the game information. This helps you keep everything clean and in order. Now, add the attributes as show below. The spry:detailregion attribute tells Spry that it will be processing data within this tag. The values are the three datasets that you defined above. The names should be separated by a space:

    <div spry:detailregion="dsGames dsHome dsAway"></div>

  4. Next, add some general game information. You want to use data references from the data sets to display the data from the data sets. For this demo, the only global variable is the location of the game. (You can add more as you see fit.) Place it inside of <h1> tags inside the games <div>. It should look something like this:

    <div spry:detailregion="dsGames dsHome dsAway" >
    <h1>{dsGames::location}</h1>
</div>

    This displays the location data from the dsGames data set. Press F12 to preview the working page in the default browser. You should see "Staples Center, Los Angeles" in large text. If so, your Spry page is working properly. If not, check the code in the sample file and see what differs on your page.

  5. Create the scoreboard table. Inside of the <div>, insert a table (<table>) that will contain the information of each individual game as shown in this snippet:

    <div spry:detailregion="dsGames dsHome dsAway" spry:repeat="dsGames">
<h1>{dsGames::location}</h1>
<table cellpadding="0" cellspacing="0" border="1">
        <tr>
            <th>&nbsp;</th>
            <th spry:repeat="dsHome">{dsHome::ds_RowNumberPlus1}</th>
            <th>Time Outs Used</th>
            <th>Foul Trouble</th>
        </tr>
        <tr>
            <td>{dsHome::teamName}</td>
            <td spry:repeat="dsHome" id="hq_{dsHome::teamStats/score/@quarter}">{dsHome::teamStats/score}</td>
            <td>{dsHome::teamStats/@timeOuts}</td>
            <td>{dsHome::teamStats/@foulTrouble}</td>
        </tr>
         <tr>
            <td>{dsAway::teamName}</td>
            <td spry:repeat="dsAway" id="aq_{dsAway::teamStats/score/@quarter}">{dsAway::teamStats/score}</td>
            <td>{dsAway::teamStats/@timeOuts}</td>
            <td>{dsAway::teamStats/@foulTrouble}</td>
        </tr>
    </table>
</div>

This is the main part of the scorecard. Preview in browser to ensure it is working properly.

Step 4: Prepare score capturing for the WOW factor

Now that your scoreboard is up and running, you can add a notification feature that alerts users when a team has scored. There are obviously many different ways you can notify the viewer that something has changed. For this tutorial, you are going to highlight the box that contains the updated score.

The filter you create will capture the current scores, get the new set of scores and check to see if anything has changed. If they have changed, then find the location of the score and highlight the box.

Follow these steps:

  1. Create the filter function and score holder dataset. Inside of your JavaScript file, create the following variables and function:

    var HScoreHolder = new Array(); // Home Score Holder
var AScoreHolder = new Array(); // Away Score Holder
var scoreHolder = new Array(); // Template Score Holder
function GetScoreUpdateFunc(scoreHolder, prefixStr){ // Get score function
}

    This particular function is a wrapper for the real function. This enables you to use the filter as a template, so you can use it for more than one dataset (I'll explain that shortly). Here is the actual filter function:

    var scoreHolder = new Array(); // Generic Score Holder
function GetScoreUpdateFunc(scoreHolder, prefixStr){ // Get score function
    return function (ds, row, rowIndex){
// return the actual filter function      
        return row;
    };
}

  2. Add a key:

    var scoreHolder = new Array(); // Generic Score Holder
function GetScoreUpdateFunc(scoreHolder, prefixStr){ // Get score function
    return function (ds, row, rowIndex){ // return the actual filter function
        var key = prefixStr+row['teamStats/score/@quarter']; // create a key for the games    
        return row;
    };
}

    Note that this key is basically the same value as the generated id for the score boxes in the markup. The key represents the location of the score. If you look in the mark-up above, you'll notice the following ID: id="aq_{dsAway::teamStats/score/@quarter}". This is a unique ID for each quarter. This way you can keep track of where each score is located. The var key = indicates the location of the score in its respective box.

  3. Capture and store the score information and return the regular data to the dataset:

    var scoreHolder = new Array(); // Generic Score Holder
function GetScoreUpdateFunc(scoreHolder, prefixStr){ // Get score function
    return function (ds, row, rowIndex){ // return the actual filter function
        var key = prefixStr+row['teamStats/score/@quarter']; // create a key for the games
        scoreHolder[key]= new Array(); // make each key an array
        scoreHolder[key]= row['teamStats/score']; // get the current scores                
        return row;
    };
}

  4. Now you need a way to check the scores. Fortunately, JavaScript reads from the top down and left to right. So in between the key and the score holder array, you will insert a simple if statement that will call a function that then verifies whether the score holder array has been set. If so, it will then verify whether its value differs from the new scores. If it does, you will tell it to highlight the box from an orange color to white in 3 seconds. Here's the code:

    var scoreHolder = new Array(); // Generic Score Holder
function GetScoreUpdateFunc(scoreHolder, prefixStr){ // Get score function
    return function (ds, row, rowIndex){ // return the actual filter function
        var key = prefixStr+row['teamStats/score/@quarter']; // create a key for the games
        if(scoreHolder[key]){ // check for keys already set
            if(row['teamStats/score'] != scoreHolder[key]){ 
                 Spry.Effect.DoHighlight(key,{duration:3000,from:'#FB9A00', to:'#fff', restoreColor:'#fff'});// highlight the updated score box
            }
        }
        scoreHolder[key]= new Array(); // make each key an array
        scoreHolder[key]= row['teamStats/score']; // get the current scores
                
        return row;
    };
}

Step 5: Kick off the filter

Now that you've got it all set up, you can start on the filter. After GetScoreUpdateFunc, add two filter calls to the datasets (Home and Away) that will capture and check the data:

dsHome.filter(GetScoreUpdateFunc(HScoreHolder, "hq_")); // Filter for home scores... Check for updates
dsAway.filter(GetScoreUpdateFunc(AScoreHolder, "aq_")); // Filter for away scores... Check for updates

Your scoreboard is now complete. If you update any of the scores inside of the XML, you will see it update on the page; you will also see the nifty little background orange color. For your reference, refer to the simple sample scoreboard I've included with this article.

You have various options to update your information. You can do it manually to see your new scoreboard application in action. Other methods include, using a back-end database to keep track of your scores and making a Spry-Ajax call to a PHP, JSP, ASP or other server-side application that will just fetch the new data for you in an XML format.

Where to go from here

Not bad what you can do with Spry, isn't it? If you want to take this even further, you could add a total score or other information like fouls, time-outs, and so on. Get creative and add multiple scoreboards or add more games to your XML.

About the author

Addam Driver started his career in 2000 working for GoProjex, Inc. building Commercial Real Estate Project Management Software. In 2004, he went on to built web applications for CBS, NBC, Disney and Fox Sports. Find out more about Addam at his website.