HTML-приложения: использование диалоговых окон (ч.1)

Автор: Topol Воскресенье, Май 6th, 2012 Нет комментариев

Рубрика: Операционные системы

Очень часто для ввода каких-либо данных в Windows-приложениях применяются диалоговые окна. Эти окна содержат элементы управления, в которых и вводятся требуемые приложением данные, и кнопки ОК и Отмена, первая из которых подтверждает ввод данных, а вторая — отменяет.

Диалоговые окна бывают двух видов:

  • Модальные (modal) диалоговые окна блокируют все остальные окна приложения, то есть пользователь не сможет получить доступ к любому другому окну, пока не закроет диалоговое окно нажатием кнопки ОК или Отмена. Обычно модальные диалоговые окна используются для ввода каких-либо данных, критически важных для продолжения работы приложения. Например, диалоговое окно открытия файла всегда делается модальным.
  • Немодальные (modeless) диалоговые окна не блокируют остальные окна приложения. Пользователь может свободно переключаться между таким диалоговым окном и любым другим окном приложения. Немодальные диалоговые окна применяются значительно реже модальных. Они используются для указания рабочих параметров, некритичных для продолжения работы программы, и выполнения различных действий с основным окном или загруженным в нём документом. Так, диалоговое окно поиска всегда делается немодальным.

Internet Explorer позволяет нам использовать в HTML-приложениях как модальные, так и немодальные диалоговое окна. Сейчас мы рассмотрим, как это делается.

Примечание:
Перед чтением этой статьи настоятельно рекомендуется ознакомиться с предыдущими тремя статьями цикла, посвящённого HTML-приложениям Internet Explorer.

1. Готовим тестовое HTML-приложение
Давайте создадим простейшее HTML-приложение текстового редактора без всяких «наворотов». Оно будет содержать большую область редактирования, где, собственно, и вводится текст, и кнопку Параметры, при нажатии которой будет выводиться диалоговое окно ввода параметров.

Набор параметров, которые пользователь может указать, у нас будет небольшим. Это, прежде всего, функция переноса текста в области редактирования — будет ли она включена или отключена. И цвет текста; пусть пользователь получит возможность выбирать между чёрным, синим, зелёным и красным цветом.

Мы реализуем это приложение в двух версиях: первая будет использовать для ввода параметров модальное диалоговое окно, а вторая — немодальное.

HTML-код приложения приведён ниже.

Код:
<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.0″></HTA:APPLICATION>
<SCRIPT>
window.resizeTo(710, 490);
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TEXTAREA ID=»txtText» COLS=»80″ ROWS=»30″></TEXTAREA>
<BR>
<INPUT TYPE=»button» VALUE=»Параметры»>
</FORM>
</BODY>
</HTML>

Комментировать здесь нечего. Желающие могут обратиться за подробностями к первой статье цикла.

Сохраним это приложение в двух файлах: Textedit_modal.hta (версия с модальным диалоговым окном) и Textedit_modeless.hta (версия с немодальным диалоговым окном). И приступим…

2. Как реализуются диалоговые окна
Но сначала — небольшой теоретический курс. Прежде всего, содержимое любого диалогового окна — и модального, и немодального — реализуется в виде обычной веб-страницы. Эта веб-страница сохраняется в отдельном файле с расширением htm или html (как и содержимое отдельных «окон» приложения, о создании которых рассказывалось во второй статье цикла).

При открытии модального диалогового окна мы можем передать ему некоторые данные (об этом — далее). Это могут быть, скажем, текущие значения параметров приложения, которые потом будут подставлены в элементы управления диалогового окна.

При закрытии модального диалогового окна мы можем передать какие-либо данные окну, которое его открыло. В случае диалогового окна настроек это могут быть значения параметров, введённые пользователем.

При открытии немодального диалогового окна мы не можем передать ему никаких данных, а также не можем вернуть введённые в него данные окну, которое его открыло. Однако мы можем получить доступ к этому окну из окна, которое его открыло, и, наоборот, «добраться» из диалогового окна к окну, что его открыло. Этим мы можем воспользоваться для обмена данными между окнами и выполнения действий над содержимым одного окна из другого.

Вот пока и всё. Займёмся практикой. А остальные теоретические вопросы рассмотрим по ходу дела.

3. Реализация модальных диалоговых окон
Начнём с реализации модальных диалоговых окон как наиболее часто используемых.

3.1. Открытие модального диалогового окна
Мы только что узнали, что содержимое диалогового окна реализуется в виде обычной веб-страницы. Создать веб-страницу для нас труда не составит. Но как открыть само диалоговое окно?

Для открытия модального диалогового окна применяется метод showModalDialog объекта Window. Формат вызова этого метода таков:

Код:
<окно>.showModalDialog(
<интернет-адрес веб-страницы — содержимого диалогового окна>[,
<значение, передаваемое диалоговому окну>[,
<параметры диалогового окна>]]
);

Первый параметр этого метода является обязательным. Он задаёт интернет-адрес веб-страницы, реализующей содержимое диалогового окна, в виде строки.

Код:
window.showModalDialog(«options_modal.html»);

Второй параметр необязателен. Он задаёт значение, которое будет передано диалоговому окну. (Как получить это значение в диалоговом окне, мы рассмотрим потом.) Передаваемое значение может быть любого типа: строка, число, логическое значение, массив, функция или экземпляр любого объекта.

Код:
window.showModalDialog(«options_modal.html», 2);

Здесь мы передали диалоговому окну число 2.

Третий, также необязательный, параметр указывает параметры самого диалогового окна. Он должен представлять собой строку, содержащую наименования параметров и их значения. Наименование параметра отделяется от значения двоеточием, а отдельные параметры друг от друга — точкой с запятой (как и в случае написания стилей CSS).

Код:
window.showModalDialog(«options_modal.html», 2,
«dialogHeight:300px;dialogWidth:400px»);

Здесь мы указали параметры открываемого диалогового окна — высоту (300 пикселов) и ширину (400 пикселов).

Список параметров диалоговых окон, поддерживаемых Internet Explorer, довольно велик. Давайте их рассмотрим.

  • dialogLeft — задаёт горизонтальную координату верхнего левого угла диалогового окна относительно верхнего левого угла экрана. Если данный параметр не указан, горизонтальная координата окна будет выбрана произвольно.
  • dialogTop — задаёт вертикальную координату верхнего левого угла диалогового окна относительно верхнего левого угла экрана. Если данный параметр не указан, вертикальная координата окна будет выбрана произвольно.
  • dialogHeight — задаёт высоту диалогового окна. Если данный параметр не указан, диалоговое окно будет иметь высоту по умолчанию. Минимальное возможное значение высоты — 100 пикселов.
  • dialogWidth — задаёт ширину диалогового окна в пикселах. Если данный параметр не указан, диалоговое окно будет иметь ширину по умолчанию. Минимальное возможное значение ширины — 250 пикселов. Для указания координат верхнего левого угла и размеров диалогового окна может быть использована любая единица измерения, поддерживаемая CSS, с обязательным указанием её обозначения. Так, в приведённом выше примере символы px, поставленные после значений высоты и ширины, указывают, что они заданы в пикселах.
  • dialogHide — указывает, следует ли скрывать диалоговое окно при выполнении печати или предварительного просмотра перед печатью. Значение yes, 1 или on указывает сделать это, а значение no, 0 или off — не делать. Значение по умолчанию — no.
  • center — задаёт, должно ли диалоговое окно находиться в центре экрана. Значение yes, 1 или on указывает Internet Explorer расположить диалоговое окно по центру экрана, а значение no, 0 или off — не делать этого. Значение по умолчанию — yes.

    Примечание:
    Если указать координаты диалогового окна с помощью параметров dialogHeight и dialogWidth, то диалоговое окно будет располагаться в указанном месте экрана независимо от значения параметра center. Или, другими словами, параметры dialogHeight и dialogWidth имеют больший приоритет.

  • edge — задаёт вид рамки, которая будет выведена вокруг содержимого диалогового окна, внутри его клиентской области (клиентская область - это внутренняя область окна, где собственно выводится содержимое веб-страницы). Значение raised указывает вывести «приподнятую» рамку (на деле такая рамка почти незаметна), а значение sunken — «утопленную» (а эта рамка заметна довольно хорошо и, надо сказать, сильно портит вид). Значение по умолчанию — raised.
  • resizable — указывает, будет ли пользователь иметь возможность менять размеры диалогового окна. Значение yes, 1 или on даёт ему такую возможность, а значение no, 0 или off — не даёт. Значение по умолчанию — no. Практически все диалоговые окна, прменяемые в профессионально написанных приложениях, имеют постоянные и неизменяемые размеры. Делать диалоговое окно с изменяемыми размерами нет никакого смысла, вдобавок, такое окно будет выглядеть странно.
  • scroll — указывает, будут ли в диалоговом окне присутствовать полосы прокрутки. Значение yes, 1 или on предписывает Internet Explorer вывести их, а значение no, 0 или off — не выводить. Значение по умолчанию — yes. Странно, что разработчики Internet Explorer решили по умолчанию наделить диалоговые окна полосами прокрутки. На памяти автора, ни одно Windows-приложение, попадавшееся ему в руки, не имело диалоговых окон с полосами прокрутки (если, конечно, не считать ученических поделок, в которых встречалось и не такое…). Вообще, диалоговое окно с прокруткой выглядит крайне нелепо. Так что вывод однозначен — полосы прокрутки убираем!
    Код:
    window.showModalDialog(«options_modal.html», 2,
    «dialogHeight:300px;dialogWidth:400px;scroll:no»);
  • status — задаёт наличие или отсутствие в диалоговом окне строки статуса. Значение yes, 1 или on выводит в окне строку статуса, а значение no, 0 или off — не выводит. Значение по умолчанию — no. Строка статуса в диалоговом окне — аксессуар явно лишний. Ни одно приложение, с которыми имел дело автор, таких штук не практиковало. Мы тоже не будем.
  • unadorned — указывает, должно ли диалоговое окно иметь рамку, заголовок, системное меню и кнопки максимизации, минимизации и закрытия, или, как сейчас говорят, хром. Значение yes, 1 или on задаёт отсутствие хрома, а значение no, 0 или off — его наличие. Значение по умолчанию — no. Вообще, убирать хром стоит только у мудрёных диалоговых окон в таких же мудрёных приложениях. Окно без хрома выглядит крайне непривычно и может обескуражить пользователя.

После вызова метода showModalDialog выполнение веб-сценария останавливается, пока диалоговое окно не будет закрыто. Выполнение будет продолжено только после закрытия окна.

Осталось сказать о результате, который возвращает метод showModalDialog. Это значение, которое было передано диалоговым окном окну, что его открыло. Это значение может быть любого типа: строка, число, логическое значение, массив, функция или экземпляр любого объекта.

Примечание:
Вызов метода showModalDialog может присутствовать только в обработчиках событий, возникающих вследствии действий пользователя (например, события click — щелчок мышью). В противном случае вызов этого метода будет проигнорирован.

3.2. Передача модальному диалоговому окну каких-либо данных при его открытии
Очень часто приходится передавать открываемому модальному диалоговому окну какие-либо данные. Например, это могут быть текущие значения параметров, которые следует подставить в элементы управления данного окна.

Мы уже знаем, что можем передать модальному диалоговому окну значение любого типа, подставив его вторым параметром в вызов метода showModalDialog.

Код:
window.showModalDialog(«options_modal.html», 2);

Но что делать, если нам требуется передать в диалоговое окно несколько значений? Существует два способа сделать это.

Способ первый — создать массив и поместить значения, которые следует передать, в его элементы.

Код:
var aParams[0] = true;
var aParams[1] = «black»;
window.showModalDialog(«options_modal.html», aParams);

Здесь мы создали обычный массив aParams с двумя элементами, которым присвоили значения, передаваемые диалоговому окну.

Мы можем создать и ассоциативный массив (хэш):

Код:
var aParams["wrap"] = true;
var aParams["color"] = «black»;
window.showModalDialog(«options_modal.html», aParams);

Пожалуй, так удобнее — строковые индексы хэша запомнить проще, чем числовые индексы обычного массива.

Способ второй — создать экземпляр объекта Object, воспользовавшись инициализатором JavaScript, создать в нём свойства, которым и присвоить передаваемые значения.

Код:
var oParams = { wrap: true, color: «black» };
window.showModalDialog(«options_modal.html», oParams);

Какой способ выбрать — дело вкуса. Например, автор предпочитает экземпляры объекта Object, читая их самыми подходящими для этой цели. А кому-то может показаться более удобными массивы — обычные или хэши.

3.3. Получение в модальном диалоговом окне данных, переданных окном, которое его открыло
Так, данные модальному окну мы передали. Теперь их нам нужно как-то их получить в самом этом окне.

Объект Window поддерживает доступное только для чтения свойство dialogArguments. Оно хранит значение, которое было передано диалоговому окну вторым параметром метода showModalDialog. То, что нам нужно.

Примечание:
Свойство dialogArguments доступно только в диалоговых окнах.

Вот так мы можем получить значения, переданные как элементы хэша:

Код:
var aParams = window.dialogArguments;
var bWrap = aParams["wrap"];
var sColor = aParams["color"];

А так — значения, переданные как свойства экземпляра объекта Object:

Код:
var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;

3.4. Передача данных из модального диалогового окна в окно, которое его открыло
Осталось выяснить, как выполнить передачу данных в обратном направлении — из модального диалогового окна в окно, которое его открыло. Нам ведь придётся возвращать из диалогового окна параметров новые их значения, заданные пользователем, не так ли?

Какое-либо значение передавать из диалогового окна окну, которое его открыло, следует только в том случае, если пользователь нажал кнопку ОК. В случае нажатия кнопки Отмена этого делать обычно не нужно; вообще, кнопка Отмена должна только закрывать диалоговое окно, не выполняя никаких прочих действий.

Итак, пользователь нажал в диалоговом окне кнопку ОК. Теперь нам нужно передать какие-то данные окну, из которого было открыто диалоговое окно. Как это сделать?

Объект Window поддерживает свойство returnValue. В этом свойстве сохраняется значение, которое должно быть передано из модального диалогового окна в окно, что его открыло. Значение это может быть любого типа.

Примечание:
Свойство returnValue доступно только в модальных диалоговых окнах.

Например, так мы можем передать из открывшему окну одно-единственное значение:

Код:
window.returnValue = 2;

А так — несколько значений:

Код:
window.returnValue = { wrap: bWrap, color: sColor };

Разумеется, в этом случае мы также можем использовать обычный массив или хэш.

Если же пользователь нажал в диалоговом окне кнопку Отмена, мы, как условились ранее, не будем присваивать свойству returnValue никакого значения. В таком случае данное свойство получит своё значение по умолчанию — null. Кстати, то же самое случится, если пользователь закроет диалоговое окно нажатием кнопки закрытия или комбинации клавиш <Alt>+<F4>.

Хорошо! Диалоговое окно закрыто (как его закрыть, мы узнаем потом). Теперь окно, которое его открыло, должно получить значение свойства returnValue. Как?

Очень просто. Значение свойства returnValue будет возвращено методом showModalDialog в качестве результата. Впрочем, это уже говорилось в параграфе 2.1.

Мы должны проверить, равно ли это значение null. Если это так, значит, никаких данных диалоговое окно не передало. В противном случае мы сможем как-то использовать переданные им данные в приложении.

Код:
var oResult = window.showModalDialog(. . .);
if (oResult != null) {
var bResultWrap = oResult.wrap;
var sResultColor = oResult.color;
}

3.5. Закрытие модального диалогового окна
Напоследок нам следует собственно закрыть модальное диалоговое окно. Для этого мы можем использовать не принимающий параметров и не возвращающий результата метод close объекта Window.

Код:
window.close();

3.6. HTML-приложение с поддержкой модальных диалоговых окон
Что ж, настала пора чистой практики. Доделаем наше HTML-приложение текстового редактора, чтобы оно поддерживало задание параметров с помощью модального диалогового окна.

Код самого HTML-приложения (файл Textedit_modal.hta) после исправлений станет таким:

Код:
<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.0″></HTA:APPLICATION>
<SCRIPT>
window.resizeTo(710, 490);

var bWrap = true;
var sColor = «black»;

function showParameters()
{
var oParams = { wrap: bWrap, color: sColor };
var oResult = window.showModalDialog(«options_modal.html», oParams,
«dialogHeight:120px;dialogWidth:200px;scroll:no»);
if (oResult != null) {
bWrap = oResult.wrap;
sColor = oResult.color;
var oTxtText = document.getElementById(«txtText»);
oTxtText.wrap = bWrap ? «soft» : «off»;
oTxtText.style.color = sColor;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TEXTAREA ID=»txtText» COLS=»80″ ROWS=»30″></TEXTAREA>
<BR>
<INPUT TYPE=»button» VALUE=»Параметры» ONCLICK=»showParameters();»>
</FORM>
</BODY>
</HTML>

Здесь, в принципе, нас всё уже знакомо. Требуются только минимальные пояснения.

Прежде всего, мы объявили две переменные — bWrap и sColor, — которые будут хранить текущие значения параметров приложения. Первая переменная будет хранить логическую величину — признак того, выполняется ли в области редактирования в данный момент перенос строк. А вторая переменная будет хранить текущее значение цвета текста в области редактирования в виде строки.

Примечание:
Вообще, текущие значения параметров можно вообще нигде не хранить, а каждый раз получать из соответствующих свойств экземпляра объекта HTMLTextAreaElement, представляющего область редактирования, где вводится текст. Просто автор решил не переусложнять код приложения.

Область редактирования представляется экземпляром объекта HTMLTextAreaElement. Этот объект поддерживает свойство wrap, задающее режим переноса строк. Значение «soft» этого свойства указывает области редактирования выполнять перенос строк, причём в местах переноса не будут вставляться символы возврата каретки и перевода строки («мягкий» перенос строк). А значение «off» указывает области редактирования вообще не выполнять перенос строк.

Все объекты, представляющие элементы веб-страницы, поддерживают свойство style. Это свойство хранит экземпляр объекта CSSStyle, представляющий текущий стиль CSS, который привязан к данному элементу веб-страницы.

Объект CSSStyle, в свою очередь, поддерживает множество свойств, соответствующих различным атрибутам стиля. Так, свойство color соответствует одноимённому атрибуту стиля, задающему цвет текста.

Теперь создадим веб-страницу, реализующую само диалоговое окно. Поместим на ней флажок Перенос текста, раскрывающийся списокЦвет текста и, разумеется, обязательные для окон подобного плана кнопки ОК и Отмена.

Код этой веб-страницы приведён ниже.

Код:
<HTML>
<HEAD>
<META HTTP-EQUIV=»Content-Type» CONTENT=»text/html; charset=windows-1251″>
<TITLE>Параметры</TITLE>
<SCRIPT>
function setup()
{
var oParams = window.dialogArguments;

var oChkWrap = document.getElementById(«chkWrap»);
var oSelColor = document.getElementById(«selColor»);

oChkWrap.checked = oParams.wrap;
oSelColor.value = oParams.color;
}

function sendParams()
{
var oChkWrap = document.getElementById(«chkWrap»);
var oSelColor = document.getElementById(«selColor»);
window.returnValue = { wrap: oChkWrap.checked, color: oSelColor.value };
window.close();
}
</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=»sendParams();»>
<INPUT TYPE=»button» VALUE=»Отмена» ONCLICK=»window.close();»>
</P>
</FORM>
</BODY>
</HTML>

Здесь, опять же, всё нам уже знакомо. Пояснения требуются самые минимальные.

Атрибут SIZE тега <SELECT>, создающего список, задаёт размер данного списка в пунктах. Значение 1 этого атрибута тега указывает, что список должен иметь высоту в один пункт, то есть это должен быть раскрывающийся список.

Атрибут VALUE тега <OPTION>, создающего отдельный пункт списка, задаёт значение этого пункта.

Сразу после окончания загрузки веб-страницы, реализующей диалоговое окно, возникнет событие load. В качестве обработчика этого события мы указали функцию setup. Эта функция получит значение, переданное диалоговому окну от окна, что его открыло, — экземпляр объекта Object со свойствами, хранящими текущие значения параметров приложения. После этого она занесёт эти значения в соответствующие им элементы управления.

Объект HTMLInputElement, представляющий элемент управления, в том числе и флажок, поддерживает свойство checked, доступное только для флажков. Это свойство указывает состояние флажка: установлен ли он (значение true) или сброшен (значение false).

Объект HTMLSelectElement, представляющий список, поддерживает свойство value. Оно содержит значение пункта списка, который выбран в данный момент, в виде строки. Присвоив этому свойству какое-либо значение, мы укажем списку изначально выбрать пункт с этим значением.

При щелчке на кнопке ОК выполнится обработчик её события click — функция sendParams. Она создаст экземпляр объекта Object с помощью инициализатора JavaScript, занесёт в его свойства значения, заданные пользователем в элементах управления диалогового окна, — они станут новыми значениями параметров приложения. Полученный экземпляр объекта она передаст окну, которое открыло это диалоговое окно, то есть самому приложению, после чего закроет диалоговое окно.

Кнопка Отмена просто закрывает диалоговое окно. В результате окну, которое открыло это диалоговое окно, будет передано значение null — сигнал, что пользователь не подтвердил ввода новых параметров приложения.

Сохраним эту веб-страницу в файле options_modal.html. И проверим готовое HTML-приложение в действии.

Источник: thevista.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты