Page 286 - Asterisk™: The Future of Telephony
P. 286
Figure 11-1. A screenshot of the Asterisk GUI
Adding a new tab to the GUI
As an example of customizing the Asterisk GUI, let’s create a new tab that displays the
contents of extensions.conf. First, we need to create a file and put it in the /var/lib/
asterisk/static-html/config directory. In this example, we’ll name the file test.html:
<script src="scripts/prototype.js"></script>
<script src="scripts/astman.js"></script>
<script>
function localAjaxinit() {
parent.loadscreen(this);
makerequest('g','extensions.conf', '' , function(t){
$('ExtensionsDotConf').innerHTML = "<PRE>" + t + "</PRE>";
});
}
</script>
<body onload="localAjaxinit()" bgcolor="EFEFEF">
<div id="ExtensionsDotConf"></div>
</body>
This code simply displays the configuration of the extensions.conf file. Obviously it’s a
very simple example, but it shows the fundamentals of creating a new page for the
Asterisk GUI. Let’s walk through the example step by step.
The first line tells the browser to load the Prototype library. The second line tells the
browser to load the astman.js file, which contains much of the code designed to interact
with the Manager interface.
258 | Chapter 11: The Asterisk GUI Framework
