Adobe AIR article

Developing on Adobe AIR with Aptana Studio

Adding functionality to your application

When you've stepped through the project wizard, you are ready to build the file browser application. The main HTML file configured in the wizard is created and opens in the HTML editor inside Aptana Studio. This is the container for the file browser application except for the graphing functionality which is handled in a separate JavaScript file. The main HTML includes snippets of either sandbox example selected via the wizard, and this code can be removed and replaced with a script tag referencing the jQuery library.

When finished, you can start defining functions for your file browser application to have. The Adobe AIR API offers JavaScript access to many OS constructs unavailable when running in a web browser, including sockets, file I/O, and native drag and drop handling.

For this example, I will primarily work with the AIR local file capabilities and will create two functions: One to move a file to the trash and one to delete it directly.

<script type="text/javascript">
    function trash(){
        var root = new air.File(jQuery(this).attr('path'));
        root.moveToTrash();
        navigateToFolder(root.parent.nativePath);
    }
    function deleteFile(){
        var root = new air.File(jQuery(this).attr('path'));
        if (root.isDirectory) {
            root.deleteDirectory(true);
        }
        else {
            root.deleteFile();
        }
        navigateToFolder(root.parent.nativePath);
    }
</script>

The trash function creates a file reference to the current path obtained from the current table link clicked, makes a call to move the file to the trash, then refreshes the current view so that the removed file will no longer be shown. The delete function is very similar except it checks which delete function to call based on whether the selection is a file or folder. These functions are a good introduction to the AIR API and demonstrate how AIR objects are created when referencing an AIRAliases JavaScript file. This file contains mappings that shorten the namespace needed to access the AIR API and is included in your project and referenced in your main HTML file by default.

Content assist inside Aptana Studio is available for the entire Adobe AIR API as you type. As soon as you type air. a popup window will display the functions and properties with full documentation displaying in a tooltip for the current selection. Along with content assist for the Adobe AIR API, Aptana Studio also displays content assist generated from all referenced JS files and other libraries such as jQuery or Ext. This allows you to move efficiently between your AIR specific code and code for widgets or DOM manipulation. Figure 3 shows a screen shot of the content assist feature available on the air.File object.

Figure 3. Content assist for the AIR API in Aptana

After you've added the required actions to the sample application, you can move on to the actual table generation for the contents of the current folder. The first column contains the file or folder name in the current directory and folders will display as links. The second column contains the file size and the third column contains the trash and delete actions I previously defined. The table generation is driven by the links selected that will repopulate the table with the contents of the selected folder. This can easily be done using jQuery to remove and add table elements when a folder link is selected and also bind the trash and delete actions to each table row.

function navigateToFolder(path){
    current = path;
    jQuery("#curr").text('Current Directory: '+path);
    jQuery("#tbody > *").remove();
    current = new air.File(path);
    var children = current.getDirectoryListing();
    for (x in children) {
        var content = "<tr>";
        var tdClass = "";
        if (children[x].isDirectory) {
            tdClass += "links ";
        }
        if (children[x].isHidden) {
            tdClass += "hidden ";
        }
        if (children[x].isDirectory) {
            content += "<td><a href='path' id='" + children[x].nativePath 
                + "' class='" + tdClass + "'>" + children[x].name 
                + "</a></td>";
        }
        else {
            content += "<td     class='" + tdClass + "'>" + children[x].name 
                    + "</td>";
        }
        content += "<td>" + Math.round(parseInt(children[x].size) / 1024) 
                + "</td>";
        content += "<td><a href='trash' class='trash' path='" +
children[x].nativePath + "'><img src='icons/trashcan_empty.png'/></a> <a href='delete'     class='delete'id='" + children[x].nativePath + "'><img src='icons/stop.png'/></a>";
content += "</tr>";
        jQuery(content).appendTo("#tbody");
    }
    jQuery(".links").click(function(){ 
        navigateToFolder(jQuery(this).attr('id')); 
    });
    jQuery(".trash").click(trash);
    jQuery(".delete").click(deleteFile);
}

This function builds a table showing folders as links, hidden files as italic, and adding click event handlers for the different actions the file browser has. It uses the AIR File API to determine the size of files and the path on disk. This code is initially called via a document-ready event handler that creates the initial file browser location on disk.

jQuery(document).ready(function(){
    navigateToFolder(air.File.applicationDirectory.nativePath);
    jQuery("#up").click(function(){
        navigateToFolder(current.parent.nativePath);
    });
});

This function is called when the document of the page is finished loading and will populate the file browser with the current application directory. It also will bind a handler for the parent directory link that resets the table with the parent of the current selection. Now that the file browser will be populated when it is loaded, it's time to run the application, which is only one click away in Aptana Studio.

Page 3 of 5

Previous Page

Next Page