Az alkalmazás indulásakor betöltjük a mappában elhelyezett Test.htm HTML lapot. Ehhez a TWebBrowser komponens Navigate2 metódusát használjuk, annak első paraméterében megadva a betöltendő URL-t.
var Url, Flags, TargetFrameName, PostData, Headers: OleVariant;
begin
Url := ExtractFilePath(Application.ExeName) + 'Test.htm';
WebBrowser1.Navigate2(Url, Flags, TargetFrameName, PostData, Headers);
end;
Az alkalmazás űrlapjának bal oldalán található a TWebBrowser komponens, mely a HTML lapot megjeleníti, jobb oldalon viszont két komponenst találunk. A ComboBox komponensben azok a karakterláncok vannak, amelyeket a HTML lap SELECT kontroljában elhelyeztünk. A ComboBox kiválasztásának módosításakor a HTML lapon található elemválasztó kontrolban is az azonos indexű elem lesz kiválasztva. Ehhez a SetSelectText metódust hívjuk meg.
A Form nyomógombjával a HTML lap mindkét kontroljának aktuális szövege lekérdezhető. Ezt a műveletet a GetControlValues metódus meghívásával végezzük el.
A harmadik művelet, hogy a TEdit komponens szövegének változásakor a HTML lap szövegmezőjének tartalma is változik. Erre szolgál a SetInputText eljárás. Lássuk a műveleteket sorban.
SetSelectText eljárás
Első lépésben lekérdezzük a HTML lap dokumentumán keresztül elérhető kontrolokat.
OleCheck(WebBrowser1.Document.QueryInterface(IID_IHTMLDocument2, WebDoc));
elements := WebDoc.Get_all;
Ezt az MSHTML egység IHTMLDocument2 objektumának segítségével tehetjük meg. Következő lépés, hogy lekérdezzük a SELECT kontrol objektumát (a HTML lapon a neve oSelect).
pDispatch := elements.item('oSelect', 0);
OleCheck(pDispatch.QueryInterface(IID_IHTMLSelectElement, Input));
Majd beállítjuk a kijelölt elem indexét a ComboBox komponensben kijelölt elem indexére.
Input.selectedIndex := Index;
A SELECT kontrolt az IHTMLSelectElement interfész reprezentálja.
SetInputText eljárás
Ebben az eljárásban a szövegmező tatalmát módosítjuk az Edit komponensbe történő bevitelkor. Az eljárást így a szövegmező Change eseményének kezelésekor hívjuk meg.
Itt is a fenti módszert használjuk a kontrol elérésére, csak itt az oText nevű elemet keressük.
pDispatch := elements.item('oText', 0);
OleCheck(pDispatch.QueryInterface(IID_IHTMLInputElement, Text));
Text.value := Value;
A szövegmező kontrolt az IHTMLInputElement interfész reprezentálja.
GetControlValues eljárás
A lekérdezéskor a webes kontrolok adatait olvassuk ki, így a lekérdezett objektumok property-jeit kapjuk meg.
pDispatch := elements.item('oText', 0);
OleCheck(pDispatch.QueryInterface(IID_IHTMLInputElement, out1));
edit1.Text := out1.value;
A szövegmező esetén a value property értékét kérdezzük le, míg a SELECT kontrol esetében a SelectedIndex property értékét.
pDispatch := elements.item('oSelect', 0);
OleCheck(pDispatch.QueryInterface(IID_IHTMLSelectElement, out2));
comboBOx1.ItemIndex := out2.selectedIndex;