Автор: Роман Панышев (irrona)


Практика использования Custom Tags


      Терминология
      Немного истории
      Создание Custom Tag
      Импорт Custom Tag
      Безопасность
      На закуску

Терминология

      В данной статье Вы можете столкнуться со следующей терминологией:

Behavior Объект-"поведение"
Attached Behavior DHTML-"поведение", которое асинхронно привязывается к стандартным HTML-элементам. Привязка осуществляется с помощью использования CSS-атрибута behavior или с помощью скриптового метода addBehavior
Element Behavior Технология, позволяющая синхронно привязывать DHTML-"поведения" к пользовательским элементам (Custom Elements). Последние после привязки можно использовать как стандартные элементы страницы. Причем "поведение" привязанное к элементу удалить невозможно.
ViewLink Реализация Element Behaviors, позволяющая отображать содержимое HTC-файла на HTML-странице.
Главный документ HTML-страница, с которой в данный момент времени работает пользователь.
Фрагмент Инкапсулированное в HTC-файле объектное дерево документа. Фрагмент отображается на HTML-странице, используя ViewLink.
Custom Tag Определенный разработчиком элемент. Для использования на HTML-странице нужно использовать Namespace-декларацию.
Namespace Коллекция имен, используемых пользовательским элементом, или атрибутов. Namespace используются для уникальной идентификации элементов.

Немного истории

      Element Behaviors - одна из самых замечательных разработок программистов из Microsoft, воплощенная в версии 5.5 Internet Explorer. Эта технология обеспечивает возможность создания пользовательских тэгов (пользовательских элементов) HTML-страницы. Эти элементы рразрабатываются с помощью скриптовых языков, либо с помощью стандартного языка программирования (Visual Basic, C++). Они могут включать в себя стандартные тэги HTML. Так как компоненты находятся во внешних файлах с расширением *.htc, то их удобно распространять для использования другими разработчиками в своих WEB-проектах.

      Технология DHTML Behaviors была впервые представлена в Microsoft Internet Explorer версии 5 и дала возможность изменять поведение стандартных HTML-элементов установкой атрибута behavior в каскадных таблицах стилей (CSS) или используя метод addBehavior в скрипте HTML-страницы. В том виде, как behavior были представлены в версии 5 Internet Explorer, их теперь называют Attached Behaviors. Это позволяет отделить их от Element Behaviors, описываемых в этой статье. Дело в том, что Element Behaviors имеют совершенно другой механизм привязки к HTML-странице и некоторые другие отличительные характеристики. Про Attached Behaviors Вы можете ознакомиться в предыдущей моей статье Практика использования DHTML Behaviors.

      Attached Behaviors используются для выполнения как обычных rollover-эффектов, так и для создания полностью интерактивных элементов HTML-страницы. После помещения такого элемента на страницу, он синхронно привязывается к пользовательскому элементу и встраивается в объектную модель браузера. После этого с таким (пользовательским) элементом можно работать как с любым стандартным элементом HTML-страницы, применяя к нему стили, используя в скриптах и т.д.

      Если провести аналогию с построением пользовательских элементов с расширением *.ocx, то элементы, построенные на основе стандартных элементов и расширяющие их функциональность, - это Attached Behaviors, а элементы, основанные на стандартных элементах и использующие свой набор свойств и по-своему реагирующие на действия пользователя - это Element Behaviors.

      Одной из особенностей Element Behaviors является т.н. ViewLink, которые позволяют инкапсулировать объектное дерево документа в HTC-файле, отделяя его от содержимого HTML-страницы. Это открывает новые просторы для WEB-разработчиков проявить свои таланты в области построения компонентов для WEB.

Создание Custom Tag

      Следующие шаги схематически описывают шаги по созданию пользовательских элементов для использования на HTML-странице:

      Создание behavior в HTC-файле сходно созданию Attached Behaviors, описанному в моей предыдущей статье. Главное отличие состоит в импорте элемента в главный документ. При использовании Attached Behaviors мы применяли CSS-атрибут behavior для подключения behavior к элементу HTML-страницы. Напротив, привязка Element Behaviors осуществляется при создании пользовательского элемента. Код HTC-файла кроме стандартных объявлений методов,свойств и событий элемента, может содержать также стандартные HTML-тэги. Желательно, чтобы тэг SCRIPT использовался сразу после объявления публичных атрибутов элемента PUBLIC:COMPONENT. Также необходимо, чтобы скриптовый блок находился перед блоком BODY (если таковой имеется), либо внутри него.

Импорт Custom Tag

      Для подключения Custom Tag к HTML-странице необходимо проделать несколько простых операций. Сначала HTML-документ декларирует NAMESPACE для того, чтобы убедиться в том, что Custom Tag является уникальным в пределах страницы. Приведенное ниже описание HTML-элемента декларирует NAMESPACE с названием games, с использованием атрибута XMLNS. Использование данного атрибута разрешает использование Custom Tag с именем games в пределах главного документа.

<HTML XMLNS:games>

      Далее мы должны импортировать Custom Tag в NAMESPACE. Ниже показано как NAMESPACE с именем games импортирует реализацию (implementation) элемента, находящуюся в файле "checkers.htc".

<?IMPORT namespace="games" implementation="checkers.htc" >

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

      После импорта элемента в главный документ, мы должны опеределить его местонахождение на странице в секции BODY. Custom Tag объявляется также, как любой другой элемент (тэг) страницы. Единственное отличие состоит в том, что при указании имени элемента необходимо также использовать имя его NAMESPACE в качестве префикса.

      Так:

<games:checkers></games:checkers>

      Или так:

<games:checkers />

      В целом на главном документе это должно выглядеть следующим образом:

<HTML xmlns:games>
<?IMPORT namespace="games" implementation="checkers.htc" >
<BODY>
<games:checkers />
</BODY>
</HTML>

Безопасность

      В случае, если behavior расположен в HTC-файле, то,с точки зрения браузера, он является частью главного документа и загружается автоматически при загрузке страницы. Поэтому в данном случае нет необходимости в настройке прав доступа к пользовательскому элементу. Единственное ограничение состоит в том, что HTC-файл должен быть расположен в одном домене с главным документом. Иначе, при попытке использовать HTC-файл, Вы получите ошибку "Access Denied".

      Если же Вы создали пользовательский behavior, используя например Visual C++ (такого рода элементы носят еще название Binary Behaviors), то браузером они воспринимаются как ActiveX компоненты и, соответственно, требуют определенных прав доступа для загрузки их по сети и дальнейшего использования.

На закуску

      Напоследок предлагаю Вам скачать разработанный мною пользовательский элемент "DatePicker", показывающий основные приемы создания Custom Tag. Думаю, прочитав изложенный выше материал, Вы сможете сами разобраться в том, как он работает. Нажмите ссылку ниже, чтобы посмотреть его в действии:

Показать пример (Только для IE 5+)

      При желании можете доработать его под свои нужды и использовать в своих WEB-проектах. Если при этом разместите информацию об авторе, я против не буду ;-)

      На сайте Microsoft можно найти еще массу примеров HTC-компонентов, которые можно свободно загрузить и использовать на свое усмотрение.

      В данной статье использованы материалы MSDN 2000.


© 2005 ironahot@idknet.com - при использовании статей просьба делать ссылку на автора