Создание DHTML-приложений с помощью Visual Basic 6.0

Андрей Колесов, Ольга Павлова

Структура DHTML-приложения

Проектирование первой HTML-страницы — Intro.htm

Формирование второй страницы — Entry.htm

Написание программного кода

Тестирование приложения

В этой статье мы покажем возможности Visual Basic 6.0 по созданию DHTML-приложений, которые структурно представляют собой комбинацию динамических HTML-страниц и программного кода на VB. Напомним, что работа этих приложений основана на технологии DHTML, реализованной в Internet Explorer начиная с версии 4.0.

Идея нашего проекта такова. Пусть имеется некая база данных, в которой хранятся сведения о сотрудниках фирмы. (Мы будем использовать базу NWind.mdb, входящую в состав VB6. Чтобы не приходилось заботиться об указании точных путей к файлам, скопируйте ее в корневой каталог C:\ .) Мы создадим приложение с использованием двух DHTML-страниц: на первой будет вводиться запрос на поиск сведений о сотруднике (рис. 1), а на вторую будет выдаваться соответствующая персональная информация (рис. 2).

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

Структура DHTML-приложения

Загрузите VB6 и в окне New Project выберите элемент DHTML Application. Обратите внимание, что панель инструментов Toolbox приняла вид, специально адаптированный для данного типа приложений (рис. 3).

В окне проекта сразу появились две группы элементов — модули и конструкторы HTML-файлов (рис. 4). В папке Modules автоматически создается модуль modDHTML, который содержит две процедуры — GetProperty и PutProperty — с уже сформированным кодом для управления взаимодействием HTML-модулей данного приложения (мы не будем дальше корректировать содержимое модуля, поэтому можно закрыть этот узел дерева проекта).

Мы будем иметь дело с Конструктором, содержащим модули, в каждом из которых находится ссылка на базовый HTML-файл и необходимый для него программный код (соответствующий файл на диске имеет расширение DSR). Дважды щелкните элемент DHTMLpage1, после чего на экране появится окно Конструктора. Далее замените в окне Properties свойство Name этого элемента на HRintro и сохраните (Save As) весь проект под именем DHTMLex1.vbp.

Проектирование первой HTML-страницы — Intro.htm

Приступим к формированию первого DHTML-элемента. На панели инструментов Конструктора щелкните кнопку DHTML Page Designer Properties (рис. 5). В появившемся окне HRintro Properties установите переключатель «Save HTML in an external file», чтобы сохранить саму HTML-страницу в виде внешнего файла. Этот вариант лучше, чем вариант с сохранением страницы во внутреннем VB-формате, так как позволяет в нужный момент использовать любой внешний редактор, в том числе текстовый, для коррекции содержимого файла. Далее нажмите кнопку New и сохраните создаваемый файл в текущем каталоге вашего проекта под именем Intro.htm. Для завершения процедуры щелкните OK в окне HRintro Properties (рис. 6).

ЗАМЕЧАНИЕ. К сожалению, встроенный HTML-редактор VB6 нельзя отнести к «продвинутым», поэтому внешняя помощь иногда не помешает. Более того, мы не рекомендуем вообще пользоваться этим редактором, и нижеследующий пример работы с ним служит подтверждением этого совета.

Содержимое текущей (для Конструктора) HTML-страницы можно просматривать и редактировать напрямую в редакторе, который вы определили по умолчанию (команда Tools|Options|Advanced). К нему можно обратиться, щелкнув кнопку Launch Editor на панели инструментов Конструктора. Мы же будем сейчас работать со средствами редактирования самого Конструктора и Launch Editor (в нашем случае это Notepad). Конструктор состоит их двух смежных окон: в правом находится собственно графический HTML-редактор, а в левом — дерево, которое отображает структуру HTML-страницы.

Для начала изменим цвет фона станицы. Для этого щелкнем кнопкой Launch Editor и откроем исходный HTML-код нашей страницы, который содержит всего одну строчку:

<body></body></html>

Заменим первый элемент на <head></head><body bgcolor=«#87ceed»>. Зачем здесь нужен элемент <head>? Отвечаем — сами не понимаем, но экспериментальным путем обнаружили его необходимость (Прим. ред. Структура HTML-документа требует наличия двух частей — заголовка документа, описываемого элементом <head> и парным ему элементом </head>, и тела документа, описываемого элементом <body> и парным ему элементом </body>. Обе части документа располагаются между элементами <html> и </html>). В случае его отсутствия Конструктор зачем-то дописывает свои строки в заголовок создаваемого временного HTML-файла во время выполнения приложения, в результате чего портится цвет фона выводимого окна. Если интересно — попробуйте указать <head> и посмотрите, что получится.

Выйдем из Notepad (сохранив изменения) и убедимся, что цвет фона стал голубым. Далее, используя средства форматирования (шрифт, размер и пр.), введите в правом поле встроенного редактора Конструктора нужный нам текст (рис. 1). Следите при этом за изменением структуры HTML-страницы в левом окне Конструктора.

Написав в последней строке слово «Сотрудники:», щелкните на панели инструментов элемент списка, который в данном случае называется Select, и разместите его на формируемой нами странице. В окне Properties установите свойство ID данного элемента как cboEmpNames, а свойству Value присвойте пустое значение. Затем аналогичным образом разместите на странице командную кнопку подтверждения SubmitButton и установите ее свойства ID и Value как btnGo и Выбор соответственно.

ЗАМЕЧАНИЕ. Обратите внимание, что названия и смысловое содержание визуальных элементов DHTML-страниц и их свойств несколько отличаются от обычных VB-элементов. В частности, в VB идентификация элемента управления выполняется с помощью свойства Name, а в DHTML — через ID.

Но это еще не все. Еще раз войдите в Launch Editor и удалите в тексте Intro.htm строку:

<OPTION selected value=Select>Select

Иначе у вас в качестве первого значения списка в процессе выполнения приложения будет появляться Select, нумерация списка будет нарушена и поиск по базе данных будет проходить неверно.

Мы закончили формирование первой DHTML-страницы (рис. 7), структура которой представлена деревом в левом окне Конструктора. А сам исходный текст файла Intro.htm должен иметь приблизительно такой вид, как на листинге 1.

Формирование второй страницы — Entry.htm

Правой кнопкой мыши щелкните папку Designers в окне Project, в появившемся меню выберите команду Add, а затем — HTML Page. Здесь возникает вопрос: формировать страницу самим в среде Конструктора или использовать некоторую внешнюю заготовку?

Мы сейчас выберем второй вариант, поэтому в появившемся окне DHTMLpage1 Properties установим переключатель Save HTML in an external file, щелкнем кнопку Open, а затем откроем существующий файл Entry.htm. Далее в окне Properties заменим свойство Name элемента DHTMLpage1 на HRentry и сохраним новый модуль на диске.

Разверните Конструктор на весь экран и внимательно посмотрите на структуру HTML-страницы и на ее внешний вид. Для лучшей наглядности элементов дизайна страницы щелкните кнопку Show Table Borders на панели инструментов (рис. 8).

На странице видны четыре группы графических элементов, обозначенных прямоугольниками с серой границей. На дереве страницы им соответствуют папки dvTab1Sel, dvTab2Sel, dvTabPage1 и dvTabPage2, а в коде HTM-файла границы этих областей определяются элементами DIV, которые имеют приблизительно такой вид (для dvTab1Sel):

<DIV id=dvTab1Sel style=»HEIGHT: 25px; LEFT: _
110px; POSITION: absolute; TOP: 72px; WIDTH: _
153px; Z-INDEX: 100">
<p><FONT size=2>Сотрудник</FONT></p>
</DIV>

С помощью этих областей мы будем формировать две вкладки на выходной форме нашего приложения: dvTabxSel будут использоваться в качестве заголовка, а dvTabPagex — содержимого.

Здесь следует подчеркнуть, что редактор DHTML-Конструктора в VB 6.0 реально годится только для создания довольно простых проектов. (Мы использовали для создания второй страницы MS FrontPage Express 2.0.) В принципе, некоторое подобие формы, приведенной на рис. 8, можно создать и в VB 6 (в том числе и сформировать таблицы для dvTabPagex, хотя работа с таблицами в редакторе тоже реализована не очень удачно). Но для оформления областей с помощью элементов <DIV> придется корректировать код HTM-файла вручную.

Написание программного кода

Начнем писать код с входного модуля HRintro. Чтобы попасть в окно кода, нужно щелкнуть правой кнопкой мыши этот элемент в окне Project и выбрать команду View Code. В первую очередь нужно сформировать процедуру BaseWindow_onLoad — именно это событие выполняется в момент загрузки страницы:

 Private Sub BaseWindow_onload()
           ' формирование списка сотрудников
           Call LoadComboBox
 End Sub

Там происходит обращение к процедуре LoadComboBox (см. листинг 2), в которой выполняется обращение к базе данных Nwind.mbd и формирование списка фамилий сотрудников для элемента управления cboEmpNames (Select). Далее введем следующий код для кнопки «Выбор»:

  Private Function btnGo_onclick() As Boolean
     Dim Family$
     Family$ = cboEmpNames(cboEmpNames.selectedIndex).Value
     If Family$ <> "" Then
        ' фиксация фамилии выбранного сотрудника
        PutProperty BaseWindow.Document, «EmpID», Family$
        ' обращение к выходной странице Entry.htm
        BaseWindow.navigate «Entry.htm»
     End If
  End Function

Если из списка выбран некий сотрудник, производится передача его идентификатора в модуль modDHTML через автоматически сформированную процедуру PutProperty. Далее активизируется страница Entry.htm. (На самом деле запускается на выполнение модуль HRentry.dsr, но почему-то Microsoft решила для обращения к нему использовать не его имя, а название исходной страницы.)

Далее формируем код для выходной HTML-страницы — HRentry. Откроем ее окно кода и введем для события BaseWindow_onLoad:

Private Sub BaseWindow_onload()
     ' Иницицализация страницы Entry.htm
     '-------------------------
     ' Заполнение формы данными
     Call PopulateTabs
     'Формирование выходной формы из двух вкладок:
     Call TabsOnScreen
End Sub

Как видите, здесь производится обращение к двум процедурам: PopulateTabs (листинг 3) выполняет поиск данных в базе данных на основе идентификатора, получаемого с помощью процедуры GetProperty, а TabsOnScreen (листинг 4) выводит графическое изображение формы с двумя вкладками на экран. Чтобы завершить написание кода, нужно еще сформировать процедуры dvTab1Sel_onClick и dvTab2Sel_onClick (листинг 5), которые обеспечивают перерисовку вкладок после щелчка их заголовков.

Тестирование приложения

Теперь запустите созданное нами приложение и убедитесь, что все работает, как было задумано. Однако обратите внимание на следующие моменты:

• При первом запуске приложения появится окно Project Properties с открытой вкладкой Debugging (рис. 9). Обратите внимание, что там нужно установить переключатель Start Component, а в списке рядом с ним выделен HRintro (с загрузки этой страницы должна начинаться работа приложения).

• Для работы с базой данных Nwind.mdb необходимо установить ссылку к библиотеке Microsoft ActiveX Data Objects Library: с помощью команды Project|References отметьте библиотеку ADO Library 1.5 или 2.0.

• Откомпилированное приложение можно создать только в виде ActiveX-сервера — EXE или DLL.

• При переносе исходных модулей приложения, могут нарушиться связи между модулями из-за изменения путей в именах файлов. Это касается исходных HTML-файлов и решается довольно просто — нужно только открыть эти файлы в Конструкторе еще раз для каждого элемента проекта.

КомпьютерПресс 5'1999