Рецепт (Паттерн?) меж оконного взаимодействия.

[Scud]

Рецепт (Паттерн?) меж оконного взаимодействия.

Может кому пригодиться.

Часто при риализации сложного UI с помощью JS/HTML необходимо показать пользователю некий диалог при закрытии которого
данные, выбранные пользователем в диалоге, отправлются главному приложению (окну в котором бежит основной скрипт
приложения).

Открыть окно и загрузить в него код диалога легко и просто (window.open нам поможет)
А вот чтобы передать данные назад, а также отловить момент закрытия окна (чтобы провести анализ полученных данных), приходиться придумывать разные хитроумные способы . Модальные диалоги IE я отбрасываю сразу так как не crossbrowser

Один из способов может быть таким:
- window.open() вторым параметром принимает имя нового окна
- это имя доступно в открытом окне с помощью свойства window.name
- для того чтобы передать данные диалога родительскому окну нужно использовать свойства окна window.opener и window.name

/// Метод вызывается при закрытии диалога, может быть присвоен событию onclick какой-либо кнопки, например.
function onClose()
{
    /// Сначала сохраняем данные введённые пользователем в диалоге
    if (window.opener && !window.opener.closed) {
          window.opener[window.name] = 'Данные из диалога';
    }
    /// А теперь оповещаем родительское окно о том что нас собственно закрыли
    if (window.opener[window.name+"OnClose"]) {
          window.opener[window.name+"OnClose"]();
    }
}

- код для открытия окна диалога должен быть таким

window.open('/path/to/dialog', 'dialog');

dialogOnClose()
{
    alert(window['dialog']);
}

p.s. Может конечно велосипед... так что если что звиняйте.

 

[thujone]

Диалог подразумевает две точки выхода:
1) OK
2) Cancel

Поэтому мой вариант интерфейса:

/**
* @param {String} url
* @param {Function} okCallback
* @param {Function} cancelCallback
*/
function OpenModalDialog (url, okCallback, cancelCallback)
{
// Function body
}

Вообще готовых реализаций диалоговых окон в интернете можно найти порядочно.

Одна из них prototype-window-class

 

[Gorynych]

thujone

Модальные диалоги IE я отбрасываю сразу так как не crossbrowser

 

[phprus]

Модальные диалоги можно сымитировать при помощи слоев и javascript.
Например создаем прозрачный слой, который закрывает весь документ, а внутри него слой в который непосредственно вставляем нужное содуржимое. При необходимости можно даже сделать так, чтобы внутренний слой выглядел как окно и чтобы его можно было таскать мышкой.
Последнее лекго реализуется при помощи библиотеки - http://forum.dklab.ru/js/advises/DragNDropInterface.html.
А вот моя реализация диалоговых окон с кнопками Ok и отмена и возможностью выбора одной из 3-х иконок: ошибка, предупреждение, подтверждение - http://forum.dklab.ru/js/advises/CustomConfirmDialog.html В принципе мою реалзацию можно расширить и добавить в диалог какие-либо другие поля. Проблем при получении значений из них не возникнет, так как они по сути находятся в том-же окне, только в другом слое.