Создание проекта DHTML

Недавно мы видели, как WebComm работает в Internet Explorer. Теперь давайте создадим DHTML-страницу, которая будет запускать клиентское приложение WebComm:

1. Создайте новый проект командой File > New Project.

2. Выберите в диалоговом окне New Project значок DHTML Application и нажмите кнопку ОК, чтобы создать проект.

3. Задайте свойству Name проекта значение WebCommStart.

4. Дважды щелкните в строке DHTMLPagel в окне проекта, чтобы открыть страницу в режиме конструктора. Примерный вид окна показан на рис. 18.11.

Рис. 18.11. Конструктор DHTML

Как видите, окно конструктора разделено на две панели. В левой панели отображается список компонентов (в DHTML они называются элементами). Прокручивая панель, вы сможете просмотреть свойства каждого элемента. В правой панели показано, как выглядит страница в броузере. В ней можно ввести текст или добавить более сложные элементы (например, кнопки и текстовые поля). Элементы, помещаемые на страницу, отображаются в левой панели; вы можете выделить их и изменить значения свойств.

5. Задайте свойству ID страницы DHTMLPage1 значение htmWebCommStart.

6. Щелкните в правой панели, введите текст Добро пожаловать в WebComm! и нажмите клавишу Enter.

7. Выделите текст Добро пожаловать в WebComm! и присвойте ему шрифтовые атрибуты Arial, Bold, 6 с помощью панели инструментов, расположенной в верхней части окна конструктора. Задайте его свойству ID значение pWelcome.

8. Введите текст Издательство и дважды щелкните на элементе Hyperlink (гиперссылка) в панели элементов. После введенного текста создается гиперссылка.

9. Замените текст ссылки Hyperlink1 на Питер!

10. Выделите текст Издательство Питер! и присвойте ему шрифтовые атрибуты Arial, Italic, 3. Задайте его свойству ID значение pPiter.

11. Щелкните на гиперссылке правой кнопкой мыши и выберите команду Properties из диалогового окна Property Pages.

12. Введите текст www. piter-press.ru в поле Link. В поле Pop-up Text введите текст Питер - любые книги о компьютерах! Подтвердите изменения кнопкой ОК.

13. В окне свойств задайте свойству ID значение lnkPiter.

14. Дважды щелкните на элементе Button (кнопка) в панели элементов, чтобы поместить его на страницу.

15. Задайте свойству ID значение cmdStart, а свойству Value — значение Начать работу.

После добавления всех элементов страница должна выглядеть так, как показано на рис. 18.12. На левой панели отображаются свойства всех элементов. Поведение элементов, выделенных жирным шрифтом, можно запрограммировать (поскольку для них было задано свойство ID).

Рис. 18.12. Страница с добавленными элементами

16. Дважды щелкните на странице, чтобы открыть окно программы.

17. Вставьте следующую строку в секцию (General)(Declarations): Private Const LNK_WEBCOMM_CLIENT = " "

18. Введите полный путь к файлу WebComm.vbd, созданному в предыдущем примере. Страница будет просматривать указанный каталог при нажатии кнопки

cmdStart.

Приложения DHTML имеют событие onLoad, аналогичное событию Load для форм Visual Basic. Включая свой код в процедуру этого события, вы можете настроить страницу перед ее отображением в броузере.

19. Вставьте следующий фрагмент в процедуру события onLoad объекта Base Window:

Private Sub BaseWindow_onLoad() Задать свойства документа With Document

.bgColor = " lightyellow".linkColor = " blue".vlinkColor = " blue".alinkColor = " blue" End With

' Настроить приветствие pWelcome.Style.Color = " blue" pPiter.Style.Color = " black" End Sub

Возможно, вы заметили, что цвета определяются в текстовом виде (вместо шест-надцатеричных констант). Дело в том, что переменные DHTML по умолчанию имеют тип Variant. Кроме того, в HTML вместо констант используются текстовые обозначения цветов.

Также следует заметить, что программа изменяет цвет свойства Style объекта. Поскольку в страницах DHTML широко используется стилевое оформление, вы можете изменить внешний вид (стиль) объекта через его свойство Style.

20. Чтобы кнопка на форме выполняла полезные действия, вставьте следующий фрагмент в функцию события cmStart_onClick:

Private Function cmdStart_onClick() As Boolean

Запустить клиента WebComm BaseWindow.navigate LNK_WEBCOMM_CLIENT End Function 21. Чтобы гиперссылка смотрелась более эффектно, мы будем окрашивать ее в красный цвет, когда над ней задерживается указатель мыши. Для этого вставьте в процедуру события onmouseover() гиперссылки следующий фрагмент:

Private Sub lnkPiter_onmouseover()

Перекрасить ссылку в красный цвет InkPiter.Style.Color = " red" End Sub

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

Private Sub lnkPiter_oninouseout()

Перекрасить ссылку в синий цвет InkPiter.Style.Color = " blue" End Sub

23. Сохраните и запустите проект.

На экране появляется окно Internet Explorer с нашей страницей DHTML (рис. 18.13).

Если провести указатель мыши над гиперссылкой, она окрашивается в красный цвет. Если убрать его в сторону, ссылка снова становится синей. Если задержать мышь над гиперссылкой, появляется рекламная подсказка. Когда все будет готово к запуску клиентского приложения WebComm, нажмите кнопку на странице.

1. Закройте Internet Explorer и остановите приложение командой Run > End в меню Visual Basic.

2. Откомпилируйте приложение командой File > Make WebCommStart.dll

3. Откройте проект WebIndex, созданный в начале урока.

4. Вставьте в список lstSites новую строку. Для этого используется команда следующего вида (указанный каталог следует заменить тем, в котором был сохранен проект WebCommStart):

IstSites.Addltem " d: \piter\webcomm start page\" & _ " WebCommStart_DHTMLPage1.htm"

Сохраните и запустите проект, чтобы проверить, как работает наша страница. Перед тем как активизировать клиента WebComm, следует предварительно запустить сервер WebComm. Если выбрать из списка строку WebCommStart, появляется страница DHTML в элементе WebBrowser. Она будет работать точно так же, как и во время тестирования в Internet Explorer. Если нажатием кнопки запустить клиента WebComm, он тоже будет отображаться в элементе WebBrowser!

Рис. 18.13. Страница запуска WebComm