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 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 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:

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:

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:

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.

Conclusion

I'm very happy RAD Studio is soon going to introduce the TEdgeBrowser component in the 10.4 release, but this is not the only new VCL control coming. We have been focusing a lot on our Windows component library for 10.4, and I'm happy about the outcome. More information on the VCL other features for 10.4 soon.

If you have update subscription, one of the perks is accessing beta builds of upcoming releases. There’s still time to join our beta program for 10.4!

This is a preview of an upcoming release of RAD Studio. There can always be last-minute bugs or changes. Nothing here is final until the release is officially made available.