Создание тулбара для Mozilla FireFox - часть 4
Создание скриптов. JavaScript. - 2
Единственное, о чем мы не сказали — как заставить каждый пункт меню выполнять какой-то код, будучи выбранным. Это делаеся очень просто: еще раз вызываем функцию setAttribute(), передаем ей событие и код, который хотим с ним связать. Вот пример для события oncommand:
tempItem.setAttribute("oncommand", "GBLTut_SomeFunction()");
Вот и все, что нужно для динамического заполнения меню! Штука очень полезная и легко реализуемая.
Динамически добавляем кнопки тулбара
(Эта тема не включена в код учебного тулбара)
Динамически добавлять кнопки так же просто, как заполнять меню, и делается это по той же схеме. Для начала нам нужен контейнер для наших кнопок. В Googlebar Lite я использую элемент toolbaritem, чтоб хранить набор кнопок с поисковыми запросами. В XUL это выглядит так:
<toolbaritem id="GBLTut-DynButtonContainer" />
Теперь можно добавить элементы toolbarbutton при помощи такой вот функции (в этом примере мы добавим 5 кнопок, так же, как сделали это с пунктами меню):
function GBLTut_AddDynamicButtons() {
var container = document.getElementById("GBLTut-DynButtonContainer");
for(i=container.childNodes.length; i > 0; i--) {
container.removeChild(container.childNodes[0]);
}
for(var i=0; i<5; i++) {
var tempButton = null;
tempButton = document.createElement("toolbarbutton");
tempButton.setAttribute("label", "Button " + i);
tempButton.setAttribute("tooltiptext", "Button " + i);
tempButton.setAttribute("oncommand", "GBLTut_SomeFunction()");
container.appendChild(tempButton);
}
}
Единственное отличие этой функции от использованной для заполнения меню — первый цикл. Я просто показываю другой способ удалять предыдущие элементы. Все остальное — также. Но вот события onpopupshowing у нас нет. Так как же нам эту функцию вызвать?
А просто. Всякий раз, когда данные обновляются, можно вызвать функцию создания кнопок. Например, по событию oninput, когда пользователь начинает вводить текст в поисковую форму. (Пример, опять же, бестолковый, однако показвает, что есть пространство для воображения — прим. пер.).
Динамически включаем-выключаем кнопки
(Эта тема не включена в код учебного тулбара)
Часто возникают ситуации, когда нужно динамически сделать кнопку тулбара доступной или недоступной. Например, кнопка подсветки в Googlbar Lite должна быть недоступна, если нет поисковых слов, которые надо подсветить. Как только такие слова появляются, кнопка подсветки должна автоматически становиться доступной.
В следующем примере мы создадим пункт меню, который будет переключать статус обычной кнопки между доступным и недоступным. Вот разметка:
<menuitem label="Toggle Web Button" tooltiptext="Toggle Web Button"
oncommand="GBLTut_ToggleWebButton()" />
А вот код функции GBLTut_ToggleWebButton():
function GBLTut_ToggleWebButton() {
var button = document.getElementById("GBLTut-TB-Web");
var value = button.disabled;
if(value == "true")
button.disabled = false;
else
button.disabled = true;
}
Сначала получаем доступ к интересующей нас кнопке, используя getElementById(). Далее, выясняем ее текущее состояние, используя свойство disabled объекта button. Если оно установлено в true, меняем на false, и наоборот. FireFox сам делает кнопку недоступной, и теперь по ней хоть кликай, хоть не кликай — ничего не произойдет. (При этом картинка серой не сделается — об этом нужно позаботиться отдельно, работая со скином, об этом в следующем разделе). Полезная фишка, пригодится в любом тулбаре, а выполнить ее просто, как и все остальные.
Динамически прячем-показываем кнопки
(Эта тема не включена в код учебного тулбара)
Googlebar Lite позволяет пользователю выбирать, какие кнопки он хочет видеть на своем тулбаре. Т.е. тулбар дожен уметь динамически показывать-прятать кнопки. Как и предыдущие, эта возможность реализуется крайне просто. Вот кусок JavaScript-кода, который сделает все, что нужно:
var TB_Web = document.getElementById("GBLTut-TB-Web");
TB_Web.setAttribute("hidden", !GBLTut_TB_ShowWeb);
Я опять использую функцию getElementById(), чтоб получить интересующую меня кнопку. Потом вызываю функцию setAttribute, чтоб изменить значение атрибута hidden. Обратите внимание, я присваиваю ему значение, противоположенное значению переменной GBLTut_TB_ShowWeb. Это булева переменная, в которой хранится информация, хочет ли пользователь видеть кнопку “web search”. Ее значение устанавливается где-то в коде Googlebar Lite, после чтения опции “Web Search Button” из пользовательских настроек. Читайте дальше, если интересно, как это делается.
Читаем и сохраняем настройки пользователя
(эта тема не включена в код учебного тулбара)
Для того, чтоб прочитать сохраненные настройки, нам нужно создать “переменную настроек”. Вот кусок кода, который это делает (отформатирован, чтоб влезть в экран):
const GBLTut_PrefService =
Components.
classes["@mozilla.org/preferences-service;1"].
getService(Components.interfaces.nsIPrefService);
Когда у нас есть эта переменная, мы можем получить доступ к ветке настроек для нашего расширения:
const GBLTut_Branch = GBLTut_PrefService.getBranch("gbl_tutorial.");
Все настройки нашего расширения начинаются с “gbl_tutorial.” (обратите внимание на точку на конце), поэтому такое значение передается функции getBranch() (встроенная функция FireFox). Наконец, вот код, используемый для считывания пользовательских настроек:
if(GBLTut_Branch.prefHasUserValue("buttons.web"))
GBLTut_TB_ShowWeb = GBLTut_Branch.getBoolPref("buttons.web");
else
{
GBLTut_Branch.setBoolPref("buttons.web", false);
GBLTut_TB_ShowWeb = false;
}
Сначала я проверяю, существует ли такая запись в дереве настроек. Если да, я использую функцию getBoolPref(), чтоб прочитать ее значение и сохранить в переменную GBLTut_TB_ShowWeb. Если нет, устанавливаю значение по умолчанию — и для дерева настроек, и для нашей глобальной переменной.
Сохранение настроек производится также, как их чтение. Вот код, записывающий только что считанное значение:
GBL_Branch.setBoolPref("buttons.web", GBLTut_TB_ShowWeb);
