|
AboutTheCode
Overview of the code
IntroductionThis document outlines how the Huddle Desktop application's code is structured. All code in source control is commented at quite a detailed level, so any further information should be sought there. All images are stored in the /imgs subfolder or in subfolders of that that relate to their use The Application WindowThe window itself is formed of a single HTML file. As Adobe AIR runs an instance of the Webkit HTML renderer in the window, this single HTML page runs all the formatting for the application, deals with shadows, window chrome, buttons and events etc. HTML / XMLHuddle.htmlThis is the main application window. Its main responsibility is dealing with the layout of the window, but its other roles include bringing together all the style sheets and javascript files, instanciating and initialising the objects and kick-starting the javascript. Huddle-app.xmlThis is the "application descriptor" XML file that AIR uses to compile and run the application. It specifies the initial details of the window and other operating system parameters. CSSThese can be found in the /styles subfolder. content.cssThis file handles the styling for all the various content pages; sections include:
default.cssHandles basic styling of generic page elements, such as the body tags, links, generic classes used throughout the design (e.g. center and hidden) and the loading icon window.cssHandles styling of window elements; backgrounds, chrome buttons (e.g. close, minimise, resize, move), the header and footer etc. JavascriptAll Javascripts can be found in the /scripts subdirectory AIRAliases.jsThis is an Adobe-provided file so that you can use shorthand for referencing AIR related elements, such as air.nativeWindow instead of the really long reference you'd need normally :) breadcrumbs.jsThis file contains the object for manipulating, displaying and adding to the breadcrumb links when you are navigating through file systems. download.jsThis file includes a class called DownloadManager which handles the queueing, downloading and display of files. It can handle downloading a folder, file or multiple files in an array. It queues them and downloads them to a user-selected directory, restoring their original file names. This file is reasonably complex, as two asynchronous AJAX calls are made to obtain the correct data - one to get the details of the file being downloaded (for filename and other data) and the call to get the data itself. dragndrop.jsThis file handles (unsurprisingly) the drag and drop functionality as well as handling the queueing and uploading of files to be added to the Huddle site. The drag and drop object provides two end points, drag.set() and drag.remove() to easily add and remove drag and drop event listeners to elements on the page. The upload manager handles the queueing, uploading and status reporting of files in progress. dropdown.jsThis file contains the dropdown object, to create, add elements to, display and re-render the dropdown list containing workspaces on the main page. huddle.jsIn this file is the Huddle class, used to store user's login data (which is required for each API call) and information about the state and size of the main application. jquery.jsThis is the compressed jQuery framework - http://jquery.com jquery-ui.jsThis is part of the jQuery UI effects library for some of the fancy animations. json.jsThis is a container for all of the asynchronous requests to the huddle API, with the exception of file upload and download processing. It is intended as a simple wrapper to make modification of calls and function easy. layouts.jsThis file provides wrappers for several functions contained in utils-<>.js files. It allows all functions related to certain types of page to be contained in their own pseudo-classes for easy reference and to make the code a bit more understandable. msg.jsThis file contains a class to handle all the display of messages and interaction with the user. It handles when multiple messages need to be displayed, message locking (such as during file uploads / downloads - you don't want the upload statistics to be removed when you move your mouse over the close button, for example) and methods required for that behaviour. page.jsThis script contains methods relating to the loading and displaying of content on the page. It contains the method that is called on load which initialises almost all of the application (Page.load() method). It contains methods for dealing with the movement and resizing of the window, as well as the loading icon. Principally, it contains the methods that control the unloading and loading of new content into the page (Page.displayPage() and Page.switchContent()) select.jsThis class handles the ability for a user to shift-click on multiple files to download them. It handles the array of currently selected files, toggling a file from this list (if it's not there it adds it, if it's there it removes it); it also handles the formatting of the selected / deselected objects. Importantly it also handles queueing the selected files for download when one of them is dragged out of the window. systray.jsThis file contains the method for initialising, displaying and capturing events on the system tray / dock icon. utilities.jsThis file contains some generic functions (such as isArray() and functions for the formatting of object titles) as well two classes that handle the display of tables of objects. The Cell class contains variables and methods for constructing, rendering and adding event listeners to individual files / folders / workspaces. The Table class constructs the table as a whole, generating cells from a downloaded array, rendering and adding event listeners to it. utils-file-folder.jsThis file contains functions related to downloading, processing and displaying the data relating to files and folders. They are mostly given nicer wrappers in the layouts.js file, it is not recommended to access them outside that structure. utils-login.jsThis file contains functions for displaying and processing the login page; it is also wrapped in layouts.js and should be accessed there. utils-workspace.jsHere are functions related to getting and displaying workspace and dashboard data, again wrapped through layouts.js. whatsnew.jsThis file contains code for getting the What's New feed for the Huddle dashboard and workspaces. It is currently not implemented but a demonstration is there and commented out for reference. |
Sign in to add a comment
