Веб-заметки и Веб-подсказки

Данная статья является инструкцией (tutorial) по созданию индивидуальных диалоговых сообщений, таких как alert(), confirm(), prompt(). Мы создадим аналог функции для ввода текста prompt(), которая позволяет вводить многострочный текст (multiline), как в textarea.

1. Первое, что нам нужно — это создать сам диалог.
Создаем в проекте файл с названием «textarea-dialog.xul».
Внутри этого файла размещаем оформление самого диалога.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<dialog
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="multilinePrompt"
title="Please, enter text:"
buttons="accept"
ondialogaccept="return onOK();"
>
<script type="application/javascript" src="chrome://myEx/content/textarea-dialog.js"/>
<vbox>
<textbox id="dialogTextarea" multiline="true" />
<button dlgtype="accept"/>
</vbox>
</dialog>

Как вы могли заметить, данный диалог содержит 2 управляющих элемента:
— поле для ввода текста с параметром multiline= «true», который делает возможным вводить текст с энтерами (переносами строк);
— кнопку, по нажатии на которую вызывается событие ondialogaccept.
Также, в этом файле подключается javascript-файл «textarea-dialog.js», предназначенный для обработки нажатия кнопки, о котором будет более подробно расписано в пункте 2.

2. Создаем обработчика кнопки нашего диалога.
Создаем в нашем плагине файл «textarea-dialog.js» и добавляем в него такой код:

function onOK() {
window.arguments[0].out = {text:document.getElementById('dialogTextarea').value};
return true;
}

Таким образом мы будем передавать введенные пользователем данные в то место, откуда был вызван диалог. Откуда взялось свойство «out» мы увидим в следующем пункте.

3. Вызов диалога и получение данных с него.
Теперь мы можем воспользоваться нашим диалогом с любого места в нашем плагине. Для этого нужно написать примерно такой код:

// Создаем объект, с помощью которого
// можем передавать данные диалогу и получать данные от него
var pvar dialogExchangeParams = {in:{}, out:null};
// Вызываем наш диалог
window.openDialog(
"chrome://myEx/content/textarea-dialog.xul",
"",
"chrome, dialog, modal, resizable=false, height=100, width=300",
dialogExchangeParams
).focus();
// Получаем данные, указанные пользователем в нашем диалоговом окне
var text = dialogExchangeParams.out.text;

Созданный нами объект dialogExchangeParams — это ключевое звено, позволяющее обмениваться информацией с диалогом.
Чтобы передать данные в наш диалог, их нужно просто указать в свойство in данного объекта. Чтобы получить данные в диалоговом окне, необходимо написать так: window.arguments[0].in. Понятно, что в этом свойстве может хранится любой сложности объект.
Аналогично — принимаем данные, благодаря свойству out.

Вот и все. Ничего сложного :).

Более подробно можно почитать на официальном сайте:
https://developer.mozilla.org/en/Code_snippets/Dialogs_and_Prompts