HTML-приложения: создание многооконных приложений (ч.1)
19555
В , посвящённой HTML-приложениям (HTA), мы научились создавать простейшие приложения, содержащие всего одно, если так можно выразиться, окно. Но в реальной программистской жизни редко удаётся обойтись одним-единственным "окном". Приложение может иметь очень сложный интерфейс, может выполнять разные задачи, к тому же, будучи "однооконным", оно может оказаться неудобным для пользователя.
Напрашивается выход - разделить интерфейс и логику приложения на несколько "окон". Но как это реализовать на практике?
1. Введение в "многооконные" HTML-приложения
Начнём с небольшого теоретического курса, рассматривающего принципы создания "многооконных" HTML-приложений. Принципы эти не так уж и сложны и используются довольно давно. Ну да обо всём по порядку...
1.1. Проблемы, возникающие при создании "многооконных" HTML-приложений
Чтобы создать "многооконное" приложение, нам следует создать несколько веб-страниц - по одному на каждое "окно". Эти веб-страницы будут содержать отдельные части пользовательского интерфейса и логики приложений. Файлы, хранящие их, будут иметь расширение hta - именно оно, как мы помним из первой статьи, даёт понять Internet Explorer, что перед ним HTML-приложение, а не просто веб-страница. Фактически мы создадим несколько HTML-приложений, работающих как единое целое. Но здесь возникают две проблемы.
Проблема первая, касающаяся пользователя, - неизвестно, на каком HTA-файле следует щёлкнуть, чтобы запустить приложение. Конечно, мы можем дать нужному файлу "говорящее" имя, наподобие runme.hta, startup.hta или, в лучших традициях веб-дизайна, index.hta. Но неопытный пользователь может нас не понять - для него все файлы приложения на одно лицо - и запустить не тот HTA-файл. После чего он заявит, что приложение не работает...
В случае, если приложение распространяется в дистрибутиве, мы можем указать, чтобы при установке создавался ярлык, указывающий на нужный HTA-файл. В результате пользователь запустит приложение щелчком на этом ярлыке. То же самое и в случае распространения приложений с веб-страницы - мы создадим гиперссылку, указывающую на нужный HTA-файл, и посетителю останется только щёлкнуть на ней, чтобы запустить приложение. Так что данную проблему мы решим.
Но столкнёмся со второй проблемой - отсутствием удобных механизмов для передачи данных между отдельными веб-страницами, то есть "окнами" приложения. А данные передавать придётся, ведь эти веб-страницы составляют единое приложение, и данные, введённые на одной веб-странице, скорее всего, будут обрабатываться на другой.
Мы можем передавать данные в составе интернет-адреса - методом GET. Но, во-первых, таким способом мы не сможем передать большой объём данных (длина интернет-адреса ограничена 255 символами), а во-вторых, нам придётся писать дополнительный код, который будет сначала определённым образом кодировать эти данные и добавлять их к интернет-адресу, а потом - извлекать их оттуда и декодировать в вид, пригодный для использования в сценариях.
Мы можем использовать для временного хранения данных cookies. Но, опять же, во-первых, не сможем сохранить там что-либо объёмное (максимальный размер cookie - 4 Кбайт), а во-вторых, нам придётся писать дополнительный код, который будет эти данные особым образом упаковывать, а потом - распаковывать. И вообще, cookies плохо подходят для кратковременного хранения больших и сложно структурированных данных; их "конёк" - хранение элементарных значений небольшого объёма в течение долгого времени.
Так что нам делать?
1.2. Решение проблем - плавающие фреймы
Выход есть - использование фреймов. Точнее, определённой их разновидности - плавающих фреймов.
Фрейм в терминологии веб-дизайна, - элемент веб-страницы, предназначенный для отображения содержимого другой веб-страницы. Они используются в веб-дизайне довольно давно и являются частью стандарта HTML.
Традиционные фреймы объединяются в наборы фреймов, где они выстраиваются либо по горизонтали, слева направо, либо по вертикали, сверху вниз. Такой набор фреймов занимает веб-страницу целиком; никакого другого содержимого на ней быть не должно. Дело в том, что тег, создающий набор фреймов, согласно стандартам HTML, замещает собой тег <BODY>, определяющий её содержимое. А содержимое, которое должно присутствовать на этой веб-страницы, распределяется по другим веб-страницам, которые выводятся во фреймах, составляющий этот набор.
Применяя фреймы, мы можем обновить часть содержимого веб-страницы, просто загрузив в нужный фрейм другой HTML-файл, где хранится новый фрагмент содержимого. То есть реализовать "многооконное" HTML-приложение. При этом содержимое других фреймов останется тем же самым, что позволит нам сохранить какую-то часть интерфейса неизменной (это могут быть, например, кнопки Назад, Вперёд и Отмена приложения-"мастера", которые присутствуют в каждом его окне в неизменном виде).
Плавающие фреймы - другая разновидность фреймов. Они не создаются в составе наборов фреймов, а "гуляют сами по себе". Они могут занимать произвольную часть веб-страницы, успешно соседствовать с другим содержимым, и их проще создавать.
Например, применительно к приложению-"мастеру", мы можем создать веб-страницу с кнопками Назад, Вперёд и Отмена и плавающим фреймом, занимающим большую часть веб-страницы; в этом фрейме котором будут выводиться отдельные окна "мастера". Да, пожалуй, так и сделаем.
Примечание:
Разумеется, никто не запрещает применять при создании HTML-приложений традиционные фреймы. Пожалуй даже, в некоторых случаях они могут оказаться предпочтительнее.
2. Реализация "многооконных" HTML-приложений
Что ж, с теоретической частью покончено. Займёмся практикой.
2.1. Создание плавающего фрейма
И начнём мы с создания плавающих фреймов. Плавающие фреймы создаются с помощью парного тега <IFRAME>. Этот тег помещается в том месте HTML-кода веб-страницы, где должен находиться плавающий фрейм. Содержимого этот тег не имеет.
<IFRAME ID="ffr1" WIDTH="100%" HEIGHT="300" FRAMEBORDER="0" SCROLLING="no"
APPLICATION="yes" SRC="1.html">
</IFRAME>
Здесь мы создали плавающий фрейм с именем ffr1, занимающий всю (100%) ширину веб-страницы, высотой в 300 пикселов, без рамки и полос прокрутки, сделали его доверенным и вывели в нём веб-страницу 1.html.
Полезные для нас атрибуты тега <IFRAME> перечислены ниже.
Атрибут ALIGN позволяет указать горизонтальное выравнивание плавающего фрейма относительно остального содержимого веб-страницы. Здесь доступны три значения:
- left - фрейм выравнивается по левому краю доступного пространства, при этом остальное содержимое "обтекает" его справа;
- center - фрейм выравнивается по центру доступного пространства;
- right - фрейм выравнивается по правому краю доступного пространства, при этом остальное содержимое "обтекает" его слева.
Если данный атрибут не указан, выравнивание фрейма не выполняется, и остальное содержимое веб-страницы его не обтекает.
Атрибут APPLICATION устанавливает, может ли веб-страница, отображённая во фрейме, получить доступ к веб-странице, на которой находится этот фрейм, и наоборот, или, другими, словами, является ли фрейм доверенным. Значение yes делает фрейм доверенным, а значение no (это значение по умолчанию) - обычным.
Поскольку довольно часто приходится получать доступ из одной веб-страницы, составляющей HTML-приложение, к другой, мы должны обязательно сделать все фреймы в HTML-приложении доверенными. Без вариантов.
Атрибут FRAMEBORDER позволяет указать Internet Explorer, выводить ли вокруг фрейма рамку. Значение yes или 1 указывает вводить рамку, значение no или 0 - не выводить. Значение по умолчанию - 1.
Атрибут HEIGHT задаёт высоту фрейма. Здесь можно задавать как абсолютные значения в пикселах, так и относительные в процентах от свободного пространства на веб-странице. Значения в пикселах указываются как есть, а значения в процентах помечаются символом %, который ставится сразу после значения. В любом случае значение этого атрибута указывается в виде целого числа.
Атрибут HSPACE задаёт расстояние между фреймом и остальным содержимым веб-страницы по вертикали. Его значение задаётся в виде целого числа в пикселах. Значение по умолчанию - 0.
Атрибут SCROLLING указывает, будут ли во фрейме присутствовать полосы прокрутки. Здесь доступны три значения:
- yes - полосы прокрутки выводятся в любом случае;
- no - полосы прокрутки не выводятся в любом случае;
- auto - полосы прокрутки выводятся только в том случае, если содержимое веб-страницы не помещается во фрейме (это значение по умолчанию).
Атрибут SRC задаёт интернет-адрес файла веб-страницы, которая должна выводиться во фрейме изначально.
Атрибут VSPACE задаёт расстояние между фреймом и остальным содержимым веб-страницы по горизонтали. Его значение задаётся в виде целого числа в пикселах. Значение по умолчанию - 0.
Атрибут WIDTH задаёт ширину фрейма. Здесь также можно задавать как абсолютные значения в пикселах, так и относительные в процентах от свободного пространства на веб-странице. Значения в пикселах указываются как есть, а значения в процентах помечаются символом %, который ставится сразу после значения. В любом случае значение этого атрибута указывается в виде целого числа.
2.2. Начинаем создавать "многооконное" HTML-приложение
Давайте для практики реализуем приложение - преобразователь величин из дюймов в миллиметры, что мы создали в первой статье цикла, в виде приложения-"мастера". Сделаем мы это в три этапа.
На первом этапе мы создадим основную веб-страницу, которая, собственно, и станет HTML-приложением. На ней мы поместим, прежде всего, плавающий фрейм, который займёт её верхнюю часть и будет отображать остальные веб-страницы, включающие остальные части интерфейса приложения. Ниже фрейма мы поместим кнопки Назад, Вперёд и Отмена, отделив их горизонтальной линией и выровняв по правому краю, чтобы сделать наше приложение больше похожим на стандартный "мастер" Windows.
HTML-код основной веб-страницы приведён ниже.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Преобразователь</TITLE>
<HTA:APPLICATION APPLICATIONNAME="appConvertor" BORDER="dialog"
ICON="Convertor.ico" MAXIMIZEBUTTON="no" SCROLL="no" SELECTION="no"
SINGLEINSTANCE="yes" VERSION="2.0"></HTA:APPLICATION>
<SCRIPT>
window.resizeTo(310, 200);
</SCRIPT>
</HEAD>
<BODY>
<IFRAME ID="ffr1" WIDTH="100%" HEIGHT="70" FRAMEBORDER="0" SCROLLING="no"
APPLICATION="yes" SRC="1.html"></IFRAME>
<HR>
<FORM>
<DIV STYLE="text-align: right">
<INPUT TYPE="button" ID="btnBack" VALUE="Назад">
<INPUT TYPE="button" ID="btnForward" VALUE="Вперёд">
<INPUT TYPE="button" VALUE="Закрыть" ONCLICK="window.close();">
</DIV>
</FORM>
</BODY>
</HTML>
t;
</HTML>[/code]
Здесь нам всё, в принципе, знакомо ещё по первой статье. Дадим лишь минимальные пояснения.
В плавающем фрейме изначально будет выводиться веб-страница 1.html. Она будет содержать поле ввода Дюймы, где указывается величина в дюймах.
Для создаваемого приложения мы указали версию 2.0. Это мелочь, но говорит об аккуратности, проявленной разработчиками.
Сохраним эту веб-страницу в файле с именем, скажем, Convertor.hta. На этом первый этап закончен.
Второй этап - создание веб-страницы 1.html, которая будет изначально отображаться в плавающем фрейме. На ней мы поместим поле ввода Дюймы.
HTML-код веб-страницы 1.html очень прост и не требует никаких разъяснений.
[code]<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
</HEAD>
<BODY>
<FORM>
<P>Дюймы: <INPUT TYPE="text" ID="txtInches"></P>
</FORM>
</BODY>
</HTML>[/code]
На третьем этапе мы создадим веб-страницу 2.html, которая будет выведена после нажатия кнопки Вперёд. На ней мы поместим доступное только для чтения поле ввода Миллиметры, где будет отображена преобразованная величина.
HTMl-код веб-страницы 2.html также очень прост.
[code]<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
</HEAD>
<BODY>
<FORM>
<P>Миллиметры: <INPUT TYPE="text" ID="txtMillimetres" READONLY></P>
</FORM>
</BODY>
</HTML>[/code]
Что ж, костяк нашего приложения - HTML-код - готов. Осталось наполнить его "мясом" - веб-сценариями, реализующими его логику.
2.3. Программное открытие веб-страницы во фрейме
Итак, пользователь запустил наше приложение, ввёл в поле ввода Дюймы величину в дюймах и нажал кнопку Вперёд. В результате во фрейм будет загружена вторая веб-страница (2.html), в поле ввода Миллиметры которой появится та же величина, но уже преобразованная в миллиметры.
Стоп, но как нам загрузить нужную веб-страницу во фрейме? Очень просто!
Плавающий фрейм с точки зрения веб-сценария является экземпляром объекта HTMLIFrameElement. Этот объект поддерживает свойство src, соответствующее атрибуту SRC тега <IFRAME>. Оно задаёт или возвращает интернет-адрес веб-страницы, открытой в этом фрейме, в виде строки.
Значит, чтобы открыть во фрейме другую веб-страницу, нам достаточно присвоить строку с её интернет-адресом свойству src данного фрейма.
Откроем веб-страницу Convertor.hta и добавим к веб-сценарию, уже присутствующему в её секции заголовка (в теге <HEAD>), вот такой код:
[code]function goBack()
{
var oFfr1 = document.getElementById("ffr1");
oFfr1.src = "1.html";
}
function goForward()
{
var oFfr1 = document.getElementById("ffr1");
oFfr1.src = "2.html";
}[/code]
Эти функции будут выполнять переход на веб-страницы 1.html и 2.html соответственно.
После этого привяжем эти функции к кнопкам, соответственно, Назад и Вперёд в качестве обработчиков их событий click, для чего исправим создающие теги <INPUT>, создающие эти кнопки, таким образом:
[code]<INPUT TYPE="button" ID="btnBack" VALUE="Назад" ONCLICK="goBack();">
<INPUT TYPE="button" ID="btnForward" VALUE="Вперёд" ONCLICK="goForward();">[/code]
Дополнительные материалы
Окончание следует...
Апрель 2011
Комментарии
