TEdgeBrowser VCL component in RAD Studio 10.4 Sydney

RAD Studio 10.4 With New VCL TEdgeBrowser Component

RAD Studio 10.4 is going to bring support for working with web content through a new Chromium-based Edge browser control in VCL applications. The new TEdgeBrowser component wraps the Microsoft WebView2 component. TEdgeBrowser supersedes TWebBrowser, which uses the Internet Explorer WebBrowser browser control. However, TWebBrowser remains in the VCL component set, with some notable changes (see below).

TEdgeBrowser Requirements

Because TWebBrowser uses the Operating System-supplied Internet Explorer WebBrowser browser control there is no preparation required – it will work wherever Windows has the Internet Explorer control available. On the contrary, Microsoft Edge is not an Operating System component (not yet, anyway). Also, it is still not officially released. Because of this, you need to ensure that these items are installed on your computer before you can run an application that uses it:

  • The Microsoft Edge Chromium-based browser is currently available from https://www.microsoftedgeinsider.com/download (Canary channel version whilst the WebView2 SDK is in pre-release). 
  • The WebView2 control, currently available through NuGet at https://www.nuget.org/packages/Microsoft.Web.WebView2 or via a matching GetIt package manager

For the time being, Edge Canary is requirement applies to you compiling and executing the application on your development machine and also on the end user’s machine. As for the WebView2, all you need id a DLL that currently needs to be distributed along with your program. Both are Microsoft requirements and binaries, and they might change with the official release.

Once you have installed Edge (Canary version) to install the required Microsoft WebView2 package you open the GetIt package manager window in the RAD Studio 10.4 IDE and search for the corresponding entry, as indicated below:

 TEdgeBrowser components

Once you have installed the package, it will copy in your RAD Studio redistributable folder the DLL required by your application, one for 32-bit apps and one for 64-bit apps (both are called WebView2Loader.dll). You will need to copy this DLLs in your build target folders or someone on the search path.

Using the Edge Browser component

You use the TEdgeBrowser component in much the same way as you would use a TWebBrowser, indeed a number of methods and properties are similar to those of TWebBrowser’s methods and properties. Drop the component on a VCL form and size it as appropriate, as in the simple case below:

 Delphi VCL TEdgeBrowser software components

To navigate to a URL simply pass that URL to the Navigate method:

   EdgeBrowser1.Navigate('https://www.embarcadero.com');

That’s all, run the application and you see the following output:

 RAD Studio VCL TEdgeBrowser new component

And What About TWebBrowser?

The VCL TWebBrowser component still performs the same job as always, which is to render web content using the Internet Explorer WebBrowser browser control. However, in addition to this default behavior it has a new property, SelectedEngine, which can be used to ask it to use the newer Edge (Chromium) WebView2 browser control instead if available on the target machine. 

The advantage is to have a single browser control that can work on all Windows computers, and also a higher level of compatibility (in terms of browser component of methods and properties used) with the existing code. The advantage of the new Edge control is you have more power to customize this new engine.