Table of Contents
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
In this guide, you will learn how we use Telegram messenger is in sending you a user identifier so you can use your Delphi Windows and Mobile apps seamlessly.
Head over and check out the full WINSOFT WebView for FireMonkey component.
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
What about FMX TWebBrowser?!
This article was written in 2020 and was focusing on the particular component it describes as it was at the time. As you rightly point out there is an FMX-based TWebBrowser which now incorporates the relevant browser technology for each platform.