DHTML-скриплет - просто о простом

Евгений Койнов

Введение

В 1997 году, с появлением Internet Explorer 4.0, Microsoft представила новую технологию создания COM компонент получившую название скриплет-технология. Эта технология позволяет создавать COM компоненты средствами простых в использовании языков сценариев. Такие COM компоненты именуются скриплетами. Изначально скриплеты были ориентирован на создание компонент пользовательского интерфейса для Web страниц. Если вы знаете HTML и JavaScript, то вы легко освоите эту технологию.

При описании скриплета используются DHTML (расширение HTML) и любой язык сценариев поддерживающий ActiveX Scripting interface. Т. к. скриплет базируется на DHTML и используется в HTML документах, то он получил название DHTML скриплет. DHTML скриплеты поддерживаются браузерами Internet Explorer начиная с 4.0 на любых платформах (Win, Mac, Unix), т. к. в открытой архитектуре скриплета нет ничего ограничивающего его в пределах Win32.

Скриплет-технология получила развитие и позднее появился серверный скриплет, но в этой статье мы остановимся на рассмотрении DHTML скриплета и для экономии места будем его называть просто скриплетом.

Как создавать скриплеты

Скриплет описывается в обычном HTML файле (*.htm, *.html). Как компонента, скриплет может иметь свойства и методы. Свойствами скриплета являются глобальные перемнные, методами функции и процедуры определненным образом описанные. Для создания общедоступного свойства к имени глобальной переменной прибавляется префикс public_. Для создания общедоступного метода префикс public_ прибавлятся к имени функции или процедуры. Любая глобальная переменная с этим префиксом становится public свойством скриплета, любая функция или процедура с этим префиксом становится его public методом. Рассмотрим простой пример, в котором описывается одно свойство property1 и один метод method1:

	<script language = "JavaScript">
	public_property1 = 'Something'; 	  //Описание свойства
		  // property1
		function public_method1(param) {      // и метода method1()
		// some code
		}
	</script>

При вызове свойств и методов префикс public_ не включается. И обращение из контейнера будет выглядеть следующим образом:

	Scriplet1.property1 = 'Another';
	Scriplet1.method1(param);

События

DHTML скриплет может работать с двумя типами событий: onscripletevent событие и стандартные оконные события. Первое может быть инициировано в любое время из скриплета. Стандартные оконные события, такие как onclick, onkeypress, не могут быть инициированы самим скриплетом, но скриплет имеет механизм, оповещающий о событии контейнер. Скриплет реагирует на следующие стандартные оконные события:

• onClick
• onDblClick
• onMouseDown
• onMouseUp
• onMouseMove
• onKeyPress
• onKeyUp
• onKeyDown

Для работы со стандартными оконными событиями из контейнера необходимо написать обработчики событий в двух местах: один в скриплете для передачи уведомления о событии контейнеру, для этого вызывается метод bubbleEvent(), а другой в приложении, использующем скриплет для, непосредственной обработки события. Детальная информация о событии может быть получена через стандартный объект event. Рассмотрим простой пример передачи уведомления контейнеру о событии onKeyUp для поля ввода text1:

	<input type = text onkeyup = "passKeyUp()" name = "text1" value = " ">
	<script languаge = JavaScript>
		function passKeyUp() {
			window.external.bubbleEvent();// передача уведомления, о 
	//событии onKeyUp в //элементе text1
		}
	</script>

Есть одна тонкость: при передаче сообщения сначала необходимо убедиться в том, что свойство скриплета frozen имеет значение false, для уверенности, что контейнер способен обработать событие.

Note: Свойство frozen - read-only булево свойство скриплета; значение true означает, что на данный момент событие в контейнере обработано не будет.

Если скриплет не содержит обработчика данного события или внутри обработчика не вызывается метод bubbleEvent, то уведомление о событии передано не будет.

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

Использование скриплета

Для использования скриплета в HTML странице применяется таг <OBJECT>:

	<OBJECT width = 300  height = 300
		ID = "Scriplet1"
		TYPE = "text/x-scriplet"
		DATA	= "Scriplet's name"
	</OBJECT>

• ID - имя компоненты, через которое можно доступаться до свойств и методов скриплета. В описанном выше примере это Scriplet1.
• DATA - имя HTML файла содержащего описание скриплета, если файл расположен в другой директории, то указывается относительный путь.
• TYPE - MIME тип объекта, в данном случае скриплет.

Обратите внимание, что в таге <OBJECT> не указан CLSID - Internet Explorer сам регистрирует компоненту, когда встречает скриплет, хотя при желании скриплет можно зарегистрировать в системе и указать его CLSID явным образом. Internet Explorer распознает скриплет по MIME типу "text/x-scriplet".

Функциональность скриплета может быть реализована на любых языках сценариев поддерживающих Microsoft ActiveX Scripting интерфейс. При описании скриплета могут использоваться несколько языков сценариев, в этом случае создается несколько блоков <script language= ...>.

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

Скриплет также безопасен, как HTML и скрипт. К тому же, в скриплете есть возможность распознать в каком контейнере он находится и если это контейнер с повышенными требованиями безопасности (IE), то скриплет работает согласно политике безопасности этого контейнера.

В общем случае для корректного функционирования необходимо чтобы скриплет был загружен с того же Web сервера, что и использующая его HTML страница (как и JAVA апплеты).

Всплывающее меню

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

Для создания меню необходимо определить массив строк, который разбивается на пары: в первом элементе указывается название пункта меню, а во втором вызываемая при его выборе функция. Для инициализации меню вызывается метод setContextMenu() с массивом в качестве параметра.

	<script language = "VBScript">
		sub window_onload
			dim a(4)
			a(0) =  "Add Hello"
			a(1) =  "Hello"
			a(2) =  "Add Goodbye"
			a(3) =  "Goodbye"
			window.setContextMenu(a)
		end sub
	</script>

При щелчке правой кнопкой мыши в области отображения скриплета всплывает меню, содержащее два пункта: "Add Hello" и "Add Goodbye", при выборе первого вызывается функция Hello(), при выборе второго функция Goodbye().

Дополнительные возможности

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

В скриплете есть возможность описать некоторые функции, так что они выдают себя за свойства, и при изменении свойства выполняется код реализованный в этих функциях. Таких функций всего две: put и get. При изменении значения свойства вызывается функция put, а при получении значения - get.

	<script language=JScript>
		property1 = 'some text';
		property1GetCount = 0;
		property1PutCount = 0;
		function public_get_property1() {
			property1GetCount++;
		}
		public_put_property1(new_value) {
			property1PutCount++;
			property1 = new_value;
			refresh();
		}
	</script>

В этом примере в переменных property1GetCount и property1PutCount хранят количество обращений к свойству property1 и его изменений. В функции public_put_property1 после того как новое значение установлено, компонента обновляет значения. В контейнере вы можете ссылаться на property1, как если бы это было обычное свойство.

	Scriplet1.property1 = 'Another';
	a = Scriplet1.property1;

С помощью put_ и get_ функций можно реализовать read-only и write-only свойства. Для создания read-only свойства описывается только функция get_, т. к. функции put_ нет, то значение изменено быть не может, аналогично с write-only.

Если вы пишите на JavaScript, то имеется альтернативная возможность описания интерфейса DHTML скриплета. При определении объекта public_description в скриплете, свойства и методы этого объекта являются свойствами и методами скриплета. При таком описании интерфейса префикс public_ не используется. Удобнее описать весь интерфейс скриплета в одном месте, как это предлагается с использованием объекта public_desription, чем рассеивать описание по всему коду скрипта. В дальнейшем предполагается реализовать подобный механизм и на VBScript.

В качетстве демонстрации можно присовокупить стандартные Microsoft примеры DHTML скриплетов. Я кинул пару самых простых и наглядных, можно также посмотреть у Microsoft на www.microsoft.com/scripting/.