Практикум
Теперь пора попробовать применить все эти теоретические сведения на практике. Давайте напишем для пробы небольшой HTML-файл, вызывающий один из органов управления ActiveX, разработанных фирмой Microsoft, - модуль для создания плавного перехода цветов (градиента). Заглянув в документацию на этот компонент, мы узнаем соответствующий ему идентификатор CLSID и URL-адрес одной из его копий на сервере Microsoft, на которую можно будет сослаться. Кроме того, там же мы найдем список параметров и их значений, которые способен принимать этот орган управления, в частности:
-
StartColor и EndColor
-
Два цвета, плавный переход между которыми вы увидите на экране. Задаются в обычном для HTML виде "#rrggbb", где rr, gg и bb - шестнадцатеричные значения красной, зеленой и синей составляющих цвета.
-
Direction
-
Направление градиента: 0 - горизонтальное, 1 - вертикальное, 2 - радиальное от центра к краям, и т.д.
Теперь остается лишь заполнить атрибуты тега <OBJECT> и предусмотреть нужное количество тегов <PARAM>. Вот как выглядит полный текст нашего HTML-файла:
<HTML> <TITLE>Пример вызова органа управления ActiveX</TITLE> <BODY> Этот градиент на вид не отличишь от обычного графического файла: <OBJECT ID="grad1" CLASSID="clsid:017C99A0-8637-11CF-A3A9-00A0C9034920" CODEBASE="http://activex.microsoft.com/controls/ iexplorer/iegrad.ocx#Version=4,70,0,1161" WIDTH=200 HEIGHT=100 > <PARAM NAME="StartColor" VALUE="#ffffff"> <PARAM NAME="EndColor" VALUE="#000000"> <PARAM NAME="Direction" VALUE="0"> </OBJECT> </BODY> </HTML>
Открытие этого файла в броузере Internet Explorer приведет к довольно заметной паузе, во время которой в строке состояния будет видна надпись "Installing components..." В это время броузер связывается с сервером, указанным в атрибуте CODEBASE, и перекачивает с него файл, содержащий компонент ActiveX (перед проведением этого эксперимента нужно подключиться к сети). Файл этот не слишком велик, но и не так чтобы очень мал - чуть больше 100 K (что, кстати, вполне можно принять за средний размер для не слишком сложных органов управления). То, что вы увидите на экране, когда инсталляция будет закончена, показано на рис. 2.
Рисунок 2. Пример вызова органа управления ActiveX
Конечно, для простого статичного градиента вполне можно было бы обойтись обычным gif-файлом, не прибегая к ActiveX. Главное преимущество органов управления - это их интерактивность и возможность динамически изменять их параметры. Давайте попробуем оживить наш градиент, а заодно попрактикуемся в организации взаимодействия между органами управления и сценариями.
Выделим на странице небольшую квадратную область и заполним ее градиентом типа "от центра к краям". Цвет краев выберем серым, а цвет центра будем динамически менять из черного в белый и обратно, создавая эффект "мигающей лампочки". Вызов градиента в этом примере запишем так:
<OBJECT
ID="grad1"
CLASSID="clsid:017C99A0-8637-11CF-A3A9-00A0C9034920"
CODEBASE="http://activex.microsoft.com/controls/
iexplorer/iegrad.ocx#Version=4,70,0,1161"
WIDTH=25
HEIGHT=25
<!- прямоугольник 25 на 25 пикселов ->
>
<PARAM NAME="StartColor" VALUE="#888888">
<! - по краям - серый цвет ->
<PARAM NAME="EndColor" VALUE="#000000">
<!- в середине - то черный, то белый ->
<PARAM NAME="Direction" VALUE="2">
<!- направление - от центра к краям ->
</OBJECT>
(Градиент больших размеров, чем 25 на 25 пикселов, перерисовывается слишком долго.) Если вы выполнили предыдущий пример и теперь этот орган управления загружен и установлен на ваш компьютер, атрибут CODEBASE можно опустить.
Теперь нужно обеспечить периодический вызов функции, которая меняла бы одно из свойств нашего градиента - цвет центральной точки. Для этого воспользуемся еще одним органом управления под названием Timer. Согласно документации, этот орган управления имеет два параметра: параметр Interval, который задает промежуток времени между срабатываниями таймера, и параметр Enabled, позволяющий включать и выключать работу таймера. "Срабатывание" же таймера заключается в инициировании связанного с ним события, которое так и называется - Timer. Как выражаются программисты, мы должны теперь "повесить" функцию переключения градиента на это событие. Сначала заведем объект-таймер:
<OBJECT
ID="timer1"
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/
iexplorer/ietimer.ocx#Version=4,70,0,1161"
>
<PARAM NAME="Interval" VALUE="500">
<!- таймер срабатывает каждые 0,5 сек ->
<PARAM NAME="Enabled" VALUE="True">
<!- таймер включен ->
</OBJECT>
Теперь остается написать фрагмент сценария, у которого в открывающем теге <SCRIPT> указаны имя объекта-таймера и имя события, по наступлении которого этот фрагмент получит управление:
<SCRIPT FOR="timer1" EVENT="Timer"
LANGUAGE="JavaScript">
<!-
// переключаем один из цветов градиента:
if (grad1.EndColor == 0) // из черного
grad1.EndColor = 0xffffff; // в белый
else
grad1.EndColor = 0; // и наоборот
grad1.Repaint (); // перерисовываем
градиент
// ->
</SCRIPT>
Как видно из этого примера, свойство EndColor может задаваться и изменяться как с помощью тега <PARAM> при создании объекта, так и впоследствии из сценария. Метод Repaint (хоть он и не указан в документации) имеется у всех органов управления, которые хоть что-нибудь рисуют на экране.
Итак, периодическое изменение и перерисовку градиента (объект grad1) с частотой два раза в секунду обеспечивает таймер (объект timer1). Теперь наш градиент будет мигать до тех пор, пока мы не уйдем с этой страницы; на прорисовку остальных частей страницы, ее прокрутку и просмотр это практически не влияет. Снимок окна броузера с этой страницей приведен на рис. 3.
Рисунок 3. Динамическое изменение параметров органа управления
Если вы - поклонник визуального дизайна Web-страниц и не очень-то любите возиться с тегами и атрибутами, Microsoft имеет предложить вам специальную программу под названием ActiveX Control Pad. В ней вы сможете строить свою страницу и размещать на ней органы управления, по большей части лишь щелкая мышью (чем-то это похоже на среду разработки программ в Visual Basic). К сожалению, сценарии вам все равно придется писать "вручную"...
Напоследок - еще кое-какие полезные сведения для тех, кто не прочь покопаться во внутренностях системы ActiveX. OCX-файлы с органами управления, полученные из сети, складываются броузером в подкаталог OCCACHE в каталоге Windows 95; судя по названию, этот подкаталог должен рассматриваться как хранилище кэшируемых данных, хотя кэш этот в Internet Explorer 3.0 является постоянным - информация в нем никогда не стирается.
Сведения об установленных органах управления хранятся в реестре Windows в разделе \HKEY_CLASSES_ROOT\CLSID. Данные о каждом органе управления вы найдете в подразделе, имя которого совпадает с идентификатором класса этого органа управления. Кстати, заглянув в реестр, вы увидите, что с помощью этого же механизма Windows хранит информацию о множестве других своих компонентов, большинство из которых не имеют никакого отношения ни к ActiveX, ни вообще к Интернету.
