How To Use The Microsoft Edge Web Browser In A C++ App

In this post, you’ll get answers to these questions:

• How can I easily create an FMX application which contains a web view based on the Microsoft Edge browser?
• How can I add a web browsing capability to my application?
• How can I use EdgeBrowser in FireMonkey applications?
• Can I use the latest WebView 2 to browse the web with my own C++ Builder FMX app?
• How can I create an FMX application with the latest Microsoft-supported web browsing technologies?

By learning how to use the Microsoft Edge Web Browser in a C++ app, it will help you to easily build C++ applications.

In C++ Builder, you can easily develop a web browser or add web browsing ability to your applications. That means users can view web content from within your program using Web Browser components without needing to open or swap to an external web browser. Developing a full Web Browser from the ground up may take a lot of time, instead of this, there are many ready-made components and libraries that we can use in C++ development. In RAD Studio, C++ Builder11 there is a new feature called Edge – WebView2 framework which use the Edge ‘Canary’ browsing standards. It has many new features compared to the old (and now defunct) Internet Explorer and is much more compatible than previous web browsers and other libs or components.

Embarcadero released the latest RAD Studio 11 Alexandria! This release introduces several new features, enhancements, and quality updates in key areas including: Provision apps for Windows 11, Compile for Android API 30, Compile for macOS M-series (Apple Silicon) processors, Design on high-DPI 4k+ screens, View VCL Styles in design time, New & modernized VCL components, Use enhanced remote desktop support to collaborate remotely and many new enhancements and bug fixes.

See What’s New in RAD Studio 11
Download RAD Studio 11 Now

One of the features is a renewed FMX WebBrowser with support for different web engines including Microsoft’s WebView 2 control (Edge Chromium) in the WebBrowser component. Now both VCL and FMX Windows applications can support WebView 2 control using the latest Microsoft’s Edge Engine. You can enhance your applications with Microsoft Edge compatibility and all you need is the latest WebView2. In VCL applications, we have a new WebBrowser component which is called EdgeBrowser (TEdgeBrowser) first release in 10.4.x versions. RAD Studio 11 also has the same components but with some great improvements.

The latest RAD Studio comes with the WebBrowser with a Web Engine option. In Firemonkey applications EdgeBrowser is now provided as an engine choice in the WebBrowser property. There is no EdgeBrowser in FMX applications, it is integrated as an engine into WebBrowser. We have more options to choose web engine, which is great. Note that its Edge property works on Windows only.

How do I install the WebView2 Microsoft Edge browser view component?

1. Install “Edge Canary” version in Windows
2. Download “Edge SDK” from the GetIt menu in RAD Studio
3. Download the MS WebView2 latest version from here  
4. Unzip and open the downloaded package
5. Copy required files to your Debug or Release output directory
6. If you have a 32bit project copy WebView2Loader.dll from bin/x86
7. Or if you have a 64bit project copy WebView2Loader.dll from bin/x64

How to run the WebBrowser (TWebBrowser) FMX Example with Microsoft Edge option

1. Open the sample example from;

C++Builder: “C:\Users\Public\Documents\Embarcadero\Studio\22.0\Samples\CPP\Mobile Snippets\WebBrowser“

Delphi: “C:\Users\Public\Documents\Embarcadero\Studio\22.0\Samples\Object Pascal\Mobile Snippets\WebBrowser”

2. Copy 32 or 64 bit WebView2Loader.dll to your output Debug or Release directories of this example as described above.

3. Select WebBrowser and set WindowsEngine to EdgeOnly.

4. Compile and run the Example

How to use WebBrowser (TWebBrowser) with the Microsoft Edge Engine in FMX Applications

1. We can create a new FMX application or we can enhance your existing application with the latest TWebBrowser component. Just drag it to your form, we can drag it into a specific area like Panel, Rectangle, Groupbox, or into a Tab Item. We can set its Align property to Client that can resize automatically by the resize of the application window.

One great new feature in the latest RAD Studio 11 is the WebBrowser (TWebBrowser) FMX component has a WindowsEngine property which allows you to select the Web Browsing Engine with the options EdgeIfAvailable, EdgeOnly, IEOnly, None. The Edge options are only available on Windows.

2. Set the application to Debug or Release mode. Compile to generate Debug or Release output directories. Copy the required WebView2 files to your Debug or Release output directory. If you have a 32bit project copy WebView2Loader.dll from bin/x86 or if you have a 64bit project copy WebView2Loader.dll from bin/x64 as described above.

3. Drag and drop an Edit (TEdit) box and a Button (TButton) to top. Add URL (i.e. https://www.embarcadero.com) to your edit box text. Drop EdgeBrowser component UI to your form from the component palette, and add this line below on your mouse click

or you can directly navigate your url as below;

Don’t forget to copy 32 or 64 bit WebView2Loader.dll to your output directory.

For more details on the Edge view control please read this post.

C++ Builder is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. It is also easy for beginners to learn with its wide range of samples, tutorials, help files, and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for cross-platform UIs.

There is a free C++ Builder Community Edition for students, beginners, and startups; it can be downloaded from here. For professional developers, there are Professional, Architect, or Enterprise versions of C++ Builder and there is a trial version you can download from here.