Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Инкапсуляция и многократное использование DHTML
Единственной альтернативой для решения задач инкапсуляции сценариев DHTML были скриптлеты. Скриптлеты – это первая попытка компании Microsoft в разработке компонентов HTML, допускающих многократное использование. Сама идея была вполне удачной, но способ её реализации оказался недостаточно продуманным. В результате при взаимодействии скриптлета с другими HTML элементами страницы возникали некоторые проблемы. Вкратце можно сказать, что скриптлет взаимодействует с Web-страницей таким же образом, как элемент управления ActiveX. Скриптлет создается при помощи тега <object> и выполняется в своем отдельном окне, расположенном на странице. Скриптлеты доставляли много хлопот при использовании, так как не всегда их можно было согласовать с другими HTML элементами страницы – они выглядели чужеродными объектами в этой среде. Внешне это выражалось в том, что они располагались в непрозрачном прямоугольнике, частично закрывающем основную страницу. Поэтому они не могли органично вписаться в текстуру фона и в среду прочих элементов HTML.
Компонент поведения DHTML
В версии Internet Explorer 5.0 компания Microsoft внедрила новую технологию под названием компонент поведения (behavior) DHTML, которая намного упрощает инкапсуляцию и многократное использование кодов. Компонент поведения DHTML – это просто компонент, основанный на двоичном коде или сценарии, который инкапсулирует определенные функции и способы манипуляции объектами на странице. Чаще всего такие компоненты разрабатываются на основе сценариев, но для создания двоичных компонентов можно использовать С++. Последние могут оказаться особенно полезными, если Вам необходимо реализовать достаточно тонкие бизнесс-правила. Примененный к стандартному элементу HTML на странице, компонент поведения может расширить свойственные этому элементу функциональные возможности и добавить к нему новые методы, свойства и события, которыми сам обладает.
Применение компонентов поведения
Для поддержки функциональных возможностей, предоставляемых компонентами поведения DHTML, необходимо несколько дополнить возможности DOM и CSS. В версии Internet Explorer 5.0 компания Microsoft предпочла расширить возможности броузера вместо того, чтобы менять существующую технологию. Это было сделано таким образом, чтобы более старые версии броузеров могли просто проигнорировать те новые возможности, которые они не умеют использовать, но при этом все же были в состоянии воспринимать содержание.
Компоненты поведения применяются к элементу HTML с использованием CSS или DOM. В первом случае применение компонентов поведения вызовет не больше затруднений, чем изменение шрифта элемента HTML. Оно основано на новом атрибуте behavior, определяющем компонент поведения. Этот атрибут может быть задан для любого элемента точно так же, как и всякий другой атрибут CSS.
l Способ встраивания:
<DIV STYLE="behavior:url(file. htc)">...</DIV>
l Способ внедрения: элемент HTML используется как селектор
<STYLE>
DIV {behavior:url(foo. htc)}
</STYLE>
<BODY>
<DIV>…</DIV>
</BODY>
l Способ внедрения: имя класса используется как селектор:
<STYLE>
.foo {behavior:url(foo. htc)}
</STYLE>
<BODY>
<DIV CLASS="foo">…</DIV>
</BODY>
l Способ, использующий объект style элемента в сценарии:
<SCRIPT>
function init(){
foo. style. behavior="url(foo. htc)"
}
</SCRIPT>
<BODY ONLOAD="init()">
<DIV id="foo">...</DIV>
</BODY>
Бинарные компоненты поведения включаются через тег object
Сделав ссылку на тег object, следует установить значение свойства URL при определении компонента поведения в каскадной таблице стилей равным значению параметра ID (идентификатора) с префиксом #, как показано в следующем примере:
<STYLE>
.foo {behavior:url(#binaryObject)}
</STYLE>
<OBJECT id="binaryObject" ...></OBJECT>
<DIV CLASS="foo"><DIV>
Помимо использования таблиц стилей, компонент поведения можно добавить к данному элементу, применив к последнему метод addBehavior. Этот метод представляет из себя динамический способ применения компонента поведения к элементу через сценарий. Еще одно свойство метода addBehavior заключается в том, что если элемент удален из иерархии документа, то компонент поведения остается с этим элементом связанным. Все методы присоединения компонента поведения через CSS, кроме метода встраивания, подразумевают автоматическое отъединение компонента поведения от элемента при удалении последнего из иерархии объектов. Метод addBehavior возвращает целочисленное значение – идентификатор, который впоследствии может быть использован для удаления компонента поведения. Следующий пример показывает использование метода addBehavior:
<SCRIPT>
function init(){
identifier=foo. addBehavior("foo. htc")
}
</SCRIPT>
<BODY ONLOAD="init()">
<DIV id="foo">...</DIV>
</BODY>
Определяемые пользователем теги
В некоторых случаях роль компонентов поведения не сводится к расширению функциональных возможностей элемента HTML и остается невидимой для пользователя. К примеру, Вам может потребоваться компонент, который сообщит Вам о параметрах пользовательского броузера – таких как поддержка языка Java или cookies. Вы можете применять такие компоненты к тегам, которые Вы сами определили.
Вы можете создать свой элемент XML и применить к нему какой-либо компонент поведения. Это делается следующим образом: Вы создаете пространство имен для своего документа и затем вставляете его перед новым элементом. Тем самым Вы избегаете возможных конфликтов новых элементов с уже существующими HTML элементами. Помимо того, пространства имен превращают Ваш новый элемент в объект DHTML, поддерживающий события и обладающий основными функциональными возможностями, присущими DHTML – например, наличие свойств innerHTML и innerText. Создание пространства имен происходит так:
Вы добавляете строку XMLNS:MyNamespace (где MyNamespace - имя, определенное пользователем) к тегу <html> документа. Помимо задания пространства имен, Вы можете определить универсальное имя ресурса (URN – uniform resource name), которое однозначно задает пространство имен; здесь прослеживается аналогия с универсальным указателем ресурса (URL – uniform resource locator).
Рассмотрим следующий пример использования URN: XMLNS:MyNamespace=”My GloballyUniqueName”. Создав свой элемент, Вы должны перед ним вставить MyNamespace таким образом: MyNamespace:newElement (здесь newElement - Ваш новый элемент).
Мы приводим пример создания нового пространства имен и нового элемента, к которому применяем затем компонент поведения.
<HTML XMLNS:TEST>
<SCRIPT>
function getSetting(){
alert(foo. getSetting("CookiesEnabled")
}
</SCRIPT>
<BODY ONLOAD="getSetting()">
<TEST:INPUT id="foo" STYLE="behavior:url(foo. htc)"></TEST:INPUT>
</BODY>
Вызов методов и установление свойств
Строка foo. getSetting(“CookiesEnabled”) является обращением к новой функциональности, предоставляемой компонентом поведения. Такова же ситуация и со свойствами. Вы можете задать его в теге элемента, к которому применяется компонент. К примеру, если компонент foo имеет панель свойство bar, это может быть задано следующим образом:
<STYLE>
DIV {behavior:url(foo. htc)}
</STYLE>
<BODY>
<DIV bar="propValue"></DIV>
</BODY>
Компонент поведения DHTML имеет свою собственную объектную модель, которая может раскрывать свойства, методы и события. Когда компонент поведения применен к элементу, то к его свойствам, методам и событиям добавляются те, что содержатся в компоненте.
Добавление нескольких компонентов поведения
Но ничто не мешает нам применить к одному элементу несколько компонентов поведения. Метод addBehavior автоматически добавляет компонент поведения к списку компонентов, примененных к данному элементу, при этом не влияя на все ранее добавленные к элементу компоненты поведения. Вы можете для применения к одному элементу нескольких компонентов поведения воспользоваться свойством behavior каскадных таблиц стилей для элемента, задавая список компонентов, разделенных пробелом. Например:
<DIV STYLE="behavior:url(file. htc) url(bar. htc)">...</DIV>
Приоритет имеет тот компонент, который был задан для применения к элементу последним или является последним в списке.
Прочие дополнения DOM
Помимо метода addBehavior и свойства behavior каскадных таблиц стилей CSS в табл. 2.2 приведены другие методы, добавленные к DOM DHTML для поддержки компонентов поведения.
Таблица 2.2 Методы DOM DHTML для поддержки компонентов поведения
Новое расширение DHTML | Параметры | Возвращаемое значение | Описание |
AttachEvent-Method | Событие для обработки; вызы-ваемая при возникновении события функция | Выполнена ли функция (истина/ложь) | Связывает определенную функцию с событием, которое инициировано объектом. Функция автоматически вызывается при возникновении события. |
BehaviorUrns-Collection | Отсутствуют | См. описание | Возвращает набор строк URN, определяющих компоненты поведения, примененные к элементу. |
DetachEvent-Method | Событие, подлежащее отсоединению | Отсутствуют | Разрывает связь между событием и процедурой его обработки. Автоматический вызов функции отменяется. |
RemoveBehavior-Method | Значение, возвра-щенное методом attachEvent-Method | Выполнена ли функция (истина/ложь) | Отсоединение компонента пове-дения от элемента |
ScopeName-Property | Отсутствуют | См. описание | Возвращает пространство имен для элемента. Для стандартного элемента HTML возвращает значение “HTML”. |
SrcUrn-Property | Отсутствуют | См. описание | Возвращает URN для компонента поведения, инициировавшего событие. |
tagUrn-Propery | Отсутствуют | См. описание | Доступное только для чтения значение: URN для новых тегов и 0 для стандартных HTML тегов. |
urns-Method | Строка, задающая URN компонента. | См. описание | Возвращает набор элементов, к которым применен конкретный компонент поведения. Используется URN компонента. |
Компоненты поведения DHTML и безопасность
На уровне броузера происходит проверка тех типов объектов, которые загружаются из какого-либо Web-сайта. При этом к компонентам поведения применяются те же правила, что и к целой странице, использующей этот компонент. На уровне домена требуется, чтобы компонент поведения загружался из того же домена, что и сама страница, которая его использует. К примеру, если страница расположена по адресу: http:\\myserver, и в ней задействован компонент из http:\\yourserver, то появится сообщение об ошибке «Access denied» («Доступ запрещен»). Помимо этого, страница и компонент должны использовать один и тот же протокол, в противном случае появится такое же сообщение об ошибке «Access denied».
Встроенные компоненты DHTML в IE 5
В версии IE 5 имеется несколько встроенных компонентов поведения DHTML.
Таблица 3.1. Встроенные компоненты поведения в IE 5
Компонент поведения | Назначение |
Anchor | Позволяет броузеру отображать на сервере файлы и папки в виде системы папок. Этот компонент работает совместно с компонентом httpFolder |
Anim | Использует DirectAnimation® для отображения объектов DirectAnimation и звуковых объектов в броузере на основе технологии Liquid Motions компании Microsoft (Imlib. dll). |
Animation | Отображает элементы синхронной анимации на Web-странице. |
Audio | Отвечает за синхронное звучание аудио элемента на Web-странице. |
clientCaps | Сообщает информацию о возможностях клиентского броузера и о конфигурации, в которой он работает. |
Download | Загружает файл из того домена, где расположена вызывающая страница. Передает данные заданной в параметрах функции обратного вызова после завершения. |
Homepage | Передает информацию о домашней странице пользователю. |
httpFolder | Отображает Web-сайт как набор файлов и папок. |
Img | Отображает синхронизированный элемент изображения на Web-страницу. |
Media | Отображает элемент мультмедиа на Web-страницу. |
Par | Определяет контейнер, для элементов которого можно задать независимую временную последовательность их отображения на Web-странице. |
saveFavourite | Сохраняет ссылку на текущую страницу в папке Избранное. Ссылка будет существовать и при следующих сеансах работы с броузером. |
saveHistory | Сохраняет текущее состояние страницы в списке посещенных ранее страниц течение сеанса связи (пока функционирует броузер). |
saveSnapshot | Сохраняет информацию, содержащуюся на странице, в виде файла HTML. |
Seq | Определяет контейнер, элементы которого отображаются на Web-странице в той последовательности, как они в нем определены, с заданной задержкой во времени (последовательная временная последовательность). |
Time | Определяет временную последовательность для отображения элементов Web-страницы. |
userData | Сохраняет данные в области данных пользователя (UserData). |
Video | Отвечает за синхронное отображение видео элемента на Web-странице. |
Встроенный компонент clientCaps
Он предоставляет информацию о программных и аппаратных средствах клиентского компьютера, на котором в данный момент выполняется IE 5. clientCaps также сообщает, какие из компонентов IE 5 установлены, а при необходимости загружает и инсталлирует недостающие. Одно из наиболее полезных свойств clientCaps – распознавание высоты и ширины экрана. Фактически это свойство предоставляет две различные возможности: распознавание высоты и ширины экрана (height/width) и распознавание доступной области экрана (availHeight/availWidth). Обладая этой информацией, Вы можете запрограммировать Web-страницу таким образом, чтобы её размер устанавливался в зависимости от размера экрана пользователя.
Пример 3.1. client_capabilities. htm
Для использования clientCaps Вам необходимо в первую очередь создать компонент поведения на HTML странице для того, чтобы на странице существовала ссылка на этот компонент. В нашем примере используется пространство имен XML для создания уникального элемента XML внутри тега <html>:
<html XMLNS:CC>
Пространству имен было задано имя СС. Затем пространство имен используется для создания элемента XML, который далее используется для создания реализации компонента поведения clientCaps. В нашем примере для присоединения компонента clientCaps к некоторому элементу страницы используется каскадная таблица стилей:
@media all { CC\:clientCaps {behavior:url(#default#clientCaps)}}
@media all – это правило CSS, указывающее, что данная таблица стилей применяется при отображении страницы на любых носителях (например, на экране монитора, при выводе на печать и т. п.). СС\: clientCaps – это пространство имен вместе с именем элемента XML, используемого на странице. Символ обратной косой черты (\) перед двоеточием (:) необходим для того, чтобы при обработки страницы браузером заданное пространство имен не было воспринято как пара атрибут:значение, применяемая для задания свойств элементов в каскадных таблицах стилей (CSS). Поэтому всякий раз, когда элемент XML используется на этой странице, ему присваивается следующая таблица стилей:
behavior:url(#default#clientCaps)
Фактически здесь к элементу XML СС:\ clientCaps присоединяется компонент поведения clientCaps.
Компонент поведения clientCaps подключается к странице после тега <body> путем добавления следующего элемента XML к странице:
<CC:clientCaps id=clientCaps />
Теперь страница может обращаться к компоненту поведения clientCaps через заданный атрибут ID.
После загрузки документа HTML вызывается функция getClientCaps(), определенная в обработчике события onload тега <body>. Эта функция создает первые четыре части страницы. Каждая часть обращается к navigateFrame свойствам компонента поведения clientCaps, которые отображаются на странице. Например, для определения текущей ширины экрана вызывается следующее свойство:
clientCaps. availHeight
сlientCaps – это идентификатор компонента поведения clientCaps, а availHeight – это свойство компонента.
Чтобы проследить работу метода, рассмотрим, как функция displayComponent() проверяет, установлен ли данный компонент IE 5. Функция displayComponent() вызывается из функции showComponentStatus() для каждого компонента, который мог быть установлен вместе с установкой IE 5, и проверяет его наличие следующим образом:
if (clientCaps. isComponentInstalled(compID, "componentID"))
isComponentInstalled использует GUID ( globally unique ID - глобальный однозначный идентификатор) данного компонента для проверки его наличия на клиентском компьютере. Если компонент установлен, то номер версии этого установленного компонента получается следующим образом:
clientCaps. getComponentVersion(compID, "componentID")
Если компонент не установлен, вызывается функция addComponent(). Она позволяет пользователю загрузить и установить требуемый компонент IE 5 на свой компьютер.
Встроенный компонент download
Легко догадаться о назначении компонента download по его названию – он используется для загрузки файлов из броузера. Это означает, что страницу не требуется перезагружать с сервера. Однако, существует некоторое ограничение на типы файлов, которые можно загружать таким образом: компонент download загружает лишь текстовые файлы. При попытке загрузить файл другого типа загружается лишь тип его формата, но не фактическое содержание. Еще одно ограничение касается домена, откуда загружается файл: компонент download не может загрузить файл, если он не находится в том же домене, что и страница, на которой действует данный компонент. Только один метод – startDownload – поддерживается компонентом поведения download. Этот метод используется для того, чтобы начать загрузку, и вызывает функцию сценария по завершении загрузки.
Этот компонент очень удобен в том случае, если требуется пересылка большого количества текста на какую-либо страницу с сервера – при этом не требуется постоянно обновлять всю страницу. К примеру, если на странице имеется раскрывающийся список, и его содержимое зависит от выбора одного из двух состояний переключателя, то некоторый сценарий может вызвать метод startDownload компонента download для загрузки содержимого раскрывающегося списка. В следующем разделе мы рассмотрим подробно, как это делается.
Пример действия компонента download
Создадим страницу с набором переключателей и раскрывающимся списком (тег <select>). Выбор переключателя Cities (Города) и нажатие кнопки View Values приводит к загрузке содержимого раскрывающегося списка из файла cities. txt. Выбор переключателя States и нажатие кнопки View Values, соответственно, приводит к загрузке содержимого раскрывающегося списка из файла states. txt. При этом не происходит повторной загрузки с сервера всей страницы – загружается лишь информация из файлов cities. txt и states. txt. Код данного сценария следующий:
Листинг 3.1.sitiesstates. htm
Cтрока после тега <body> в листинге
создает ссылку на компонент download.
Элемент IE создается как пространство имен XML в первой строке файла.
Обращение к компоненту download в сценарии осуществляется с помощью идентификатора objDownload. Обработчик события onclick переключателя btnSelectValues вызывает функцию getValues(). Эта функция определяет, какой файл следует загрузить (cities. txt или states. txt), затем она же вызывает метод startDownload компонента download.
Параметр sFileName – это тот файл, который мы хотим загрузить, а параметр onDownloadDone определяет ту функцию, которую следует вызвать по завершении загрузки. Результатом выполнения этой функции является загрузка тега <select>, содержащего информацию из указанного файла. В нашем примере файл использует символ | для разделения данных, но вообще формат файла может быть любым – это может быть даже файл XML – при условии, что страница, которой он адресован, в состоянии обработать используемый синтаксис.
Встроенные компоненты anchor и httpFolder
Web-папки (Web Folders) представляют собой новый способ отображения и манипулирования файлами и папками в IE 5. В Web-папке структура папок и файлов отображается таким же образом, как на правой панели в Проводнике Windows.
В IE 5 имеются два встроенных компонента поведения, в которых реализована технология Web-папкок: это компоненты anchor и httpFolder. Их функциональное назначение одинаково, но реализации использования Web-папок несколько различаются. Компонент anchor для отображения Web-папки использует тег <A>, а компонент httpFolder применяется, когда Вы хотите отобразить Web-папку с использованием языка сценариев.
Пример anchor. htm
Пример действия компонента anchor
Сначала мы рассмотрим, как Web-папки реализованы с помощью компонента поведения anchor, а затем обсудим, каким образом их можно использовать в сценариях. Компонент anchor присоединяется к элементу <A HREF> при помощи правила таблицы стилей
A {behavior: url(#default#AnchorClick);}
ПРИМЕЧАНИЕ
Эта таблица стилей предполагает, что компонент поведения anchor присоединен ко всем тегам <A> на странице. Если бы на странице имелись другие теги <A>, то они не могли бы не использовать этот компонент.
Обратите внимание, что тег <A HREF> содержит некоторые новые атрибуты, которые используются компонентом anchor:
<A HREF = http://localhost:8080/ FOLDER = http://localhost:8080/
TARGET = "self">
Когда пользователь щелкает на якоре, то открывается папка Web-сайта, определенная в атрибуте folder. Компонент поведения использует атрибут target для определения окна, в котором будет отображена Web-папка. Значениями этого атрибута могут быть “self”, “top” или имя существующего окна или фрейма. Значение “self” соответствует расположению Web-папки в текущем окне; значение “top” – в специально созданном новом окне. Если в качестве значения задается имя уже существующего окна, то в нем и отображается Web-папка. Если имя указано неверно (т. е. не существует окна с таким именем), то создается новое окно с указанным именем.
Пример действия компонента httpFolder
Для использования компонента поведения httpFolder в теге <HTML> создается пространство имен XML и к странице добавляется ссылка с помощью элемента XML.
При нажатии кнопки на странице ее обработчик события onclick вызывает функцию gotoFolder().
В зависимости от пункта, выбранного из раскрывающегося списка selWindowType, эта функция определяет, в каком окне следует отображать Web-папку. Если ее нужно отобразить в исходном окне, выполняется метод navigate компонента поведения httpFolder, параметром которого является адрес Web-папки.
Метод navigate компонента поведения httpFolder отображает Web-папку в текущем окне. Если надо отобразить Web-каталог в новом окне, то следует использовать метод navigateFrame компонента httpFolder, передавая ему в качестве параметров имя отображаемого Web-каталога и имя фрейма, в котором каталог будет отображаться. Параметр “top”, приведенный в нашем примере, указывает на то, что данная Web-папка должна быть отображена в новом окне браузера.
ПРИМЕЧАНИЕ
Вторым параметром метода navigateFrame может также являться другой фрейм на той же странице, или новая страница.
Web-папки: технические требования и условия обеспечения безопасности
Для использования Web-папок (Web Folders) на сервере должен быть установлен пакет FrontPage Extensions (версии 97, 98 или 2000), или же сервер должен поддерживать новый протокол WebDAV (Distributed Authoring and Versioning – поддержка распределенной групповой работы и авторизации документов). WebDAV представляет собой набор расширений HTTP 1.1, которые позволяют пользователю работать с совместно используемыми документами через Web так же, как если бы эти документы располагались на локальном жестком диске. Для работы с Web-папками требуется наличие разрешения Автора (каталога) и соответствующих полномочий программы-клиента для доступа к каталогу. Если разработчик Web-сайта желает, чтобы клиент просматривал его с помощью технологии Web-папок, используя IIS (Microsoft’s Internet Information Server – Информационный сервер компании Microsoft), следует установить серверные расширения пакета FrontPage для IIS и задать разрешение Execute (Execute permission) для всего сайта. Эти два шага необходимо сделать для каждого Web-сайта, для которого необходимо разрешить использование технологии Web-папок при просмотре клиентом его содержимого.
На Web-сайтах, разрешающих использование технологии Web-папок, должны соблюдаться более жесткие требования безопасности. Необходимость принятия мер по усилению безопасности объясняется тем, что пользователь имеет возможность просматривать и изменять содержащуюся на сайте информацию, если на нем разрешено использование технологии Web-папок.
Встроенные компоненты, отвечающие за хранение информации
В IE 5 предусмотрены четыре встроенных компонента поведения, отвечающих за хранение информации на клиентском компьютере: saveFavorite, saveHistory, saveSnapshot и userData. В табл. 3.2 указано, в каком случае данные сохраняются и в течение какого времени они доступны.
Таблица 3.2. Встроенные компоненты DHTML в IE 5 для хранения информации
Компонент поведения | В каком случае используется | Когда сохраненные данные доступны | Длительность хранения данных |
SaveHistory | При переходе на другую страницу | При возвращении на страницу с помощью клавиш Вперед и Назад. | В течении одного сеанса |
SaveFavorite | При сохранении страницы в папке Избранное | При выборе данной страницы из папки Избранное или через сокращенную клавиатурная команду | Пока не будет удалена папка Избранное |
SaveSnapshot | При сохранении страницы на диске в виде файла HTML | При просмотре сохраненной страницы | Пока файл не удален |
UserData | При обращении сценария к методам сохранения | При обращении сценария к методу загрузки | Определяется разработчиком |
Для первых трех компонентов (saveFavorite, saveHistory, saveSnapshot) не требуется кода сценария для сохранения данных, хотя эти компоненты обладают свойствами и методами, к которым можно обращаться и из сценария. Последний компонент, userData, для сохранения информации использует код сценария.
Примеры действия компонентов homePage, saveHistory и saveFavorite.
Существует еще один встроенный компонент, функция которого – хранение определенного типа данных. Этот компонент – homePage – хранит информацию о настройках домашней страницы пользователя. Методы компонента homePage обеспечивают возможность задавать домашнюю страницу пользователя, переходить на эту страницу с других и проверять, является ли данная страница домашней. Для работы компонента homePage требуется использование кода сценария.
На рис. 3.4 представлена Web-страница, на которой задействованы рассматриваемые компоненты поведения: homePage, saveHistory и saveFavorite. Страница разделена на три части: в верхней части показаны возможности компонента homePage; поле ввода посередине отведено для ввода информации, которая будет сохранена при переходе на другую страницу при помощи компонента saveHistory (но только в течение одного сеанса связи); и, наконец, нижняя часть страницы содержит текстовое поле, в которое вводится информация, подлежащая хранению в папке Избранное – здесь используется компонент saveFavorite.
Функциональные возможности компонента homePage таковы: он проверяет, является ли данный URL адресом домашней страницы пользователя, переходит на эту страницу с других страниц и устанавливает новую домашнюю страницу по выбору пользователя. Компонент saveHistory сохраняет введенные пользователем в текстовом поле данные при переходе на другую страницу.
Рис. 3.4
Когда пользователь возвращается к данной странице при помощи клавиш Вперед и Назад, в текстовом поле отображаются сохраненные данные. На первый взгляд, действие этого компонента не отличается от обычного кэширования с помощью броузера. Допустим, пользователь отобразил страницу с формой, заполнил ее поля, а потом начал просматривать другие страницы. Он может вернуться к странице с формой с помощью кнопки Назад, причем данные, введенные в поля формы, останутся без изменения. Чтобы увидеть, в чём отличие использования компонента saveHistory, Вам нужно только лишь обновить страницу. Вы увидите, что данные не просто были кэшированы: они были реально сохранены и остались частью страницы, даже после перезагрузки страницы с сервера.
Компонент saveHistory сохраняет введенные в текстовом поле данные в том случае, если пользователь сохраняет данную страницу в папке Избранное. Когда пользователь загружает ее вновь, выбрав из этой папки, то сохраненные данные будут отображены вместе со страницей.
В следующем листинге приводятся примеры использования этих трех компонентов:
Пример homeandpersist. htm
Первый компонент, который мы рассмотрели – это компонент homePage. Поскольку для того, чтобы его методы стали доступными, требуется ссылка на его идентификатор в коде сценария, этот компонент объявляется на странице посредством пространства имен XML под названием HP. Тег <HTML> объявляет пространство имен.
После тега <body> в листинге пространство имен HP используется для присоединения компонента homePage через атрибут style.
Для ссылки на данный компонент в коде сценария будет использоваться идентификатор objHomePage.
На рассматриваемой в нашем примере странице расположены три кнопки для обращения к функциям, вызывающим методы компонента homePage. Кнопка с надписью Is Home Page вызывает функцию isHomePage(). Эта функция использует метод isHomePage компонента для проверки, является ли введенная в текстовое поле строка адресом домашней страницы. Существует некоторое ограничение на область применения этого метода: для того, чтобы метод правильно сработал и определил, является ли данный URL адресом домашней страницы пользователя, последний в момент запроса должен находится в том же домене, что и его домашняя страница. Например, если домашняя страница пользователя www. , а пользователь находится на странице www. и вводит адрес www. , то метод возвратит значение «ложь». Возвращенное значение «истина» появится лишь в том случае, если пользователь в момент запроса будет находится на сайте Yahoo!.
При нажатии на кнопку с надписью Display Home Page вызывается функция displayHomePage(). Эта функция, в свою очередь, вызывает метод displayHomePage компонента homePage для перехода на страницу, которая на данный момент является домашней. Нажатие на последнюю кнопку с надписью Set New Home Page вызывает функцию setHomePage(). Она устанавливает новую домашнюю страницу пользователя согласно тому адресу, который был введен в текстовое поле, при помощи метода setHomePage компонента homePage. Компоненты saveFavorite и saveHistory объявляются аналогично, с использованием таблиц стилей.
Стили включаются в тег <input> при помощи атрибута class.
Теги <meta> в верхней части страницы HTML сообщают броузеру IE 5, каким образом сохранять данные. В случае компонента saveHistory используется следующий тег <meta> для сохранения данных в требуемом формате history.
Этот тег сообщает броузеру IE 5, что, если для каких-либо тегов на странице используется компонент saveHistory, то их содержимое следует сохранять в указанном формате. Тег <meta> для компонента saveFavorite выглядит аналогично.
Этот тег сообщает броузеру IE 5, что все данные компонента saveFavorite следует сохранять как данные формата favorite.
Пример действия компонента saveSnapshot
Встроенный компонент поведения saveSnapshot используется для сохранения страницы в виде файла HTML. Типы данных, которые могут быть сохранены с его помощью, — стили, значения, переменные сценария и динамическое содержание. Однако при помощи этого компонента невозможно сохранять тело и индивидуальные элементы таблиц. Могут быть сохранены следующие типы данных сценария: занчения строковых, булевых и целочисленных переменных.
Пример saveSnapshot. htm
Таким образом, применение компонента saveSnapshot аналогично применению компонентов saveHistory и saveFavorite. Здесь тоже задействован тег <meta>.
Этот тег сообщает броузеру о том, что он должен сохранять данные каждого тега, в который включен компонент saveSnapshot. В приведенном листинге это осуществляется посредством таблицы стилей и атрибута class в теге того элемента, который требуется сохранить. Для фактического сохранения данных пользователь должен сохранить страницу как файл HTML посредством команды Сохранить как из меню Файл. Если страница сохранена таким образом, её можно при необходимости восстановить в броузере, используя команду Открыть из меню Файл. Открытый таким образом файл будет содержать ту же информацию, которая была на странице, и будут восстановлены значения всех переменных. Хотя действие этого компонента похоже на действие компонентов saveHistory и saveFavorite, фактическая реализация сильно отличается, поскольку в действительности сохраненная страница несколько изменится. Она будет содержать в исходном коде сохраненные значения в кодах используемого процессора.
Встроенный компонент userData
С точки зрения разработчика, встроенным компонентам поведения saveHistory, saveFavorite и saveSnapshot присущи определенные недостатки. А именно, компонент поведения saveHistory может хранить данные лишь на протяжении одного сеанса связи; при отключении броузера данные теряются. Использование компонента saveFavorite подразумевает необходимость сохранения документа в папке Избранное. Наконец, компонент saveSnapshot сохраняет страницу в виде файла на диске в компьютере пользователя – таким образом, при обновлении страницы сохраненные данные не отображаются. Компонент userData лишен этих недостатков – он дает разработчику больше возможностей и позволяет выбирать, каким образом и на какое время сохранять данные.
Этот компонент использует код сценария для сохранения данных. Данные сохраняются в области UserData на клиентском компьютере (см. табл. 3.3). (Заметим, что папка Internet Temporary Files здесь не используется). Сохранять и загружать сохраненные файлы при помощи этого компонента еще проще, чем при использовании cookies.
Область UserData может содержать до 64К информации на страницу и до 640К на домен. Конкретное местоположение этой области зависит от используемой ОС и представлено в табл. 3.3.
Таблица 3.3. Местоположение папки UserData
Операционная система | Местоположение UserData |
NT | Winnt\Profiles\Administrator\Application Data\Internet Explorer\UserData Здесь Winnt – это папка NT, Administrator – пользователь, работающий в данный момент с системой |
Windows 95 и 98 | Windows\Application Data\Microsoft\Internet Explorer\ UserData Здесь Windows – это основной каталог операционной системы Windows |
В папке UserData имеется индексный файл index. dat, в котором отслеживаются изменения в этой области памяти. Все остальные файлы в этой папке являются файлами XML. При двойном щелчке мышью на любом из них откроется окно IE 5 и отобразится указанный файл в виде структуры XML. Позже мы рассмотрим соответствующий пример. Информация, сохраненная таким образом, доступна и по окончании сеанса связи.
Пример действия компонента UserData
Этот пример показывает, каким образом при использовании компонента UserData данные сохраняются в области UserData. Это делается при помощи кода сценария, а не путем включения компонента поведения в индивидуальный тег, содержимое которого должно быть сохранено. На Web-странице, использующая компонент поведения UserData, две кнопки, расположенные внизу страницы, предоставляют пользователю возможность сохранить данные со страницы в область UserData (Save Data – сохранить данные) либо, наоборот, выгрузить из этой области данные на страницу (Load data – выгрузить данные).
Пример userdata. htm
Компонент UserData объявляется при помощи пространства имен XML; его идентификатором является objUserData.
В данном случае компонент UserData не присоединен к тегам <input> и <select> , хотя, вообще говоря, он может быть присоединен к ним. Данные на странице сохраняются, если пользователь нажимает кнопку Save Data. Когда это событие происходит, вызывается функция SaveData(), которая использует параметры и методы компонента UserData для сохранения данных. В первую очередь эта функция определяет переменную для объекта UserData.
Переменная objUD используется далее функцией SaveData() для ссылок на объект UserData, чтобы не приходилось каждый раз указывать полное имя компонента. Затем вызывается метод setAttributes компонента UserData.
Этот метод помещает имя и соответствующее значение в область UserData. В нашем примере данные из текстового окна сохраняются в области UserData с использованием имени тега <input>, определяемом атрибутом ID. Для фактического сохранения данных в папке UserData требуется вызвать метод save().
Метод использует в качестве параметра имя области UserData, в которой должны быть сохранены данные. Это имя создается в папке области UserData. Метод save компонента userData следует вызывать после того, как данные помещены в область UserData при помощи метода setAttributes. Отметим, что таким образом мы можем сохранить данные любого типа, в том числе содержимое тега <select>.
Для того, чтобы загрузить данные обратно на страницу, необходимо обеспечить возможность доступа к сохраненной области UserData. В нашем примере она имеет имя userdataDemo, и доступ к ней осуществляется посредством вызова метода load компонента поведения UserData.
Здесь objUD – это ссылка на идентификатор компонента UserData. Затем для получения данных вызывается метод getAttribute.
Здесь метод getAttribute компонента поведения UserData вызывается для получения данных. Идентификатор текстового окна используется для определения того, какой именно фрагмент данных требуется найти в области UserData. Затем найденные данные располагаются в текстовом окне.
Заглянув в папку UserData, Вы найдете там файл XML с названием userDataDemo. xml. В нем как раз и содержатся сохраненные данные.
Встроенные компоненты, отвечающие за работу мультимедиа
В IE 5 имеется шесть встроенных компонентов поведения, предназначенных для работы с мультимедиа (см. табл. 3.1). Преимущество их использования заключается в возможности обеспечения значительной интерактивности страниц без необходимости частого обращения к серверу. Помимо того, не требуется использование дополнительных мультимедийных модулей (plug-ins), а также возможно экономичное в отношении объема сценария создание мультимедийных документов. Все эти компоненты характеризуются одним важным общим свойством: наличием доступа к новой функциональной возможности IE 5 под названием HTML+TIME (Timed Interactive Multimedia Extensions).
Временная последовательность HTML+TIME
Функция HTML+TIME заключается в том, что броузер получает возможность создать определенную временную последовательность для синхронизации тегов HTML. Иными словами, задается последовательность во времени отображения на странице различных элементов HTML. Эта особенность IE 5 основана на SMIL (Synchronized Multimedia Integration Language) 1.0 Recommendation. Компания Microsoft представила свою реализацию этой технологии на рассмотрение Консорциуму W3C. Для создания временной последовательности используются три компонента поведения: time, par и seq.
Пример использования средств мультимедиа и HTML+TIME
В этом разделе мы продемонстрируем использование компонента поведения anim и компонента time из HTML+TIME. Рассмотрим 2 примера: две вращающиеся звездочки и последовательно заменяющие друг друга пять слайдов с подписями. Вращающиеся звездочки представляют собой два файла GIF, анимированные при помощи компонента anim. Второе изображение было создано без написания специального кода сценария, с использованием только лишь компонента time для замены слайдов. Каждый слайд появляется вместе со своей подписью на 4 секунды, затем его сменяет следующий. Это осуществляется при помощи настройки параметра seq временной последовательности. Этот параметр является значением атрибута timeline компонента time (не перепутайте со встроенным компонентом поведения seq).
Пример HTMLANIM. htm
Рассмотрим сначала пример со звездочками. На странице при помощи пространства имен XML создаются два компонента anim.
Нам необходимы два компонента anim, поскольку требуется анимировать два файла GIF. Одно изображение будет вращаться по часовой стрелке, а другое – в обратную сторону.
В теге <body> обработчик события onload вызывает функцию startPage(). Она преобразует каждый GIF файл в объект DirectAnimation, и задает вращение объектов в противоположных направлениях. Если Вам нужна подробная информация о работе DirectAnimation, Вы можете заглянуть на Web-сайт компании Microsoft.
При последовательном отображении слайдов (второй пример) задействованы два тега <span>. В них содержатся сами слайды и подписи к ним. К каждому из тегов <span> подключен компонент поведения time.
Все теги HTML, расположенные между открывающим тегом <span> и закрывающим тегом </span>, используются для создания временной последовательности. Каждый из тегов <span> содержит атрибут t:timeline = “seq”. Этот атрибут определяет в какой последовательности отображаются теги во времени. Символ t – это встроенная ссылка IE 5 для компонента time. В нашем случае все теги отображаются в той последовательности, как они определены внутри тега <span> (значение параметра t:timeline равно seq). Внутри тега <span> все элементы HTML имеют атрибут t:DUR=“4”.
Этот атрибут используется компонентом для задания длительности отображения каждого из элементов. В нашем примере для четырех элементов длительность отображения составляет 4 секунды, по истечении которых появляется новое изображение. Последний тег <image> в этой последовательности не содержит атрибута DUR и остается на странице, пока она не будет закрыта, либо отображение слайдов не будет запущено вновь. При нажатии кнопки Restart, расположенной под слайдом, вызывается функция restartShow(), заданная в обработчике события onclick кнопки. Она, в свою очередь, вызывает метод beginElement для каждого компонента поведения. Таким образом происходит повторный запуск последовательности отображения слайдов.
