cObject
---cUIObject
------DfComUIObject
---------DfInPlaceComObject
------------DfComActiveXControl
---------------cComActiveXControl
------------------cComWebView2Ctrl
---------------------cBaseWebView2Browser
------------------------cWebView2Browser
---------------------------cBaseLocalControlHost
The Microsoft Edge WebView2 control allows you to embed web technologies (HTML, CSS, and JavaScript) in your Windows application. It can display full web pages loaded from the internet or from disk but it can also display small snippets of HTML. Extensive APIs are available for configuring the available options and for communication with the page.
WebView2 is a component provided by Microsoft that is based on the Edge technology, but installed separately. More information about availability can be found here: https://developer.microsoft.com/en-us/microsoft-edge/webview2/. Like Edge, it uses the Chromium engine that is nowadays used by most browsers.
The example below shows the browser component in its simplest form. It displays the web page configured via psLocationURL and acts as a full browser, allowing navigation around the website.
Object oWebView2Browser1 is a cWebView2Browser
Set Size to 78 228
Set Location to 3 2
Set peAnchors to anAll
Set psLocationURL to "https://support.dataaccess.com/"
Set pbBorderVisible to True
End_Object
This example shows how to display HTML from memory, with most default browser functionality disabled.
Object oWebView2Browser2 is a cWebView2Browser
Set Size to 78 228
Set Location to 3 2
Set peAnchors to anAll
Set pbBorderVisible to True
Set pbAreDefaultContextMenusEnabled to False
Set pbAreBrowserAcceleratorKeysEnabled to False
Set pbAreDevToolsEnabled to False
Set pbAreDefaultScriptDialogsEnabled to False
Set pbIsStatusBarEnabled to False
Set pbIsZoomControlEnabled to False
Procedure OnCreate
Send NavigateToString @"
<h1>Small HTML Snippet</h1>
<p>This demonstrates the cWebView2Browser control by displaying a small piece of HTML.</p>"
End_Procedure
End_Object
Several events are available during the navigation operations. A unique ID identifies to which navigation operation the event belongs.
1. OnNavigationStarting
WebView2 starts to navigate to the specified URL. The host application can disallow the navigation by setting bCancelNavigation to True. On cancelling or failure it will skip directly to OnNavigationCompleted.
2. OnSourceChanged
The source changed to a new URL. This does not have indicate that a network request happened.
3. OnContentLoading
WebView starts loading content for the new page.
4. OnHistoryChanged
The navigation caused the history to be updated.
5. OnNavigationCompleted
The navigation has completed and the new content has been loaded.
The virtual host feature of WebView2 allows the definition of a virtual host name (internet address) to be mapped to a local folder on disk. Resources loaded from this URL will actually be loaded from this folder. Loading resources directly from disk using file:// is subject to many security restrictions in browsers, where loading data from a virtual host does not have these restrictions. The example below shows how to map https://apphtml.asset/ to the AppHtml folder and how to load index.html from that folder.
Object oWebView2Browser1 is a cWebView2Browser
Set Size to 103 243
Set Location to 3 4
Procedure OnCreate
String sPath
Get psAppHtmlPath of (phoWorkspace(ghoApplication)) to sPath
Send SetVirtualHostNameToFolderMapping "apphtml.asset" sPath OLECOREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_ALLOW
Send Navigate "https://apphtml.asset/index.html"
End_Procedure
End_Object
WebView2 provides two methods to communicate with the page inside the browser. By executing custom JavaScript or using the message API.
JavaScript can be executed immediately using ExecuteScript and on page load using AddScriptToExecuteOnDocumentCreated. The ExecuteScript API can also be used to query values from the page, since the result of the script is returned in the OnExecuteScriptFinished event. The execution id can be used to determine to which script a result belongs.
Object oWebView2Browser1 is a cWebView2Browser
Set Size to 79 243
Set Location to 6 3
Procedure OnCreate
Send NavigateToString @"
<html>
<head>
<title>WebView Test Page</title>
</head>
<body>
<h1>WebView Test Page</h1>
</body>
</html>"
End_Procedure
Procedure OnExecuteScriptFinished UBigInt iExecutionId Integer iErrorCode String sResult
Send Info_Box sResult "Result:"
End_Procedure
End_Object
Object oDocTitleButton is a Button
Set Size to 14 70
Set Location to 89 6
Set Label to 'Document Title'
// fires when the button is clicked
Procedure OnClick
UBigInt iExecutionId
Get ExecuteScript of oWebView2Browser1 @"document.title;" to iExecutionId
End_Procedure
End_Object
The message API provides two way communication between the page and the host (DataFlex) application.
The example below shows how messages can be sent from JavaScript to the host, which triggers the OnWebMessageReceived event. It also shows how messages can be sent using PostWebMessageAsString, which triggers the message event on the window.chrome.webview object in JavaScript.
Object oWebView2Browser1 is a cWebView2Browser
Set Size to 80 405
Set Location to 6 5
Procedure OnCreate
Send NavigateToString (@'
<html>
<head>
<title>WebView Message</title>
<script>
window.chrome.webview.addEventListener("message", oEv =>{
alert("Message received: " + oEv.data);
});
</script>
<body>
<button onclick="window.chrome.webview.postMessage(' + "'The page says hi!'" + @')">Send message</button>
</body>
</html>')
End_Procedure
Procedure OnWebMessageReceived String sUrl String sMessageAsJson String sMessageAsString
Send Info_Box sMessageAsString
End_Procedure
End_Object
Object oMessageBtn is a Button
Set Location to 92 9
Set Label to 'Send message'
// fires when the button is clicked
Procedure OnClick
Send PostWebMessageAsString of oWebView2Browser1 "DataFlex says hi!"
End_Procedure
End_Object
This control can be used as a valid drop target by registering it as such in a cWebDragDropHelper object.
The supported actions for this control are:
- C_WebDropOnControl
This allows the control to accept data dragged from elsewhere in the control (if configured that way) and can also be used to accept files when registered within a cWebDragDropFileHelper.