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

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

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

В предыдущей статье, посвящённой 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>

Здесь нам всё, в принципе, знакомо ещё по первой статье. Дадим лишь минимальные пояснения.

В плавающем фрейме изначально будет выводиться веб-страница 1.html. Она будет содержать поле ввода Дюймы, где указывается величина в дюймах.

Для создаваемого приложения мы указали версию 2.0. Это мелочь, но говорит об аккуратности, проявленной разработчиками.

Сохраним эту веб-страницу в файле с именем, скажем, Convertor.hta. На этом первый этап закончен.

Второй этап — создание веб-страницы 1.html, которая будет изначально отображаться в плавающем фрейме. На ней мы поместим поле ввода Дюймы.

HTML-код веб-страницы 1.html очень прост и не требует никаких разъяснений.

Код:
<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>

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

HTMl-код веб-страницы 2.html также очень прост.

Код:
<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>

Что ж, костяк нашего приложения — HTML-код — готов. Осталось наполнить его «мясом» — веб-сценариями, реализующими его логику.

2.3. Программное открытие веб-страницы во фрейме
Итак, пользователь запустил наше приложение, ввёл в поле ввода Дюймы величину в дюймах и нажал кнопку Вперёд. В результате во фрейм будет загружена вторая веб-страница (2.html), в поле ввода Миллиметры которой появится та же величина, но уже преобразованная в миллиметры.

Стоп, но как нам загрузить нужную веб-страницу во фрейме? Очень просто!

Плавающий фрейм с точки зрения веб-сценария является экземпляром объекта HTMLIFrameElement. Этот объект поддерживает свойство src, соответствующее атрибуту SRC тега <IFRAME>. Оно задаёт или возвращает интернет-адрес веб-страницы, открытой в этом фрейме, в виде строки.

Значит, чтобы открыть во фрейме другую веб-страницу, нам достаточно присвоить строку с её интернет-адресом свойству src данного фрейма.

Откроем веб-страницу Convertor.hta и добавим к веб-сценарию, уже присутствующему в её секции заголовка (в теге <HEAD>), вот такой код:

Код:
function goBack()
{
var oFfr1 = document.getElementById(«ffr1″);
oFfr1.src = «1.html»;
}

function goForward()
{
var oFfr1 = document.getElementById(«ffr1″);
oFfr1.src = «2.html»;
}

Эти функции будут выполнять переход на веб-страницы 1.html и 2.html соответственно.

После этого привяжем эти функции к кнопкам, соответственно, Назад и Вперёд в качестве обработчиков их событий click, для чего исправим создающие теги <INPUT>, создающие эти кнопки, таким образом:

Код:
<INPUT TYPE=»button» ID=»btnBack» VALUE=»Назад» ONCLICK=»goBack();»>
<INPUT TYPE=»button» ID=»btnForward» VALUE=»Вперёд» ONCLICK=»goForward();»>

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

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

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

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