Рассмотрим методы размещения уже готовых управляющих элементов ActiveX на Web-страницах, выполненных с использованием языка гипертекстовой разметки HTML. Поскольку создание серверов и страниц Web становится популярным занятием, растет количество вопросов относительно этой области деятельности. Эта статья призвана помочь тем, кто заинтересовался использованием элементов ActiveX в своей работе, но еще не приобрел достаточного опыта их использования.
Размещать объекты ActiveX в документах HTML можно двумя способами. Первый связан с использованием маркера
Размещение элементов ActiveX вручную
Размещать управляющие элементы ActiveX вручную не столько сложно, сколько утомительно. Нужно использовать текстовый маркер
Этим текстовым маркером в документ, выполненный в формате HTML, вставляется объект, как-то: изображение, документ, аплет или управляющий элемент. У этого маркера очень много параметров, которые сначала сложно запомнить (см. врезку "Параметры тэга
Попробуем разместить на Web-странице элемент управления ActiveX, показывающий календарь. Его уникальный идентификатор CLSID в системе "8E27C92B-1264-101C-8A2F-040224009C02". Код страницы HTML, которую я выполнил вручную, выглядит так:
Пример размещения ActiveX вручную
На рисунке 1 вы можете увидеть, как выглядит наша страница с ActiveX в окне браузера Internet Explorer. В принципе, ничего сложного нет. Достаточно знать уникальный идентификатор объекта и какими параметрами он обладает. Сама работа по размещению ActiveX займет примерно 15 минут. Но это очень простой случай. Когда же потребуется что-то посложнее, затраты времени начнут расти в геометрической прогрессии. Вот тогда лучше воспользоваться средствами автоматического размещения ActiveX.
Автоматическое размещение элементов ActiveX
Единственная программа для автоматического размещения элементов ActiveX, которая достойна внимания, - Microsoft ActiveX Control Pad. То, что данная утилита вышла из недр Microsoft, вряд ли кого может удивить: специалисты этой фирмы придумали ActiveX, им и карты в руки. Это очень удобное средство, которое помимо размещения ActiveX на странице, умеет делать и другие полезные для любого Web-мастера вещи. Но обо всем по порядку.
Запустив ActiveX Control Pad, вы видите его окно с открытой в нем новой страницей Web, у которой присутствуют несколько самых необходимых для правильного функционирования строк HTML-кода. К хорошему слишком быстро привыкаешь, и теперь каждый раз, когда надо создать HTML-страницу, вместо ручного кодирования я запускаю ActiveX Control Pad, изменяю заголовок страницы и сохраняю ее.
Теперь у вас имеется выбор: вставлять объект непосредственно в Web-страницу или же создать файл размещения (layout). Поговорим сначала о непосредственной вставке ActiveX. Это достаточно простой процесс. Нужно установить курсор между маркерами и и выбрать из меню Edit пункт Insert ActiveX Control. В ответ на это Control Pad покажет весь список зарегистрированных в системе управляющих элементов ActiveX. Нужно выбрать желаемый элемент и изменить его свойства в диалоговой панели. Продемонстрируем это на примере того же самого календаря, о котором мы говорили, когда обсуждали ручную вставку элементов в страницу. Установим курсор как положено и вызовем команду вставки элемента ActiveX. В диалоговой панели выберем Calendar. Программа тут же откликнется и откроет два дополнительных окна: одно с примерным изображением элемента ActiveX, а другое - со списком свойств помещаемого на страницу элемента, которые можно редактировать перед вставкой. Для начала установим отдельные свойства календаря. Во-первых, сделаем фиолетовый фон (свойство BackColor). Понимаю, что это неэстетично, но цвет взят для примера. Во-вторых, установим дату на 23 февраля 1997 г., чтобы узнать, когда в этом году будет ближайший праздник (свойства Day, Month и Year). В-третьих, сделаем так, чтобы указываемый день отображался выпуклой кнопкой, а остальные дни - вдавленными кнопками. Для этого мы должны изменить значение свойства GridCellEffect на число 2. Я также добавил текст http://www. our_server.com в свойство CODEBASE, чтобы обозначить ссылку на наш несуществующий сервер. Пока это не нужно, но когда-нибудь пригодится. И последнее, что требуется, - поменять цвет шрифта для чисел календаря (свойство GridFontColor). Результат изменений не замедлит показаться в окне Edit ActiveX Control. Остается лишь сохранить файл страницы. Обратите внимание, что на левом служебном поле окна с текстом нашей Web-страницы появился особый значок, обозначающий вставленный объект. В любой момент вы можете дважды щелкнуть на нем мышью, чтобы перейти в режим редактирования ActiveX.
Немедленно проверим, как будет смотреться наша новая страница в окне Internet Explorer. Откроем ее и... Надо же, ничего не изменилось! Все свойства остались такими, какими были до редактирования. Это умный Internet Explorer пытается осуществить защиту данных от несертифицированного элемента ActiveX, не давая ему "пошевелиться" внутри нашей системы. Отключите защиту (выбирая последовательно: View-Options-Security-Safety Level-None), и все встанет на свои места.
Теперь наш HTML-код принял следующий вид:
Неплохо для двух минут работы! Вручную за это время такой текст сделать сложновато. Вы заметили, что ActiveX Control Pad знает все о свойствах элемента? Если бы не эта утилита, то я вряд ли бы узнал о том, какие параметры имеются у календаря. Это один из тех "бесплатных пирожков", которые имеются в программе. Теперь, когда мне нужно изучить недокументированный ActiveX, я загружаю его в ActiveX Control Pad и исследую.
Альтернативой прямому размещению объектов на странице является вставка в страницу раскладок. Раскладка - это элемент ActiveX, который может служить контейнером для других управляющих элементов ActiveX. Для чего это нужно? Для того чтобы компенсировать неумение языка HTML точно позиционировать управляющие элементы на Web-страницах. Когда вы вставляете в страницу Web новую раскладку, в исходном коде появляются следующие строчки, говорящие о присутствии ActiveX:
Как видите, в качестве параметра элемента раскладки передается имя файла, в котором закодированы все настройки для раскладки. Во многом файлы раскладки схожи по синтаксису с обычными HTML-файлами, но используют расширенный вариант маркера , который применяется для обозначения разделов документа и в форматировании HTML с помощью Cascading Style Sheets - новшества языка HTML, пока еще не столь популярного среди Web-мастеров.
Осталась еще одна возможность, которую мы не затрагивали до сего момента. Это Script Wizard, инструмент для быстрой генерации кода на VBScript. Чтобы убить сразу двух зайцев, мы рассмотрим пример, иллюстрирующий использование как раскладок, так и Script Wizard. Его суть заключается в том, что на Web-странице с некоторым отступом располагается уже знакомый нам ActiveX-календарь. А внутри этого отступа имеются две кнопки опций, переключая которые можно менять цвет фона календаря на желтый или зеленый.
Итак, первое, что необходимо сделать, это создать раскладку с расположенным на ней календарем и кнопками. Для этого выполним команду File-New HTML Layout. У нас появляется новая страница раскладки и палитра элементов Toolbox. В палитре сосредоточены основные управляющие элементы, также выполненные по технологии ActiveX. Используя технологию перетаскивания, разместим на страничке раскладки элемент Label с надписью "Цвет фона" и два элемента OptionButton с надписями "Желтый" и "Зеленый". Затем сгруппируем кнопки командой Edit-Group, обеспечив тем самым связь между ними. Осталось лишь добавить сам календарь. Вот тут придется немного повозиться. Дело в том, что ActiveX Control Pad умеет добавлять в раскладку лишь те элементы ActiveX, которые имеются в палитре Toolbox. Значит, необходимо сначала добавить в Toolbox календарь, отметив его в диалоговой панели зарегистрированных в системе ActiveX, которая возникает, если выбрать команду Additional Controls из контекстного меню Toolbox. Затем, когда наш элемент показался в палитре, его можно разместить на странице раскладки.
Покончив с дизайном, можно приняться за текст на VBScript, который и будет управлять цветом фона календаря и кнопками на странице. Для этого запустим Script Wizard. В диалоговой панели этого инструмента имеются три окна: для событий объектов, для используемых параметров объекта и для действий. Все данные представлены в виде иерархического дерева объектов. Нам необходимо написать три обработчика. Первый из них должен выполняться, когда раскладка только загрузилась. Второй должен вызываться, когда пользователь щелкнул на первой кнопке, а третий - при нажатии на вторую кнопку. Чтобы создать обработчик, необходимо выбрать в левой панели объект и событие, которое нужно обработать. В нашем случае объект называется Layout1, а событие, которое мы отслеживаем, OnLoad. Его необходимо выделить. В правой панели параметров мы выберем первую кнопку OptionButton1 и ее свойство Value. Чтобы с момента загрузки эта кнопка была отмечена, зададим значение Value равным True, что соответствует помеченной кнопке. Для этого нажмите кнопку Insert Action, чтобы обработчик был сгенерирован, а затем нажмите кнопку Modify Value и введите значение True.
Это приведет к созданию такого текста:
Sub Layout1_OnLoad() OptionButton1.Value = True
Далее проделаем то же самое для кнопки OptionButton2, но установим ее значение Value в False. Сразу же необходимо сделать цвет календаря желтым, для чего добавим обработчик изменения свойства BackColor календаря. Для изменения цвета в процессе использования страницы, необходимо создать два обработчика событий Click кнопок OptionButton1 и OptionButton2, которые меняют цвет фона календаря на желтый и зеленый соответственно. Обратите внимание: Script Wizard можно использовать в двух режимах: вид дерева объектов и вид кода. В каждом отдельном случае вы можете выбрать любой из них, который более подходит для решения задачи.
Затем для работы нашего примера требуется вставить полученную раскладку в Web-страницу. Это совсем просто, нужно лишь выполнить команду Edit-Insert HTML Layout. Запустим и посмотрим на дело наших рук. Результат - готовое приложение общим размером 2,5 Кбайт на VBScript с использованием элементов ActiveX. Всех дел на 12 минут! Не думаю, что вручную было бы быстрее.
Если вас заинтересовала программа ActiveX Control Pad, то вы можете получить ее бесплатно с WWW-сервера компании Microsoft http://www.microsoft.com/
Параметры текстового маркера
ALIGN=align-type - устанавливает выравнивание объекта на странице. Типы выравнивания могут быть следующими:
BASELINE - нижний край объекта выравнивается по базовой линии окружающего текста;
CENTER - объект находится в центре между левым и правым отступами;
LEFT - объект выравнен по левому краю, а обтекающий текст находится с правой стороны;
MIDDLE - середина объекта выравнивается по базовой линии окружающего текста;
RIGHT - объект выравнен по правому краю, а обтекающий текст находится с левой стороны;
TEXTBOTTOM - нижний край объекта выравнен по нижнему краю окружающего блока текста;
TEXTMIDDLE - середина объекта выравнивается по средней точке между базовой линией и x-высотой окружающего текста;
TEXTTOP - верхний край объекта выравнивается по верхнему краю окружающего блока текста.
BORDER=n - определяет ширину рамки, если объект определен как гиперссылка
CLASSID=url - определяет уникальный идентификатор объекта, который присваивается объекту при создании. Для элемента ActiveX значение url будет равно CLSID:уникальный идентификатор
CODEBASE=url - определяет адрес, откуда был получен объект
CODETYPE=codetype - определяет тип носителя Internet-кода
DATA=url - определяет данные для объекта
DECLARE - описывает объект без его реализации. Используйте этот оператор, когда требуется создать перекрестную ссылку в документе или когда объект используется как параметр для другого объекта
HEIGHT=n - определяет предполагаемую высоту объекта
HSPACE=n - определяет горизонтальный отступ. Образует дополнительное пустое пространство между объектом и текстом, расположенным слева и справа от него
NAME=url - устанавливает имя для объекта, когда он преподносится как часть формы
SHAPES - указывает, что у объекта имеются гиперссылки сложной формы
STANDBY=message - определяет сообщение, которое видит пользователь в процессе загрузки объекта
TYPE=type - определяет носитель Internet для данных
USEMAP=url - определяет карту-меню для использования с объектом
VSPACE=n - определяет вертикальный отступ. Образует дополнительное пустое пространство между объектом и текстом, расположенным сверху и снизу от него
WIDTH=n - определяет предполагаемую ширину объекта
Коротко о продукте
ActiveX Control Pad
Microsoft Corp.,
тел. представительства в Москве:
(095) 967-85-85