C++ComponentsLanguage FeatureLearn C++

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

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? Let’s answer these questions.

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.

How To Use The Microsoft Edge Web Browser In A C++ App C++ Builder 11 splash screen

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.
How To Use The Microsoft Edge Web Browser In A C++ App - view in the IDE

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.

close

Oh hi there 👋
It’s nice to meet you.

Sign up to receive awesome C++ content in your inbox, every day.

We don’t spam! Read our privacy policy for more info.


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial

Free C++Builder Community Edition

About author

33+ years of coding with more than 30+ programming languages, mostly C++ on Windows, Android, Mac-OS, iOS, Linux and some other operating systems. Dr. Yilmaz Yoru was born in 1974, Eskisehir-Turkey. He graduated from the department of Mechanical Engineering of Eskisehir Osmangazi University in 1997. One year later he started to work in the same university as an assistant. He received his MSc and PhD degrees from the same department of the same university. He has married and he is a father of a son. Some of his interests are Programming, Thermodynamics, Fluid Mechanics and Artificial Intelligence. He also likes the graphical 2D & 3D design and high-end innovations.
Related posts
C++ComponentsDatabaseIntroduction to C++Language FeatureLearn C++

Get To Know The Powerful C++ Data Bindings In Windows Apps

C++Introduction to C++Language FeatureLearn C++

How to Create a New Windows FMX Static Library In C++

C++C++11C++14C++17Introduction to C++Learn C++

How To Use C++ front() And back() Methods Of Vectors

C++Generic ProgrammingIntroduction to C++Language FeatureLearn C++

5 Things You Need To Know About Optimization In C++ Builder

en_USEnglish