[asterisk-gui] A GUI Overview

[Ryan Brindley]

Hey gents, 
I recently explained to someone a brief overview of the code and decided this list might like to hear it as well...so here it is: 


First off the project has a simplistic file structure. When you pull down the source, the config dir holds all the code you'll ever need to modify. Directly inside the config dir are the html files. These files contain all the HTML, file specific CSS and loading JS. The config folder also contains directories for global JS (js/), global CSS (stylesheets/), and images (images/). 

The JS can be divided into three sections: loading JS, page JS, and JS libraries. The loading JS is usually jQuery's $(document).ready() function and any directly related helper functions and can be found in the HTML files. Page JS is all the functions needed to make a page what it is. If an HTML has over ~100 lines of JS code, that code is moved into its own JS file. For example, users.html has js/users.js. The JS libraries hold all the objects and functions that are commonly used through-out the project. They are also located in the js/ directory. 

Now, there are 5 important files to the GUI: index.html, index.js, astman.js, pbx.js and pbx2.js. 

Index.html is the main page. It contains the majority of the 'sessionData' variable instantiations as well as the HTML for the main menu and the iframe for the pages. 

Index.js contains all the initial loading javascript. It's purpose is to validate that the system, detect hardware changes, and login the user. 

Astman.js is a rather unorganized file. It contains all the array and string custom functions and then the ASTGUI object. the ASTGUI object is the main function object for the GUI. It holds all the AJAX functions, global variables, Asterisk context variables and some random HTML template variables. You'll probably see this object used in every JS you encounter. 

Pbx.js use to contain all of the data models, but that's been moved to pbx2.js (I'll explain later). The only thing that hasn't been ported over to pbx2.js is pbx.js's checkEssentials object. These functions verify that specific dailplan contexts are exactly as expected. If they aren't the functions replace the current context with what it should be. This is the only place in the GUI where the GUI actually forces no customizations. These functions also load all the configs and create the client-side data cache, which is the sessionData object. 

Pbx2.js holds all the data models. If you look at the file, you'll see a clear system. pbx is the main object with many members, such as: users, trunks, queues, etc. etc. Each pbx member has all the necessary methods needed to configure Asterisk. For example, the users member has add, edit, remove, and list methods. This allows any page to add a user by calling pbx.users.add(); Its important to note that if you are looking for where the GUI modifies some file, its most likely going to be in pbx2.js sparing a few exceptions. 

-- 
Ryan Brindley 
Digium, Inc. | Software Developer 
445 Jan Davis Drive NW - Huntsville, AL 35806 - USA 
main: +1 256-428-6000 fax: +1 256-864-0464 
Check us out at: http://digium.com & http://asterisk.org 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.digium.com/pipermail/asterisk-gui/attachments/20090904/f5dbbc6d/attachment.htm