Building a VCL Forms Web Browser Application

Go Up to How To Build VCL Forms Applications

Creating the Web browser application consists of the following steps:

1. Create a VCL Form.
2. Add a TWebBrowser component to the form.
3. Add controls to enter a URL, launch and navigate using the browser.
4. Write the code for launching and navigating.
5. Run the application.

Design the User Interface

1. Choose File > New > Other > Delphi Projects or C++Builder Projects and double-click the VCL Forms Application icon. The VCL Forms Designer is displayed.
2. From the Win32 page of the Tool Palette, place a TToolBar component on the form.
3. From the Standard page of the Tool Palette, place three TButton components and a TEdit on the ToolBar component.

   
   
   

4. Set the Caption property of each TButton as follows: Back, Forward and Home.
5. Select the Edit box on the Form Designer, go to Object Inspector and select alClient for the Align property.
6. From the Internet page of the Tool Palette, place a TWebBrowser component on the form.
7. Select the TWebBrowser component on the Form Designer, go to Object Inspector and select alClient for the Align property.

Note: If the window is not large enough to display a browser page in its entirety, the TWebBrowser component adds scrollbars when you run the application and launch the browser window.

After completing these steps, the form should be similar to the following picture:

Add the Code that Uses the WebBrowser

1. From the Object Inspector create event handlers for the OnClick event of each TButton component, and the OnChange event of the TEdit component.
2. Add the following code to the OnClick event handler of the first Button :

In Delphi:

procedure TForm1.Button1Click(Sender: TObject);
begin
  WebBrowser1.GoBack;
end;

In C++:

void __fastcall TForm1::Button1Click(TObject *Sender) {
	WebBrowser1->GoBack();
}

3. Add the following code to the OnClick event handler of the second Button :

In Delphi:

procedure TForm1.Button2Click(Sender: TObject);
begin
  WebBrowser1.GoForward;
end;

In C++:

void __fastcall TForm1::Button2Click(TObject *Sender) {
	WebBrowser1->GoForward();
}

4. Add the following code to the OnClick event handler of the third Button :

In Delphi:

procedure TForm1.Button3Click(Sender: TObject);
begin
  WebBrowser1.GoHome;
end;

In C++:

void __fastcall TForm1::Button3Click(TObject *Sender) {
	WebBrowser1->GoHome();

5. Add the following code to the OnChange event handler of the TEdit component:

In Delphi:

procedure TForm1.Edit1Change(Sender: TObject);
begin
  WebBrowser1.Navigate(Edit1.Text);
end;

In C++:

void __fastcall TForm1::Edit1Change(TObject *Sender) {
	WebBrowser1->Navigate2(Edit1->Text);
}

Run the application

1. Choose Run > Run to build and run the application.
2. Enter a URL to a Web page in the edit box. The browser launches in the TWebBrowser window.

The result at run time:

See Also

• VCL Overview
• Building a VCL Forms Application
• FireMonkey Mobile Tutorial: Using the Web Browser Component (iOS and Android)