Accessing Local Directories (JavaScript)
The AIR SDK throught the AIRAliases.js file exposes the Flash flash.filesystem.File class that provides a number of methods for accessing the filesystem. In this tutorial we will concentrate on how to allow the user to browse directories on the local file system.
Before we Begin
Make sure you have the latest SDK and runtime installed. After you have created your new project through the Eclipse you will most
likely have to edit two parts of the application.xml file. Change the application tag (below) and remove the ".M5"
Additionally you will need to add a <filename> tag. I usually make sure that its the same as the title of my project, something along the lines of <filename>DirectoryAccess</filename>.
The JavaScript
So lets get started with the Javascript! Make sure you have included the AIRAliases.js file into your HTML page, without that you will not get far.
<script type="text/javascript">
myDirectory = null //set up our direcotry variable
function doBrowseForDirectory(){
myDirectory.browseForDirectory( 'Select a directory:' );
}
function doOnLoad(){
//I will call the doOnload function on the onload event of the body tag
myDirectory = air.File.documentsDirectory; //I defaulted to the myDocuments directory of the user or for Mac the Documents directory
myDirectory.addEventListener( air.Event.SELECT, listFiles );//Add an event listener to the directory SELECT event, call the listFiles function.
//Attach a listener to my button onclick event to call the file browser
document.getElementById('browse').addEventListener('click',doBrowseForDirectory);
}
function listFiles(e){
var files = myDirectory.getDirectoryListing();
var htmlTable = "<table border='1'><tr><td>File Name</td><td>Modification Date</td><td>Size</td></tr>";
for( var f = 0; f < files.length; f++ )
{
htmlTable = htmlTable + "<tr><td>" +files[f].name+"</td>"
mod = files[f].modificationDate;
htmlTable = htmlTable + "<td>"+( mod.month + 1 ) + '/' + mod.date + '/' + mod.fullYear+"</td>";
htmlTable = htmlTable + "<td>"+Math.ceil( files[f].size / 1000 ) + ' KB </td></tr>' ;
document.getElementById("tbl").innerHTML=htmlTable;
}
}
</script>
I've broken up the code into a couple of different functions. The doOnload function gets called by the onload event of the HTML body tag, this is kind of our initialization routine. I assign my directory variable with the the directory to the users documents directory and attach an event listener to the select event that will fire once a user has selected a directory. I also attached an event listener to a HTML button's onclick event that will then call my doBrowserForDirectory function.
Once the user clicks on the browse button the browse window is opened. Once the user selects a directory the listfiles function is called which then builds an HTML table with the contents of the directory and using the innerHTML adds it to the document. It's not particularly pretty but with a little work and one of the many Ajax UI frameworks you could beautify the results.
The HTML
The HTML is relatively simple. As you can see below we use the onload event of the body tag to call our doOnLoad() javascript function, we also have a button, and lastly a div that is the placeholder for our file listing.
<input id="browse" type="button" value="Browse" />
<div id="tbl"/>
</body>
Conclusion
The getDirectoryListing function, which is part of the File class returns an array of File objects, each of these objects have attributes and methods associated to them which you can access and or call to perform certain tasks. In the above code we accessed only a few of the many attributes available (name, size, modified date), many more are available and will be used in other tutorials.