Например, в функции
submitform вызов document.getElementById() может быть заменен функцией $(). Аналогично, вызов value для получения содержимого DOM-эле- мента можно заменить вызовом $F(). Таким образом, document.getElemen tById('username').value становится просто $F('username'); в результате получаем намного более простой и удобный для чтения код. Prototype также позволяет выполнять элегантные XMLHttp-запросы. С помощью объекта Prototype Ajax функцию submitform() можно переписать следующим образом:
<script language='javascript' type='text/javascript'> function submitform(){ var url = '/rawman';
var pars = 'username=' + escape($F('username')) + '&secret=' + escape ($F('password'));
var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: dosomething });
}
</script>
Этот код не только намного короче, теперь в веб-страницы не придется включать специальный код для каждого броузера. Prototype берет на себя заботу о различиях между Mozilla/Firefox и версиями Internet Explorer. Более того, она выполняет проверку параметра readyState запроса, поэтому больше нет необходимости в этом ужасном выражении if. Prototype имеет массу встроенных функций, некоторые из них активно используются в инфраструктуре Asterisk. Обсуждать их здесь нет возможности, но более подробную информацию можно найти в разделе «Short Cuts» книги «Prototype Quick Reference» Скотта Реймонда
(Scott Raymond) и «Prototype and Scriptaculous: Taking the Pain Out of JavaScript» Криса Ангуса (Chris Angus), обе книги изданы в O'Reilly.
Настройка GUI
Рассмотрев разные части, формирующие основу Asterisk GUI, мы располагаем всем необходимым для исследования самого GUI и его настройки соответственно собственным нуждам. Asterisk GUI можно найти по следующему адресу:
Взглянув на рис. 11.1, вы можете подумать, что Asterisk GUI - это просто еще один из множества существующих графических пользовательских интерфейсов Asterisk. Но это абсолютно не так. Этот GUI не просто позволяет настраивать себя, он практически умоляет сделать это. В данном разделе обсуждается, как можно настраивать GUI и использовать AJAM для создания собственных расширений к GUI. Чтобы извлечь из этой информации максимальную пользу, необходимо обладать базовыми знаниями по HTML и JavaScript. Домашняя страница GUI называется cfgbasic.html. Все остальные страницы загружаются в окно iframe, содержащееся на странице cfgbasic.html. По умолчанию cfgbasic.html загружает home.html в основном окне.
Большинство изменений GUI в конечном счете связаны с изменением файла cfgbasic.html, который формирует окно регистрации.
Как добавить в GUI новую вкладку
В качестве примера настройки Asterisk GUI создадим новую вкладку, отображающую содержимое файла extensions.conf. Сначала необходимо создать файл и поместить его в папку /var/lib/asterisk/static-html/ config. В данном примере назовем файл 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>
Данный код просто отображает конфигурацию файла extensions.conf. Конечно, это очень простой пример, но он демонстрирует основы создания новой страницы для Asterisk GUI. Рассмотрим этот пример шаг за шагом.
Первая строка указывает броузеру загрузить библиотеку Prototype. Вторая - загрузить файл astman.js, в котором содержится большая часть кода для взаимодействия с интерфейсом Manager. Далее описываем функцию localAjaxinit. Сначала функция localAj axinit указывает родителю этой страницы (в данном случае файлу cfgbasic.html) выполнить функцию loadscreen, передавая в нее эту страницу как параметр. Таким образом, основное окно GUI загрузит нашу новую страницу test.html в iframe. Следующее, что мы делаем в функции localAjaxinit, - используем функцию make request. Функция определена в файле astman.js и очень упрощает выполнение запросов к веб-серверу[109]. Первый параметр функции makerequest определяет тип выполняемого запроса. Он может принимать следующие значения:
Использует действие GetConfig для извлечения конфигурации из конфигурационного файла, заданного во втором параметре.
'u'
Использует действие UpdateConfig для обновления конфигурации в конфигурационном файле, заданном во втором параметре. Третий
параметр функции определяет данные конфигурации, которые должны быть обновлены.
Если в качестве первого параметра функции makerequest заданы одинарные кавычки, будет отправлено специальное действие, определенное в третьем параметре.
Четвертый параметр - это функция обратного вызова, которая будет вызываться в ответ на запрос Ajax.
Примеры использования makerequest
Возьмем в качестве примера следующий фрагмент кода. Он демонстрирует три разных способа использования функции makerequest. В первом случае мы получаем конфигурационные данные из файла users.conf. Во втором - обновляем musiconhold. conf и меняем значение настройки random в классе default. И последнее (по порядку, но не по значимости) - вызываем действие Ping. В каждом случае задается функция обратного вызова t, которая просто заменяет содержимое переменной div ответом, полученным в результате Ajax-вызова.
makerequest( 'g', 'users.conf', '' ,
function(t) { $('ExtensionsDotConf'). innerHTML = '<PRE>' + t + '</PRE>'; } );
makerequest( 'u', 'musiconhold.conf',
'&Action-000000=update&Cat-000000=default&Var-000000=random&Value- 000000=yes' ,
function(t) { $('ExtensionsDotConf').innerHTML = '<PRE>' + t + '</PRE>'; } );
makerequest( '', '', 'action=Ping' ,
function(t) { $('ExtensionsDotConf').innerHTML = '<PRE>' + t + '</PRE>'; } );
Все остальное содержимое test.html - это просто HTML-код с элементом div, в котором будут размещены конфигурационные данные после их получения. Обратите внимание, что тег HTML-кода имеет атрибут onload, который обусловливает выполнение броузером функции localAjaxinit сразу же по завершении загрузки страницы.
Теперь, когда новая страница создана, необходимо отредактировать файл cfgbasic.html, чтобы добавить эту страницу как панель GUI. Откройте файл cfgbasic.html, найдите JavaScript-функцию returnpanels и вставьте этот код в список панелей в том месте, где вы хотите разместить свою панель:
newpanel( ['Test', 'test.html', 'Test']); Теперь перезагрузите GUI в своем броузере. Слева должна появиться новая вкладка Test (Проверка), и после щелчка по ней будут отображаться значения
