andyMatthews.net
Downloading Files with Adobe AIR, HTML and JS Part 2. Adding a Progress Bar with Canvas
Just a quick follow up to my previous post about downloading files with Adobe AIR. Reader Jason asked "How would you create a progress bar to go with the download." If this is something you've been asking for, then read on. You can also download the complete source for this project.
- Start off by downloading the source code for the previous article. We're not going to rewrite that code, but we will be adding to it.
- Unzip the code and import the project into Aptana, ColdFusion Builder, or your flavor of Eclipse based editors.
- Open the file named DownloadFile.html
- Add this CSS declaration into the style block at the top of the page #progressBar { border: 1px solid #000000; }
- Just above the closing form tag, add this line of code Progress: <canvas id="progressBar" width="500" height="20"></canvas>
- Save this file, and close it.
- Expand the lib node, then open the file named Application.js
- Locate the downloadFile function. Add these lines just above the stream.load statement
- Finally, after the downloadFile function add this new function.
Here's how this works. The URLStream class fires off several events while it's downloading your selected file. We're already listening for the COMPLETE event; it's how we capture the complete data stream and save the file off. But if we take a look at the AIR API we'll see that there's also a PROGRESS event that we can listen for by calling air.ProgressEvent.PROGRESS. The PROGRESS event has two key values passed along with that we're using: bytesLoaded and bytesTotal. Having those two values allow us to calculate just how much of the file has been download.
Finally, because we're using webkit which has excellent Canvas support, we can draw a rectangle which displays our progress. This is a simple implementation, but it could be made as complex as you desired, or just about any shape you can imagine. What sorts of things are doing with AIR and HTML/JS? Are you using the Canvas tag for any portion of your application?