Элементы динамического HTML (DHTML) — это компоненты, которые могут быть реализованы несколькими способами. Многие годы при написании компонентов разработчики были ограничены использованием Microsoft Visual C++, Microsoft Visual Basic и Java.

Начиная с Microsoft Internet Explorer 5, разработчики скриптов могут использовать компонент HTML Component (HTC) или Windows Script Component (WSC) для реализации требуемого поведения DHTML в скрипте, используя Visual Basic Scripting Edition (VBScript), Microsoft JScript (совместимый со спецификацией языка ECMA 262) или любой язык скриптов независимого разработчика, поддерживающий интерфейсы скриптов Microsoft ActiveX Scripting.

В этой статье описываются шаги использования файлов HTC для создания динамического поведения в скрипте. Дополнительные сведения о создании динамического поведения с помощью WSC см. в статье Технологии скриптов в Microsoft Windows.

В этой статье предполагается, что читатель хорошо разбирается в программировании скриптов и знаком с поведением HTC и DHTML. Реализация динамического поведения в Visual C++ не рассматривается в данной статье. Дополнительные сведения о поведении DHTML, HTC, WSC и интерфейсах Visual C++, используемых в реализации динамического поведения, см. в разделе Связанные темы.

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

Эта статья разделяется на следующие разделы.

• Обзор HTC 
• Создание HTC 
• Предоставление свойств 
• Использование атрибута INTERNALNAME 
• Предоставление методов 
• Предоставление настраиваемых событий 
• Получение уведомлений 
• Правила области применения 
• Вопросы синхронизации 
• Связанные с поведением улучшения объектной модели DHTML 
• Связанные темы 

Обзор HTC

Появившиеся в Internet Explorer 5, компоненты HTCпредоставляют простой механизм реализации поведения DHTML в скрипте. Файл HTC — это такой же HTML-файл, сохраненный с расширением HTC и содержащий скрипты и набор специфических для HTC элементов, предоставляющих свойства, методы и события, определяющие компонент.

Будучи HTML-файлом, HTC предоставляет ко всем элементам на странице такой же доступ, как и DHTML. Это означает, что внутри HTC все элементы HTCдоступны из скрипта как объекты с помощью их атрибутов id. Это позволяет во всем сценарии динамически работать со всеми атрибутами и методами элементов HTC как со свойствами и методами этих объектов.

Компоненты HTC можно использовать для реализации следующих преимуществ:

• Предоставление свойств и методов. Эти свойства и методы определяются с помощью элементов PUBLIC:PROPERTY и PUBLIC:METHOD, соответственно. Дополнительные сведения о предоставлении свойств и методов см. в разделах Предоставление свойств и Предоставление методов.
• Предоставление настраиваемых событий. Эти события определяются с помощью элемента PUBLIC:EVENT и передаются обратно на содержащую страницу, используя метод fire элемента. Кроме того, метод createEventObject предоставляется, чтобы позволить компоненту HTC задать сведения о контексте события при передаче события. Дополнительные сведения о предоставлении событий см. в разделе Предоставление настраиваемых событий.
• Доступ к объектной модели DHTML содержащей страницы. Объект element в компонентах HTC возвращает элемент, с которым связывается поведение. С помощью этого объекта HTC может получить доступ к содержащему документу и его объектной модели (свойства, методы и события).
• Получение уведомлений. С помощью элемента ATTACH, браузер уведомляет HTC о стандартных событиях DHTML, а также о двух специфических для HTC событиях, oncontentready и ondocumentready.

Дополнительные сведения о каждом из элементов, свойств, методов HTC, описанных в этом разделе, см. в статье Справочник по HTC.

Создание HTC

Шаги по созданию HTC показаны в следующем примере, реализующем эффект выделения при наведении указателя мыши.

1. Создание структуры HTC-файла. Типичный HTC-файл состоит из блока script и необязательного заключающего блока COMPONENT. Он сохраняется с расширением HTC.

   <PUBLIC:COMPONENT>

     <SCRIPT>

     </SCRIPT>

   </PUBLIC:COMPONENT>

2. Для реализации поведения заполним кодом блок script.

   В следующем коде элемент ATTACH используется, чтобы настроить компонент HTC для получения уведомлений о событиях onmouseover и onmouseout, происходящих для элемента. Это позволяет компоненту HTCпереключать цвет элемента, чтобы получить желаемый эффект выделения при наведении указателя мыши на элемент.

   <PUBLIC:COMPONENT>

   <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />

   <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="Restore()" />

   <SCRIPT LANGUAGE="JScript">

      var normalColor, normalSpacing;

      function Hilite()

      {

        // сохранить исходные значения

        normalColor  = runtimeStyle.color;

        normalSpacing= runtimeStyle.letterSpacing;

        runtimeStyle.color  = "red";

        runtimeStyle.letterSpacing = 2;

      }

      function Restore()

      {

        // восстановить исходные значения

        runtimeStyle.color  = normalColor;

        runtimeStyle.letterSpacing = normalSpacing;

      }

   </SCRIPT>

   </PUBLIC:COMPONENT>

   Примечание. Как упоминалось в обзоре HTC, объект element возвращает элемент, с которым связано поведение, таким образом, предоставляя средство доступа к объектной модели элемента. Либо можно получить доступ к свойствам, методам и событиям, напрямую используя имя свойства, метода или события, без использования перед ним ключевого слова element. В предыдущем примере обратите внимание, как цвет был переключен с помощью прямой ссылки на свойство runtimeStyle, вместо использования element.runtimeStyle, что также является допустимым.

3. После своей реализации этот компонент HTC может использоваться на страницы для достижения нужного эффекта выделения при наведении указателя мыши.

   <HEAD>

   <STYLE>

      LI {behavior:url(hilite.htc)}

   </STYLE>

   </HEAD>

   <P>Указатель мыши над двумя элементами следующего списка для демонстрации этого эффекта.

   <UL>

     <LI>Разработка HTML</LI>

     <LI>Динамический HTML</LI>

   </UL>

   Пример кода. http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/hilite2.htm

Предоставление свойств

HTC может предоставлять свой набор свойств, используя элемент PROPERTY.

Например, предыдущий пример выделения при наведении указателя мыши может быть расширен, чтобы предоставить свойство hiliteColor, позволяющее задать цвет выделяемого текста. При этом можно использовать элемент PUBLIC:PROPERTY, чтобы определить свойство, как показано в следующем коде.

После определения свойства на него можно ссылаться в коде компонентов HTC, как показано в следующем примере. Обратите внимание, что этот код определяет значение свойства равным "red" (красный), если содержащая страница специально не задает это значение.

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

Пример кода. http://samples.msdn.microsoft.com/workshop/samples/components/htc/toc/toc2.htm

Примечание. Поведение элемента по умолчанию можно переопределить, предоставляя свойство, имя которого совпадает с именем свойства, уже определенного для элемента. Например, поведение, предоставляющее свойство href, может эффективно переопределять свойство по умолчанию href элемента a, если это поведение применяется к элементу a на странице.

Использование атрибута INTERNALNAME

При предоставлении свойства в HTC можно задать в элементе PUBLIC:PROPERTY как атрибут NAME, так и атрибут INTERNALNAME. Если заданы оба имени, NAMEиспользуется для ссылки на свойство из содержащего документа, а INTERNALNAME используется для ссылки на то же свойство в HTC.

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

Задание либо атрибута PUT, либо атрибута GET в объявлении PUBLIC:PROPERTY приводит к игнорированию атрибута INTERNALNAME, если атрибут INTERNALNAME задан. Задание и/или возвращение значения свойства с помощью функции (функций), заданной в атрибутах PUT и GET, обладает приоритетом над заданием и/или возвращением значения свойства с помощью INTERNALNAME.

Предоставление методов

С помощью элемента PUBLIC:METHOD компонент HTC может предоставить свой набор методов, как показано в следующем коде.

После своего определения метод может напрямую использоваться в коде HTC, как показано в следующем примере, реализующем эффект полета для групп текста на странице.

Пример кода. http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/CustomTags/CustomFlying.htm

Примечание. Аналогично элементу PUBLIC:PROPERTY, можно задать INTERNALNAME в объявлении METHOD, чтобы имя, используемое на содержащей странице для ссылки на метод, отличалось от имени, используемого для ссылки на метод в компоненте HTC. Кроме того, поведение элемента по умолчанию можно переопределить, предоставляя метод, имя которого совпадает с именем метода, уже определенного для элемента. Например, поведение, предоставляющее метод click, может эффективно переопределять метод по умолчанию click элемента a, если это поведение применяется к элементу a на странице.

Предоставление настраиваемых событий

С помощью элемента PUBLIC:EVENT компонент HTC может определить настраиваемые события и предоставить их содержащей странице.

В следующем коде показано, как калькулятор, реализующий компонент HTC, определяет настраиваемое событие — onResultChange, используя элемент EVENT. Когда событие происходит для содержащей страницы, результирующее значение передается обратно на страницу, устанавливая свойство expando — результат — объекта события.

Следующий пример показывает, как должна выглядеть содержащая страница.

Пример кода. http://samples.msdn.microsoft.com/workshop/samples/components/htc/calc/calc.htm

Примечание. Поведение элемента по умолчанию можно переопределить, предоставляя событие, имя которого совпадает с именем события, уже определенного для элемента. Например, поведение, предоставляющее событие onclick, может эффективно переопределять событие по умолчанию onclick элемента a, если это поведение применяется к элементу a на странице.

Получение уведомлений

HTC может подключить к событиям, происходящим на содержащей странице, используя элемент ATTACH. С помощью этого элемента HTC можно подключить к стандартным событиям DHTML, а также к специфическим для HTC событиям, перечисленным в статье Справочник по HTC.

Примечание. HTC также может использовать метод attachEvent, чтобы получать уведомления от содержащей страницы. Но при этом возникает ряд недостатков.

• Метод attachEvent позволяет подключаться только к стандартным событиям DHTML, но не к событиям, специфическим для HTC.
• HTC продолжает получать уведомления от содержащей страницы даже после того, как поведение отсоединено от элемента. Но, HTC может вызвать метод detachEvent, когда происходит событие ondetach. Если поведение связывается с событиями на странице с помощью элемента ATTACH, получение уведомлений автоматически прекращается при отсоединении поведения от элемента.

Правила области применения

При работе с компонентами HTC используются три пространства имен: поведения, элемента и содержащей страницы. Для компонентов определен набор правил области применения, помогающий определить порядок разрешения конфликтов имен. При этом используется следующий порядок приоритетов при разрешении конфликтов, от самого высокого к самому низкому:

• поведение;
• элемент, с которым связано поведение;
• объект window содержащего документа.

Это означает, что если компонент HTC определяет глобальную переменную, вызывающую событие, любая ссылка на событие в HTC будет разрешена как эта глобальная переменная. Правильный способ ссылки на свойство события объекта window в этом HTC — использовать конструкцию window.событие.

В следующем примере обратите внимание на разрешение имен с использованием приведенных выше правил области применения.

• attachEvent — разрешается в метод attachEvent элемента. Совпадает с вызовом element.attachEvent.
• normalColor — разрешается в глобальную переменную, определенную поведением вверху сценария.
• runtimeStyle — разрешается в метод runtimeStyle элемента.

Вопросы синхронизации

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

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

Примечание. По мере разбора и загрузки поведения и содержащего его документа поведение получает уведомления о выполнении с помощью уведомлений oncontentready и ondocumentready. Уведомление oncontentready приходит, когда контент элемента полностью разобран. В этот момент для возвращения правильного значения поведение может воспользоваться свойством innerHTML элемента. Уведомление ondocumentready приходит после полной загрузки документа, включая все скрипты, изображения, элементы управления ActiveX и все остальные файлы страницы, которые должны быть загружены отдельно.

Связанные с поведением улучшения объектной модели DHTML

Начиная с Internet Explorer 5, в объектную модель DHTML для поддержки поведения были внесены следующие улучшения.

• Введенный атрибут каскадных таблиц стилей (CSS) behavior применяет поведение к элементу.
• Методы attachEvent и detachEvent позволяют HTC получать уведомления о событиях от содержащей страницы и останавливать их получение, определяя функцию, вызываемую каждый раз, когда событие происходит для объекта.
• Свойство uniqueID позволяет HTC назначить элементу атрибут id. Это может быть полезно, когда компонент HTC вставляет код в содержащую страницу и должен указать id элемента, к которому применяется поведение.
• Методы addBehavior и removeBehavior предоставляют динамический способ подключения поведения к элементу и его отключения на странице без использования CSS.
• Коллекция behaviorUrns определяет URN всех поведений, в настоящее время связанных с элементом.
• Свойство srcUrn объекта event определяет URN поведения, вызывающего событие.
• Свойства scopeName и tagUrn вместе определяют пространство имен, определенное для элемента.
• Метод urns определяет все объекты, с которыми в настоящее время связано указанное поведение.

Связанные темы

Следующие ссылки содержат дополнительные сведения о поведении DHTML.

• Введение в поведение DHTML
• Использование поведения DHTML
• Реализация двоичного поведения DHTML
• Справочник по HTC
• Справочник по поведению DHTML для C++
• Технологии скриптов Microsoft Windows