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.

procedure TFormMain.SpeedButtonCaptureClick(Sender: TObject);
begin
  if CapturePreviewStream = nil then
    CapturePreviewStream := TMemoryStream.Create
  else
    CapturePreviewStream.Clear;
  FWebView.CapturePreview(pfPng, CapturePreviewStream, CapturePreviewCompleted);
end;
procedure TFormMain.CapturePreviewCompleted(Sender: TObject);
const FileName = 'preview.png';
begin
  CapturePreviewStream.SaveToFile(FileName);
  FreeAndNil(CapturePreviewStream);
  Open(FileName);
end;

• 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.