Creating a scoreboard in Spry in five easy steps
Created
18 May 2008
Requirements
Prerequisite knowledge
Familiarity with building web pages, CSS, JavaScript, and the Spry framework for Ajax.
User level
Intermediate
Required products
- Dreamweaver (Download trial)
Sample files
- scoreboard.zip (48 KB)
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.
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:
- 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.
- 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 andconvert it into a Spry dataset.
- Next, capture the home team information. Typically, this informationcontains a lot more data, so you can use the Spry
subPathsfunction tocapture it. I also recommend you use theloadIntervalfeature toensure the scoreboard can update itself, in this case, every 3 seconds. TheuseCacheoption 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});
- 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:
- In Dreamweaver, choose File > New > Basic page > HTML to create a blank HTML page.
- 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>
- Between the
<body>tags of the document, add a<div>that will contain all the game information. This helps you keep everythingclean and in order. Now, add the attributes as show below. Thespry:detailregionattribute tells Spry that it will be processing data within this tag. Thevalues are the three datasets that you defined above. The names should beseparated by a space:
<div spry:detailregion="dsGames dsHome dsAway"></div>
- 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.
- 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> </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:
- 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;
};
}
- 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.
- 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;
};
}
- Now you need a way to check the scores. Fortunately, JavaScript reads from the top down and left to right. So in between the
keyand the score holder array, you will insert a simpleifstatement 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.
More Like This
- Creating a multiscreen theme for WordPress using Dreamweaver CS5.5
- Building Drupal Zen subthemes with Dreamweaver CS4
- Creating master and detail ColdFusion pages
- Creating user-defined functions for ColdFusion 8 in Dreamweaver CS4
- Creating a ColdFusion upload page in Dreamweaver CS4
- Creating custom server behaviors and Dreamweaver extensions
- Managing multiple subscriptions in PHP
- Building a subscribe/unsubscribe app in PHP with Dreamweaver CS3
- Designing for web publishing
- XML in the real world
Tutorials and samples |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
