HTML-приложения: использование диалоговых окон (ч.2)
18848
3. Реализация немодальных диалоговых окон
На очереди - создание немодальных диалоговых окон и работа с ними.
3.1. Открытие немодального диалогового окна
Для открытия немодального диалогового окна применяется метод showModelessDialog объекта Window. Вот формат вызова этого метода:
<окно>.showModelessDialog(
<интернет-адрес веб-страницы - содержимого диалогового окна>[,
<значение, передаваемое диалоговому окну>[,
<параметры диалогового окна>]]
);
передаваемое диалоговому окну>[,
<параметры диалогового окна>]]
);[/code]
Как видим, параметры этого метода такие же, как и у уже знакомого нам метода showModalDialog (см. параграф 2.1).
В отличие от своего "коллеги" showModalDialog, метод showModelessDialog завершает свою работу сразу после открытия диалогового окна. Метод showModelessDialog возвращает экземпляр объекта Window, представляющий открытое диалоговое окно.
[code]window.showModelessDialog("options_modeless.html");[/code]
3.2. Доступ к немодальному диалоговому окну из окна, которое его открыло
Модальные диалоговые окна, как правило, используются исключительно для получения от пользователя данных. Такие окно принимает от окна, открывшего его, одни данные (например, текущие значения параметров приложения), а потом, возможно, передаёт ему другие (новые значения параметров, заданные пользователем). "Залезать" в диалоговое окно из окна, его открывшего, и наоборот обычно нужды не возникает.
Немодальные диалоговые окна - совсем другое дело. Они обычно применяются для выполнения каких-либо действий над окном, которое его открыло, и загруженным в него документом. При этом часто возникает потребность манипулировать из диалогового окна содержимым окна, которое его открыло, и наоборот. Сейчас мы выясним, как это можно реализовать.
Получить доступ к диалоговому окну из окна, которое его открыло, проще простого. В параграфе 3.1 говорилось, что метод showModelessDialog возвращает экземпляр объекта Window, представляющий диалоговое окно, в качестве результата. Этот экземпляр объекта мы можем использовать, чтобы получить доступ к самому диалоговому окну и элементам реализующей её веб-страницы. Как это делается, мы уже знаем.
[code]var oDialog = window.showModelessDialog("options_modeless.html");
var oChkWrap = oDialog.document.getElementById("chkWrap");
oChkWrap.checked = bWrap;[/code]
Во второй статье цикла, посвящённой "многооконным" HTML-приложениям, говорилось о любопытной особенности экземпляров объекта Window. Если мы объявим в веб-сценарии какую-либо глобальную переменную, эта переменная станет свойством экземпляра объекта Window, представляющего текущее окно или вкладку веб-браузера. Впоследствии мы сможем обратиться к этой переменной из другого окна или вкладки, использовав синтаксис обращения к свойству экземпляра объекта. То же самое и с любой функцией - будучи объявленной, она становится методом данного экземпляра объекта Window.
[code]/// Диалоговое окно ///
var someVar = 0;
function someFunc()
{
. . .
}
/// Окно, открывшее это диалоговое окно ///
var oDialog = window.showModelessDialog("options_modeless.html");
. . .
oDialog.someVar = 1;
oDialog.someFunc();[/code]
3.3. Доступ из немодального диалогового окна к окну, которое его открыло
Замечательно! Осталось выяснить, как получить доступ, так сказать, в обратном направлении - из диалогового окна к окну, которое его открыло.
Мы уже знаем, что метод showModelessDialog в качестве второго, необязательного, параметра принимает значение, которое будет передано диалоговому окну. Диалоговое окно сможет получить его из свойства dialogArguments объекта Window.
Мы передадим этим параметром экземпляр объекта Window, представляющий текущее окно.
[code]var oDialog = window.showModelessDialog("options_modeless.html", window);[/code]
После этого в диалоговом окне мы с его помощью сможем добраться до содержимого окна, что его открыло.
[code]var oMainWindow = window.dialogArguments;
var oTxtText = oMainWindow.document.getElementById("txtText");
var bWrap = chkWrap.checked;[/code]
Также мы можем добраться из диалогового окна до переменных и функций, объявленных в веб-сценарии, который выполняется в окне, которое открыло данное диалоговое окно.
[code]/// Окно, открывшее диалоговое окно
var someVar = 0;
function someFunc()
{
. . .
}
/// Диалоговое окно ///
var oMainWindow = window.dialogArguments;
oMainWindow.someVar = 4;
oMainWindow.someFunc();[/code]
3.4. HTML-приложение с поддержкой немодальных диалоговых окон
Теперь попрактикуемся. Создадим другую версию нашего HTML-приложения текстового редактора, которое будет поддерживать задание параметров с помощью немодального диалогового окна.
Вот код самого HTML-приложения (файл Textedit_modeless.hta) после всех исправлений:
[code]<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Текстовый редактор</TITLE>
<HTA:APPLICATION ID="hta1" APPLICATIONNAME="appTextEdit" BORDER="thin"
ICON="Textedit.ico" MAXIMIZEBUTTON="no" SCROLL="no" SELECTION="no"
SINGLEINSTANCE="yes" VERSION="1.1"></HTA:APPLICATION>
<SCRIPT>
window.resizeTo(710, 490);
var bWrap = true;
var sColor = "black";
function showParameters()
{
var oDialog = window.showModelessDialog("options_modeless.html", window,
"dialogHeight:160px;dialogWidth:200px;scroll:no");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM ID="frm1">
<TEXTAREA ID="txtText" COLS="80" ROWS="30"></TEXTAREA>
<BR>
<INPUT TYPE="button" VALUE="Параметры" ONCLICK="showParameters();">
</FORM>
</BODY>
</HTML>[/code]
Как видим, он заметно проще, чем код основного окна первой версии нашего приложения. Никаких дополнительных разъяснений здесь не требуется - всё уже нам знакомо.
Теперь создадим веб-страницу, реализующую диалоговое окно. Поместим на ней всё те же флажок Перенос текста, раскрывающийся список Цвет текста, а также кнопки Применить и Закрыть, обычные для немодальных диалоговых окон. Нажатие кнопки Применить вызовет немедленное применение заданных пользователем параметров.
Код этой веб-страницы приведён ниже.
[code]<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Параметры</TITLE>
<SCRIPT>
var oMainWindow, oTxtText, oChkWrap, oSelColor;
function setup()
{
oMainWindow = window.dialogArguments;
oTxtText = oMainWindow.document.getElementById("txtText");
oChkWrap = document.getElementById("chkWrap");
oSelColor = document.getElementById("selColor");
oChkWrap.checked = oMainWindow.bWrap;
oSelColor.value = oMainWindow.sColor;
}
function setParams()
{
oMainWindow.bWrap = oChkWrap.checked;
oMainWindow.sColor = oSelColor.value;
oTxtText.wrap = oChkWrap.checked ? "soft" : "off";
oTxtText.style.color = oSelColor.value;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="setup();">
<FORM>
<P><INPUT TYPE="checkbox" ID="chkWrap"> Перенос текста</P>
<P>Цвет текста
<SELECT ID="selColor" SIZE="1">
<OPTION VALUE="black">Чёрный</OPTION>
<OPTION VALUE="red">Красный</OPTION>
<OPTION VALUE="green">Зелёный</OPTION>
<OPTION VALUE="blue">Синий</OPTION>
</SELECT>
</P>
<P>
<INPUT TYPE="button" VALUE="Применить" ONCLICK="setParams();">
</P>
<P>
<INPUT TYPE="button" VALUE="Закрыть" ONCLICK="window.close();">
</P>
</FORM>
</BODY>
</HTML>[/code]
Вот этот код уже заметно больше и сложнее, чем код диалогового окна первой версии приложения. Что и немудрено - ведь мы перенесли в него из основного окна всю логику применения параметров.
Здесь мы объявляем глобальные переменные, которые будут хранить основное окно приложения, область редактирования основного окна, где вводится сам текст, и элементы управления диалогового окна. Это позволит нам всегда "иметь их под рукой" и не "отыскивать" каждый раз, когда в них возникнет нужда.
Сразу после окончания загрузки веб-страницы, реализующей диалоговое окно, возникнет событие load. В качестве обработчика этого события мы указали функцию setup. Эта функция сохранит в объявленных ранее глобальных переменных экземпляры объектов, представляющие основное окно приложения (его передаст основное окно во втором параметре метода showModelessDialog), область редактирования, где вводится сам текст, и элементы управления диалогового окна. Кроме того, эта функция поместит текущие значения параметров приложения в соответствующие им элементы управления.
При щелчке на кнопке Применить выполнится обработчик её события click - функция setParams. Она сохранит заданные пользователем значения параметров в переменных основного окна и тут же применит их к области редактирования.
Кнопка Закрыть, как и в случае первой версии приложения, просто закрывает диалоговое окно.
Сохраним эту веб-страницу в файле options_modeless.html. И посмотрим, как работает наше новое HTML-приложение.
4. Позиционирование диалоговых окон после их открытия
Модальные диалоговое окна, как правило, располагаются в центре экрана. (Там, кстати, они и выводятся Internet Explorer по умолчанию, в чём мы убедились ещё в параграфе 2.1.) А вот немодальные диалоговые окна часто располагают таким образом, чтобы они не перекрывали основное окно приложения и не мешали пользователю работать с его содержимым.
Разумеется, мы можем задать нужные координаты диалогового окна при его открытии, указав соответствующие значения в третьем параметре метода showModalDialog или showModelessDialog (см. параграф 2.1). Но не всегда это возможно. Часто приходится указывать позицию диалоговых окон уже после того, как они будут открыты.
Возможно ли это? Конечно!
Объект Window поддерживает четыре свойства, позволяющие задать местоположение и размеры диалогового окна. Все эти свойства перечислены ниже.
- dialogLeft - задаёт горизонтальную координату верхнего левого угла диалогового окна.
- dialogTop - задаёт вертикальную координату верхнего левого угла диалогового окна.
- dialogHeight - задаёт высоту диалогового окна.
- dialogWidth - задаёт ширину диалогового окна.
Примечание:
Перечисленные выше свойства доступны только в диалоговых окнах.
В качестве значений этих свойств могут быть указаны значения различных типов:
- Целое число - задаёт соответствующую координату или размер в пикселах.
- Число с плавающей точкой - задаёт соответствующую координату или размер в пикселах.
- Строка - должна содержать число, задающее собственно значение координаты или размера, и - следом за ним - обозначение единицы измерения, поддерживаемой CSS.
[code]window.dialogLeft = 10;
window.dialogTop = 45.8;
window.dialogWidth = "200px";[/code]
Если мы собираемся позиционировать диалоговые окна после их открытия, нам, возможно, понадобится перед этим узнать позицию основного окна приложения, чтобы расположить диалоговое окно, скажем, вдоль какой-либо его стороны. Перечисленными выше свойствами мы воспользоваться для этого не сможем, так как они доступны только в диалоговых окнах. Нам придётся обратиться к другим средствам.
Свойства screenLeft и screenTop объекта Window возвращают координаты - горизонтальную и вертикальную соответственно - верхнего левого угла клиентской области окна веб-браузера в виде целых чисел в пикселах. (Вспомним, что клиентская область - это внутреннее пространство окна, в котором отображается веб-страница.) Эти свойства доступны только для чтения. К сожалению, узнать координаты самого окна мы не можем.
Объект HTMLDocument, представляющий саму веб-страницу, поддерживает доступное только для чтения свойство body. Оно возвращает экземпляр объекта HTMLBodyDocument, представляющий секцию тела данной веб-страницы (тег <BODY> со всем его содержимым).
Объект HTMLBodyElement поддерживает доступные только для чтения свойства offsetHeight и offsetWidth. Они возвращают, соответственно, высоту и ширину секции тела веб-страницы с учётом внешних отступов (margins), рамок и полос прокрутки, если таковые есть, в виде целых чисел в пикселах. С грехом пополам эти свойства можно использовать, чтобы выяснить размеры окна веб-браузера.
Примечание:
В Internet Explorer 9 появилась поддержка свойств outerHeight и outerWidth объекта Window. Эти доступные только для чтения свойства возвращают, соответственно, высоту и ширину самого окна веб-браузеров в виде целых чисел в пикселах. Однако, чтобы использовать эти свойства в HTML-приложениях, нам придётся указать соответствующий режим совместимости веб-браузера (см. параграф 3.3 ).
Давайте сделаем так, чтобы немодальное диалоговое окно из второй версии нашего приложения - текстового редактора располагалось у верхнего правого угла основного окна. Для этого откроем файл options_modeless.html и вставим в конец объявления функции setup такие два выражения:
[code]window.dialogLeft = oMainWindow.screenLeft +
oMainWindow.document.body.offsetWidth;
window.dialogTop = oMainWindow.screenTop;[/code]
Не бог весть что, но приложение теперь стало несколько удобнее в использовании.
Дополнительные материалы
Апрель 2011
Комментарии
