Доступ к документной модели tWebBrowser

В Internet Explorer реализовано расширение HTML, называемое Dynamic HTML (DHTML). Эта модель представляет все элементы HTML-документа в виде набора коллекций объектов, доступных для изменения. Скрипты, встроенные в страницы и приложения и имеющие доступ к этим коллекциям, могут находить и изменять их элементы, а также добавлять новые, причем изменения будут немедленно отражены в окне TWebBrowser. Иерархическое объектное представление HTML-объектов называется DOM (Document Object Model).

Программисту DOM в элементе управления IE ActiveX доступна в виде набора COM-интерфейсов. Отправной точкой для доступа к ней служит свойство:

property Document: IDispatch;

Это свойство обеспечивает доступ к интерфейсу IHtmlDocument2, позволяющему работать с содержимым документа. Для получения интерфейса необходимо запросить его при помощи оператора as:

var

Document: IHtmlDocument2;

...

Document := WebBrowser.Document as IHtmlDocument2;

Документ в DOM представляет собой набор коллекций элементов. Для доступа к коллекции служит интерфейс IHtmlElementCollection, а к элементу коллекции — IHtmlElement. Следующий пример выводит все тэги, имеющиеся в текущем документе и текст внутри тэгов:

procedure TForm1.Button1Click(Sender: TObject); var HtmlDocument: IHtmlDocument2; HtmlCollection: IHtmlElementCollection; HtmlElement: IHtmlElement; I: Integer; begin Memo1.Lines.Clear; HtmlDocument := WebBrowser.Document as IHtmlDocument2; HtmlCollection := HtmlDocument.All; for I := 0 to HtmlCollection.Length - 1 do begin HtmlElement := HtmlCollection.Item(i, 0) as IHtmlElement; Memo1.Lines.Add(HtmlElement.TagName + ‘ ‘ + HtmlElement.InnerText); end;

Кроме того, возможно динамическое создание документов в памяти, без необходимости записи их на диск и вызова метода Navigate с протоколом ‘file://’

Проиллюстрируем работу с документной модели TWebBrowser на конкретном примере. Расположим на форме компоненты TWebBrowser, TMemo и три TButton, а потом создадим следующие обработчики событий:

uses MSHTML, ActiveX;

procedure TForm1.FormCreate(Sender: TObject); begin // Инициализируем пустой документ в TWebBrowser WebBrowser1.Navigate(‘about:blank’); end;

procedure TForm1.Button1Click(Sender: TObject); var Document: IHTMLDocument2; V: OleVariant; begin // Этот метод переписывает в TWebBrowser HTML- // документ из TMemo Document := WebBrowser1.Document as IHtmlDocument2; V := VarArrayCreate([0, 0], varVariant); V[0] := Memo1.Text; Document.Write(PSafeArray(TVarData(v).VArray)); Document.Close; end;

procedure TForm1.Button3Click(Sender: TObject); var Document: IHTMLDocument2; Collection: IHTMLElementCollection; Element: IHTMLElement; I: Integer; begin // Этот метод модифицирует текст документа при помощи DHTML Document := WebBrowser1.Document as IHtmlDocument2; Collection := Document.all; Collection := Collection.Tags(‘BODY’) as IHTMLElementCollection; Element := Collection.Item(NULL, 0) as IHTMLElement; Element.InnerText := ‘Modifyed by DHTML’; end;

procedure TForm1.Button2Click(Sender: TObject); var Document: IHTMLDocument2; begin // Этот метод позволяет просмотреть в TMemo код HTML // документа из TWebBrowser Document := WebBrowser1.Document as IHtmlDocument2; Memo1.Text := (Document.all.Item(NULL, 0) as IHTMLElement).OuterHTML; end;

В Memo1.Lines запишем такой текст:

<HTML> <HEAD> <TITLE>Hello World</TITLE> </HEAD> <BODY> Hello again ! </BODY> </HTML>

Итак, мы получили возможность динамически создавать HTML-документы и предоставлять их пользователю.

image

Компонент находится на вкладке Additional.

Компонент отображает на форме графическое изображение и обеспечивает работу с ним.

Основные cвойсва: Picture — содержит отображаемый графический объект; Proportional — будет ли картинка изменяться пропорционально при увеличении размеров; Stretch — должны ли изменяться размеры изображения, подгоняясь под размеры компонента. Учтите, что изменение размеров изображения приведет к его искажению, если соотношение сторон графического объекта и компонента TImage не одинаково; Transparent — должен ли быть цвет фона изображения прозрачным, чтобы сквозь него было видно нижележащее изображение; Center — должно ли изображение центрироваться в поле компонента, если его размеры меньше размеров поля. При значении False изображение располагается в верхнем левом углу поля. Свойство не действует, если AutoSize установлено в true или если Stretch установлено в true и Picture содержит не пиктограмму; Center — Указывает, изменяется ли автоматически размер компонента, подстраиваясь под размер изображения. По умолчанию False - не подстраивается.

Свойство Picture типа TPicture содержит отображаемый графический объект типа битовой матрицы, пиктограммы, метафайла или определенного пользователем типа. Свойство Canvas позволяет создавать и редактировать изображения.

TPicture является контейнером любого графического объекта TGraphic, тип которого указывается свойствомGraphic.В зависимости от типа хранимого объекта - битовой матрицы, пиктограммы, метафайла, определены соответствующие свойства Bitmap, Icon или Metafile, указывающие на графический объект.

Для того, чтобы загрузить изображение, нужно найти свойство Picture и нажать на кнопку  . В появившемся окне нажать Load и выбрать изображение.

Компонент Delphi RadioButton - это "радиокнопка", и как следует из названия, служит для "переключения каналов", как и в настоящем радиоприёмнике. Это значит, если выбран один из компонентов Delphi RadioButton, то с остальных компонентов выбор автоматически снимается. Получается, что в данный момент может быть выбран только один из группы компонентов Delphi RadioButton.    Если в начальный момент ни один из компонентов не выбран, то достаточно сделать такой выбор - щёлкнуть по одному из компонентов, и в дальнейшем можно только "переключать" компоненты, снять выбор уже невозможно. Хотя нет, есть способ - программно!     Компонент Delphi RadioButton состоит из круглого окошка и текстовой строки. В окошке появляется отметка выбора данного компонента, текстовая строка поясняет его смысл. За изменение текстовой строки отвечает свойство Caption. Основное же свойство компонента Delphi RadioButton -Checked (т.е. "выбрано") типа Boolean, доступное как для чтения, так и для записи. У выбранного компонента свойство Checked равно True.

На данной Форме    RadioButton1.Checked = True;    RadioButton2.Checked = False;    RadioButton13Checked = False; Для выбора, например, компонента RadioButton2 достаточно написать    RadioButton2.Checked := True;// отметка с RadioButton1 будет снята автоматически. Для снятия выбора нужно в программе написать    RadioButton1.Checked := False;// теперь ни один из компонентов не выбран. Вручную этого достичь невозможно.

   Основным событием компонента Delphi RadioButton является, естественно, OnClick, то есть щелчок мышкой. В этот момент могут быть выполнены процедуры, соответствующие выбору этого компонента. ПРИМЕР. Пусть у нас есть несколько компонентов RadioButton, и пользователь производит выбор одного из них. Затем, при нажатии кнопки, нужно проанализировать выбор пользователя, и выполнить соответствующую этому выбору процедуру. Будем исходить из предположения, что компоненты имеют имена RadioButton1, 2, 3 и так далее, а соответствующие процедуры proc1, 2, 3 и так далее.    Введём глобальную переменную, принимающую значение 1, 2, 3 и так далее, соответствующее выбранному компоненту RadioButton. Присваивать значение будем по событию OnClick. Соответственно, потребуется столько обработчиков этого события, сколько компонентов RadioButton у нас в программе.    Однако, это затратно и утомительно, плодить множество аналогичных обработчиков. Ведь, использовав параметр Sender, определённый в обработчике события OnClick, можно обойтись и одним обработчиком! Только нужно выбрать его как обработчик события OnClick для всех компонентов RadioButton. Получается такая программа, состоящая из двух процедур: var   Form1: TForm1;   V: Integer; implementation {$R *.dfm} procedure TForm1.RadioButton1Click(Sender: TObject); begin with (Sender as TRadioButton) do   V:=StrToInt(copy(Name, 12, Length(Name)-11)); end; procedure TForm1.Button1Click(Sender: TObject); begin   case V of    1: proc1;    2: proc2;    3: proc3;    4: proc4;    5: proc5;    6: proc6;   end; end;

Компонент Delphi Chart располагается на странице Additional Палитры компонентов. Его разработал Дэвид Бернеда. Это богатый возможностями, очень мощный компонент, позволяющий строить двух и трехмерные красивые диаграммы на основе разнообразных данных. Он имеет большое количество разнообразных свойств. Часть из них, в свою очередь, являются объектами и обладают собственными свойствами.

Значок на Палитре компонентов имеет вид (рис. слева). Расположенный  компонент на форме будет выглядеть подобно рисунку снизу:

Создать диаграмму можно, также с помощью мастера. Для запуска мастера из меню запускаем File -> New -> Other  и попадаем в окно New Items, там на вкладке Business выбираем TeeChartWisard. Мастер потребует уточнения, на основе базы данных или нет будет строиться график. Пусть он генерируется программой (переключатель Non Database Chart - не на основе базы данных). Следующий шаг - выбор вида диаграммы, она может быть двух или трех мерной (выбор переключателя 2D или 3D). Нажав Next определяем нужна ли нам легенда (опция Show Legend), желтые подсказки, рядом с диаграммой, включает флажок Show Marks. Нажав на кнопку Finish мы получим диаграмму, заполненную случайно сгенерированными числами.

Настройка свойств компонента Chart происходит в редакторе Editing Chart. Вызвать его можно двойным щелчком по компоненту или используя свойство SeriesList Инспектора объектов.

Основные параметры диаграммы определяются на вкладке Chart (диаграмма), она, в свою очередь, состоит из набора дополнительных панелей.

Панель Ряд данных (Series) важная, в ней можно добавить на один график несколько диаграмм с помощью кнопки Add. При этом над значениями данных можно выполнять операции задаваемые во вкладке Series -> Data Source выбрав function выбрав функцию из списка function.

Панель Общие (General) содержит следующие элементы управления:

• кнопка Export - экспорт изображения в файл,

• кнопка Print Preview - предварительный просмотр и печать диаграммы,

• панель Zoom - масштабирование,

• панель AllowScroll - отвечает за прокрутку изображения.

Средства панели Оси (Axis) регулируют настройку координатных осей, заголовков, их масштаб, шаг пунктирной сетки и многое другое.

Панель Заголовков (Titles) помогает оформить заголовки.

Панель Легенда (Legend) отвечает за внешний вид и содержание легенды.

Панель Панель (Panel) задает оформление панели основы: цвет и форму границы панели (можно сделать так, что диаграмма будет расположена на панели имеющей градиентную заливку).

Панель Страницы (Paging), позволяет разделить диаграммы на страницы. Для этого необходимо в поле (точки на странице) Points per Page подобрать соответствующее значение.

Панель Границы (Walls) отвечает за цвет и границы  диаграммы.

Панель 3D дает возможность настройки 3D эффектов, (изменение масштаба, положения в пространстве), простым передвиганием ползунков управления.

Вкладка Ряды данных (Series) отвечает за оформление каждого ряда данных (графиков добавленных с помощью вкладки Chart). Текущий ряд данных задается с помощью раскрывающегося списка. Наиболее важная панель Источник данных данных (Data Sourece). В ней можно выбрать отказ от генерации значений (No Data), создать случайные  значения (Random Values) или сформировать значения, как результат применения функции (список Function) к значениям рядов.

Компонент Delphi PaintBox находиться на странице System Палитры компонентов. Он представляет из себя простое окно с канвой, где можно рисовать произвольные изображения. Графические инструменты  содержаться в свойствах Font, Brush и Pen.  Канва (холст) содержится в свойстве Canvas компонента. Само рисование программируется в обработчике события onPaint.

Для примера, расположим компонент PaintBox на форму. Ширину (Width) я задал  353 пиксела, а высоту (Height) - 337. Обработчик onPaint:

procedure TForm1.PaintBox1Paint(Sender: TObject);

begin

with PaintBox1, canvas do

begin

Brush.Color := clRed;

Pie(12,100,140,280,12,100,140,280);

Pen.Width := 4;

Pen.Color := clGreen;

Pen.Style := psDash;

Rectangle(120,60,Width,Height);

Pen.Width := 1;

Pen.Color := clRed;

Polyline([Point(40, 10), Point(20, 60), Point(70, 30),

Point(10, 30), Point(60, 60), Point(40, 10)]);

TextOut(75,20,'Здесь может быть Ваш текст!');

end;

end;

Первая строка задает цвет заполнения:

Brush.Color := clRed;

Вторая рисует часть эллипса:

Pie(12,100,140,280,12,100,140,280);

Следующие строки задают параметры пера (какая будет окантовка у фигур), ширину, цвет и стиль линии:

Pen.Width := 4;

Pen.Color := clGreen;

Pen.Style := psDash;

Но в данном случае мы будем видеть одну сплошную линию, так как при толщине более одного пиксела стиль линий будет psSolid (сплошной).

За прорисовку квадрата отвечает следующая строка:

Rectangle(120,60,Width,Height);

Красную звездочку рисует нижеследующая команда:

Polyline([Point(40, 10), Point(20, 60), Point(70, 30),

Point(10, 30), Point(60, 60), Point(40, 10)]);

За вывод текста отвечает последняя строка:

TextOut(75,20,'Здесь может быть Ваш текст!');

Попробуйте для тренировки различные значения параметров.

 

2. СПЕЦИАЛЬНАЯ ЧАСТЬ