RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
C++DelphiTech Partner

Powerful Chromium Based WebView Component To Host Web Content In Your Delphi/C++ Builder FireMonkey Apps

Intro

RAD Studio 10.4 Sydney brings support for working with web content through the Chromium-based Edge WebView2 browser control in VCL applications via the new TEdgeBrowser component.

Embarcadero DocWiki

But, this is for only the VCL applications currently. So, what if you want to utilize this feature in your FireMonkey application?! Problem solved! We have the WebView for FireMonkey component by WINSOFT which offers you to host web content in your applications.

Specifications

  • Uses Microsoft WebView2 API
  • Supports Windows 32 and Windows 64
  • Available for Delphi/C++ Builder 6 – 10.4
  • Requires Microsoft Edge (Chromium) version 84.0.515.0 or higher

Installation

After downloading the WebView component you should install the component. Here you can follow the installation video.

Moreover, the WebView2Loader dynamic-link library should be with the executable file. You can find that dynamic-link library from the Library folder within the installed component files. Because the WebView2 is the part of the Microsoft WebView2 SDK.

Overview

After configuring and installing, you can just create a FireMonkey application and drop the TFWebView component from the System category on the Palette.

Using the TFWebView is similar to TWebBrowser or TEdgeBrowser. 

Let’s start investigating the features of the TFWebView component.

  • You can give the Uniform Resource Identifier (URI) using the Uri property.
  • With the Zoom property, you can control the view.
    • FWebView.Zoom := FWebView.Zoom – 0.1;
    • FWebView.Zoom := FWebView.Zoom + 0.1;
  • You can fetch the web document title by this code:
    • Caption := ‘WebView – ‘ + FWebView.DocumentTitle;
  • CapturePreview procedure takes a screenshot of the TFWebView component to save the screenshot you can just use the TMemoryStream. Here is a use case.
  • TFWebView comes with some amazing functionalities like posting a web message to an HTML document. 
  • Or, showing HTML in memory, like you give the HTML/CSS/JS code as a parameter of the ShowHtml procedure that then creates a document to you within the TFWebView. 
  • Moreover, you can manipulate the HTML document by executing JavaScript code, for instance fetching elements by Id and setting a new value. For this, you can utilize the ExecuteScript procedure.
  • Finally, the best feature is playing with the developer tools. For instance, using Browser methods, like executing the getVersion function. To use this option, you can call the CallDevTools procedure.

Be sure to check out part two of this post. In the next one, we will go through these given examples with a full explanation.

Head over and check out the full WINSOFT WebView for FireMonkey component.


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

About author

Software Developer | B.Tech-CSE at AUT | Delphi/C++ Builder Enthusiast | Microsoft Learn Student Ambassador | Microsoft Azure Certified | Udacity Alumni
Related posts
C++CodeRAD Studio

Learn About The Initialization Of Class Objects By Rvalues In C++ Windows Development

C++Delphi

Ultimate Compression Toolkit For Delphi And C++ Builder Developers

CodeDatabaseDelphi

Hit The Ground Running With Windows Native MongoDB Database Sample Apps For Delphi

C++DelphiRAD Studio

Beautiful Responsive Home Screen UI Templates For FireMonkey Available For Free Via GetIt In The IDE

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES