Building a directory search application
Requirements
Prerequisite knowledge
General experience building HTML-based applications is suggested. For more details on getting started with this Quick Start, refer to Building the Quick Start sample applications with HTML.
Additional Requirements
User level
Intermediate
Required products
Sample files
The File Search sample application, shown in Figure 1, demonstrates the following features of working with files in Adobe AIR:
- Reading files asynchronously so that other processes can take place as file data is read
- Getting the file extension from file names
- Using the platform-specific
nativePathproperty of a File object
Note: This is a sample application provided, as is, for instructional purposes.
This sample application includes the following files:
- index.html: The main application file; discussed in this article
- application.xml: The Apollo application descriptor file
- AIRAliases.js: The AIR JavaScript aliases file
- SampleStyles.css: A CSS file defining styles used in the application
- Sample AIR icon files
Understanding the code
The following sections discuss how the AIR-related code works in the file.
Setting the root directory to search
The init() method sets the text value of the folderPath input element to a predefined path (the user's documents directory):
searchDir = air.File.documentsDirectory;
document.getElementById("folderPath").value = searchDir.nativePath;
The File.documentsDirectory is a File object pointing to the user's documents directory (such as My Documents on Windows), and the nativePath property is a string value of the platform-specific path to the directory. For example, on Windows, this path could be:
C:\Documents and Settings\userName\My Documents
Whereas on Mac OS X, it could be:
/Users/userName/Documents
The user can edit this value (in the input element of the HTML page), and when the user clicks the Search button, the search() method checks to see if the path is valid, and displays an error message if it is not:
searchDir = new air.File(document.getElementById("folderPath").value);
if (!searchDir.isDirectory)
{
alert("Invalid directory path.");
}
Note the difference between the nativePath property and the url property of a File, listed here for the same directory File object:
alert(directory.nativePath); // C:\Documents and Settings\swartz\My Documents
alert(directory.url); // file:///C:/Documents%20and%20Settings/swartz/My%20Documents
Searching the directory for matching files
The main search process lists directory contents asynchronously, one at a time. By doing this, other processes (such as result listing) can take place as the runtime gets directory listing information (asynchronously) from the file system.
The search() method sets up event listeners for the dirListing event, which is dispatched when the listDirectoryAsync() process has completed:
searchDir.addEventListener(air.FileListEvent.DIRECTORY_LISTING, dirListed);
searchDir.listDirectoryAsync();
The dirListed() method processes the list of files in the current directory. This list is represented as the files property of the dirListing event. The method sets a currentNodes variable to this array:
currentNodes = event.files;
The dirListed() method iterates through each member of this array, to see if it is a directory. If it is a directory, the object is added to a list of current subdirectories (of the current directory being examined).
node = currentNodes[i];
if (node.isDirectory)
{
currentSubdirectories.push(currentNodes[i]);
}
After the iteration is completed, the members of this array are added to a master array of directories to be searched, named directoryStack:
for (i = currentSubdirectories.length - 1; i > -1; i--)
{
directoryStack.push(currentSubdirectories[i]);
}
At this point, now that processing of the current directory is complete, the application can call another asynchronous listing of the next directory in the stack (if there is one):
var dir = directoryStack.pop();
if (dir == null)
{
document.getElementById('progress').innerHTML = "";
// There are no further directories to search. The search is completed.
}
else
{
dir.addEventListener(air.FileListEvent.DIRECTORY_LISTING,
dirListed);
dir.listDirectoryAsync();
}
Displaying search results
As the dirListed() method iterates through each member of this array of contents of the current directory, it checks if the name matches the Search pattern, and if so, it calls the writeFileResult() method which creates a table row (a tr element) that is added to the results div element of the HTML document:
if (node.isDirectory)
{
currentSubdirectories.push(currentNodes[i]);
}
if (node.name.search(pattern) > -1)
{
if (node.isDirectory)
{
fileExtension = "";
}
else
{
fileExtension = node.extension;
}
var path = searchDir.getRelativePath(node);
path = path.replace(/\//g, air.File.separator);
writeFileResult(node.name, path, fileExtension);
}
The extension property of a File object is null if a file has no extension, and for a directory that includes a dot (.) character in its name the extension property is set to the string portion of the name trailing the final dot character in the name. The first few lines of code above set a fileExtension variable to an empty string if there is no extension or if the File object points to a directory (otherwise it sets fileExtension to the extension property of the File object).
The writeFileResult() method creates a table row (a tr element) based on the matching file or folder:
function writeFileResult(filename, path, extension)
{
var table = document.getElementById("results");
var tr = document.createElement("tr");
tr.setAttribute("class", "grid");
var td = document.createElement("td");
td.innerHTML = filename;
tr.appendChild(td);
td = document.createElement("td");
td.style.width = "60%";
td.innerHTML = path;
tr.appendChild(td);
td = document.createElement("td");
td.style.width = "10%";
td.innerHTML = extension;
tr.appendChild(td);
table.appendChild(tr);
}
