Использование WebBrowser и MSHTML в VB. Часть 3
Создание интерфейса программ.
- WebBrowser и Visual Basic
- Загрузка Html документа в WebBrowser
- Динамическое формирование элементов интерфейса
- Использование CSS
- Демонстрационный проект
В двух предыдущих статьях обсуждались вопросы загрузки html - документов и способы обработки событий. В данном материале речь пойдёт о создании интерфейса программ и использовании скинов. Описана модификация содержания и оформления Html документа при работе программы и в ответ на действия пользователя. Показано, как изменить содержание только для отдельных частей документа с помощью dhtml и задать внешний вид, используя css.
WebBrowser и Visual Basic
Технологии, используемые при работе с WebBrowser в Visual Basic:
- формирование пользовательского интерфейса с помощью HTML и CSS
- использование DOM для обработки событий и обновления элементов интерфейса
- использование VB там, где обычно используется JavaScript
В html есть возможность создания документов с использованием текстовых полей, списков, кнопок. Как и в Visual Basic документы, содержащие элементы управления называют формами. Рассмотрим особенности создания html форм в VB.
Возможности WebBrowser, как контейнера для других элементов значительно превосходят возможности стандартной vb формы.
Помимо привычного абсолютного позиционирования, когда задаются чёткие координаты, есть возможность использовать относительное, когда размещение элемента зависит от размеров других. Это очень важное свойство, позволяющее реализовать автоматическое изменение размеров (и при необходимости расположения) элементов формы при изменении размеров окна.
Загрузка Html документа в WebBrowser
Есть несколько подходов к созданию и способу загрузки документа.
Если структура формы достаточно проста, то можно отказаться от первоначальной загрузки html файла и создать все необходимые элементы, используя динамический html.
Добавить элемент можно несколькими способами.
- используя свойство InnerHtml, которое позволяет вписать html код для указанного элемента. Этим способом можно разу создать как один элемент, так и целое множество, одновременно задав значения необходимых атрибутов.
- используя свойство CreateElement, с помощью которого можно создавать отдельные элементы. Это более гибкий способ, но он не очень удобен при формировании больших документов. Значения атрибутов необходимо задавать отдельными командами.
Если программа имеет сложный интерфейс, содержащий множество элементов управления - имеет смысл использовать предварительно созданный html-файл. Если в программе несколько различных форм, то и файлов может быть несколько. Загрузку можно реализовать несколькими способами.
- Самый простой способ - поместить файл на диске и использовать метод Navigate.
- Поместить файл в ресурсах программы и загружать его оттуда. Использование ресурсов позволяет избавиться от множества вспомогательных файлов, которые необходимы для работы программы. Пример создания и использования файла ресурсов можно посмотреть в демонстрационном проекте.
- Поместить файл на диске, в ресурсах или в базе данных и для загрузки использовать метод Write.
Если для создания документа использовался протокол 'about:', то необходимо позаботиться, чтобы WebBrowser знал, где ему искать файлы, прописанные с использованием относительной адресации. Ниже приведён пример, указывающий в качестве пути htm страницу в ресурсах исполняемой программы.
iDoc.getElementsByTagName("BASE").Item(0).href = _
"res://" & App.Path & "\" & App.EXEName & ".exe/new.htm"
Другие примеры можно посмотреть в статье загрузка html - документов.
Динамическое формирование элементов интерфейса
Существует несколько подходов к созданию сложных элементов.
- Сгенерировать всё множество в виде строки, содержащей html код и записать его в указанном месте
- Создавать отдельные элементы и их свойства
- Создавать копии существующих объектов
Предварительное формирование html кода является наиболее быстрым способом добавления или модификации множества элементов. Visual Basic не очень быстро объединяет строки. Это связано с тем, что для записи результата объединения строковых переменных создаётся новая переменная большего размера. Что бы обойти эту проблему можно использовать специальный класс, выполняющий объединение строк.
' clsAppendString класс быстрого объединения строк
' пример использования:
' Dim mStr as New clsAppendString
' mStr.Add "test"
' Debug.Print mStr.Str
Option Explicit
Private LenTxt As Long 'реальный размер текста
Private sBuf As String 'буфер
Private LenBuf As Long 'размер буфера
Private Sub Class_Initialize()
LenBuf = 255
sBuf = Space$(LenBuf)
End Sub
'добавление подстроки в строку
Public Sub Add(ByRef nStr As String)
Dim LenStr As Long 'размер строки
Dim sTmp As String
LenStr = Len(nStr)
If LenStr > 0 Then
Do While (LenStr + LenTxt) > LenBuf
'увеличить размер буфера
LenBuf = 1.5 * LenBuf
sTmp = sBuf
sBuf = Space$(LenBuf)
Mid$(sBuf, 1, Len(sTmp)) = sTmp
Loop
Mid$(sBuf, LenTxt + 1, Len(nStr)) = nStr
LenTxt = LenStr + LenTxt
End If
End Sub
'возврвщаем свойство - строка
Public Property Get Str() As String
Str = Space$(LenTxt)
Mid$(Str, 1, LenTxt) = sBuf
End Property
'очистка строки
Public Sub Cls()
LenBuf = 255
LenTxt = 0
sBuf = Space$(LenBuf)
End SubПолученный в виде строки код записывается в нужном месте с помощью метода innerHTML. Ниже приведён фрагмент кода, демонстрирующий данный подход. Строка записывается в 'Div' элемент, к которому обращаются по его уникальному идентификатору 'GuideData'. Этот элемент уже существует в документе т.к. был загружен ранее.
Set mStr = New clsAppendString
Keys(1) = "Классический"
Keys(2) = "Градации серого"
Keys(3) = "Оранжевый"
With mStr
.Add "<TABLE id=TabStyle border=0 cellPadding=0 cellSpacing=0>"
For lC = 1 To 3
.Add "<TR><TD style=""width: 16px; "
.Add "border-right: solid 0px black;"" id=""opt_"
.Add lC & """ class = ""Unsel"" Sel=""1"" Grp=""opt_"" Num="""
.Add lC & """>"
.Add "<SPAN id=""imgopt" & lC & """ class=imgopt2_n>"
.Add "</TD><TD style=""border-left: solid 0px black; "
.Add "padding-left: 4px;"" id=""styl"
.Add lC & """ class = ""Unsel"" Sel=""1"" Grp=""styl"" Num="""
.Add lC & """ Add=""0"">"
.Add Keys(lC) & "</TD>"
Next
.Add "</TABLE>"
Dim mDiv As MSHTML.HTMLDivElement
Set mDiv = iDoc.All.GuideData
mDiv.innerHTML = .Str
End WithИспользование CSS
Технология каскадных таблиц стилей - css предназначена для определения того, как будет выглядеть html документ. Таким образом, использование разных css файлов с одним документом позволяет менять его внешний вид. Единственное, что требуется - указать какой файл использовать.
iDoc.getElementsByTagName("LINK").Item(0).href = "classic.css"При оформлении внешнего вида пользовательского интерфейса используется множество решений:
- меняется цветовая схема
- могут меняться размеры расположение элементов
- изменяются шрифты и графические элементы
Каскадные таблицы стилей созданы как раз для этого.
Есть одна особенность, которую необходимо учитывать, разрабатывая программу. При оформлении пользовательского интерфейса часто используются изображения. Было бы естественно использовать тег img. Например: <img src="картинка.gif">. Но если необходимо изменять это изображение в зависимости от текущего стиля, то желательно указать путь к картинке в css файле. Например: background-image: url(opt1_classic.gif);
Настройки WebBrowser не являются уникальными для каждой программы. Если пользователь при работе в Internet Explorer отключил отображение рисунков, то во всех программах, использующих этот элемент управления, не будут отображаться изображения. Чтобы исправить эту ситуацию необходимо при запуске программы проверять значение в разделе реестра 'SOFTWARE\Microsoft\Internet Explorer\Main' параметр 'Display Inline Images". Для отображения рисунков он должен иметь значение "yes". При необходимости можно изменить значение этого параметра, а по завершении работы программы вернуть начальное значение.
Демонстрационный проект
| |
 | |
В демонстрационном проекте реализованы следующие вещи:
| |
Скачать исходник. | |
html_sample