It's been a few days since the last entry in my HTML/Adobe AIR series. If you aren't up to date on the series, please see the links below in the related entries section. The basic idea here is that I'm going over the example applications I created for my Building HTML AIR Applications presentation. I'm not putting these applications out as steller examples of AIR - in fact - they are pretty darn simple and quite ugly. But rather - I hope that if you guys see a bunch of simple examples it will inspire you to build your own. Today's example is another file based one, this time focusing on directory operations as well. I'll start off with a few quick screen shots and then I'll show you the code.
When the application loads, you end up with a list of files in the left hand side. If you click on a file you then get details, and if it is a text or CFM file, you can see the source.
So - not the most exciting application in the world, but right away you can see that this application demonstrates how to get the contents of a directory and how to get file details and contents. Let's look at the code.
<html>
<head>
<title>Demo working with a list of files</title>
<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
<script src="lib/jquery/jquery-1.4.2.js"></script>
<script>
$(document).ready(function() { //list the documents directory
docDir = air.File.documentsDirectory;
var files = docDir.getDirectoryListing();
var s = "";
$.each(files, function(inx,file) {
if(!file.isDirectory) {
s += "<div class='fileListing'>" + file.name + "</div>";
}
});
if(s != '') $("#dirListing").html(s); $("#dirListing").delegate(".fileListing", "click", function() {
//full file path is doc dir and text from the item
var fullPath = air.File.documentsDirectory.nativePath + air.File.separator + $(this).text();
var fileOb = new air.File(fullPath);
var s = "";
s += "<h2>" + $(this).text() + "</h2>";
s += "The size of this object is "+fileOb.size + " bytes.<br/>";
s += "It was last modified on "+fileOb.modificationDate + ".<br/>"; //if a text file, render contents
var ext = fileOb.extension;
if(ext == 'txt' || ext == 'cfm') {
var fileStream = new air.FileStream();
fileStream.open(fileOb,air.FileMode.READ);
var contents = fileStream.readMultiByte(fileOb.size,"utf-8");
fileStream.close();
s += "<br/><b>Contents:</b><br/><div class='contents'>"+contents+"</div>"; } $("#fileDetails").html(s); }) }) </script> <style>
.fileListing {
background-color: #c0c0c0;
margin: 5px;
padding: 5px;
cursor: pointer;
} .contents {
width: 100%;
height: 100%;
}
</style> </head>
<body> <table>
<tr valign="top">
<td width="20%">
<div id="dirListing">
</div>
</td>
<td width="80%">
<div id="fileDetails">
</div>
</td>
</tr>
</table> </body>
</html>
Like most of my AJAX examples, I use the HTML at the bottom as basic containers for whatever my application is doing. This is no different. I have a simple table with a 20% column used for the listing and the larger side there for the contents. Yes, I know tables suck. I apologize. Now scroll on up to the beginning of the document.ready block. I've got multiple things going on here so I'll cover them one by one.
I begin by getting a pointer to the user's documents directory:
docDir = air.File.documentsDirectory;
I know that seems simple - but consider this. That one alias will work across Windows, Mac, and Unix system. No user sniffing - no OS specific code. It just plain works. I love that. The next line gets the directory listing. After I have that I can then use jQuery's nice each operator to loop over each file and lay out some HTML.
The second block is my handler for the fileListing blocks. These were the blocks I used to display files. When clicked, I have to parse the DOM a bit to get the file. From that I can then create an AIR file object:
var fullPath = air.File.documentsDirectory.nativePath + air.File.separator + $(this).text();
var fileOb = new air.File(fullPath);
I display a few properties of the file (there are more, I just picked the ones I thought were interesting). Finally note the extension check. If the file is either a text or ColdFusion file, I want to read the text in and display it. This is as simple as:
var fileStream = new air.FileStream();
fileStream.open(fileOb,air.FileMode.READ);
var contents = fileStream.readMultiByte(fileOb.size,"utf-8");
fileStream.close();
As you can imagine - if I did this with a large file, I'd bog down my application. AIR supports reading in only portions of a file, seeking to a part of a file, and bringing in contents asynchronously. I was going for simplicity.
I've included a zip of this application that also includes the built-out .AIR file so you can run it right away. Next in the series I'll be demonstrating a simple database client.