TWebView2

Source: source/classes/twebview2.prg

TWebView2 embeds the Microsoft Edge (Chromium) browser engine into FiveWin applications. It provides a modern HTML5/CSS3/JavaScript rendering engine that can navigate URLs, display local HTML, execute JavaScript from Harbour, and receive JavaScript callbacks back into Harbour code. This replaces the older Internet Explorer-based TActiveX("Shell.Explorer.2") approach.

Architecture

flowchart LR subgraph "FiveWin Application" A[TWebView2] B[oWnd
TWindow] end subgraph "WebView2 Runtime" C[Edge Chromium
Renderer] D[User Data Folder] end subgraph "Content" E[Web URLs] F[Local HTML] G[JavaScript] end A --> B A -->|"hWebView"| C C --> D C --> E C --> F A <-->|"Eval / bOnBind"| G

Key DATA Members

DATATypeDescription
hWebViewNumericWebView2 internal handle
oWndTWindowParent window object
bOnBindBlockCallback block when JavaScript calls SendToFWH()
bOnNavigationCompletedBlockCallback when page navigation finishes
bOnEvalBlockCallback with result of JavaScript evaluation
cUserDataFolderCharacterPath for cookies, cache, and user data storage

Methods

MethodDescription
New( oWndParent, cUserDataFolder )Create WebView2 control. If oWndParent is nil, creates its own window.
Navigate( cURL )Navigate to a URL
SetHtml( cHtml )Display HTML string directly
Eval( cJavaScript )Execute JavaScript code in the web page
InjectJavascript( cScript )Inject a <script> element into the page head
SetTitle( cText )Set the window title
SetSize( nWidth, nHeight )Resize the WebView2 control
SetUserAgent( cUserAgent )Set custom User-Agent string
SetParent( oWnd )Re-parent the WebView as a child window
Center()Center the parent window on screen
Run()Activate the parent window (starts message loop)
OpenDevToolsWindow( lOnOff )Open/close the Chrome DevTools panel
ShowDownloads( lOnOff )Show/hide the downloads panel
End()Destroy the WebView2 instance

Harbour <-> JavaScript Communication

sequenceDiagram participant H as Harbour Code participant WV as TWebView2 participant JS as JavaScript Note over H,JS: Harbour to JavaScript H->>WV: oWV:Eval("document.title='Hello'") WV->>JS: Execute JavaScript JS-->>WV: Result (async) WV-->>H: bOnEval callback Note over H,JS: JavaScript to Harbour JS->>WV: SendToFWH({action:"save", data:...}) WV->>H: bOnBind( hParams, oWebView ) H->>H: Process the request

Example: Navigate to a URL

#include "FiveWin.ch"

function Main()

   local oWV

   oWV := TWebView2():New()
   oWV:SetTitle( "FiveWin Browser" )
   oWV:Navigate( "https://www.fivetechsoft.com" )
   oWV:Center()
   oWV:Run()
   oWV:End()

return nil

Example: Display Local HTML

#include "FiveWin.ch"

function Main()

   local oWV, cHtml

   TEXT INTO cHtml
   <!DOCTYPE html>
   <html>
   <head>
      <style>
         body { font-family: Segoe UI; margin: 40px; background: #1a1a2e; color: #eee; }
         h1 { color: #e94560; }
         .card { background: #16213e; padding: 20px; border-radius: 10px; margin: 20px 0; }
         button { background: #e94560; color: white; border: none; padding: 10px 20px;
                  border-radius: 5px; cursor: pointer; font-size: 14px; }
         button:hover { background: #c73a52; }
      </style>
   </head>
   <body>
      <h1>FiveWin + WebView2</h1>
      <div class="card">
         <p>This HTML is rendered by the Chromium engine inside a FiveWin window.</p>
         <button onclick="SendToFWH({action:'hello', msg:'Button clicked!'})">
            Click Me
         </button>
      </div>
   </body>
   </html>
   ENDTEXT

   oWV := TWebView2():New()
   oWV:SetTitle( "HTML Demo" )
   oWV:SetHtml( cHtml )
   oWV:bOnBind := { |hParams, oWV| MsgInfo( hParams[ "msg" ] ) }
   oWV:Center()
   oWV:Run()
   oWV:End()

return nil

Example: Call JavaScript from Harbour

#include "FiveWin.ch"

function Main()

   local oWnd, oWV, oBtn

   DEFINE WINDOW oWnd TITLE "WebView2 + Controls"

   oWV := TWebView2():New( oWnd )
   oWV:Navigate( "https://www.example.com" )

   // After navigation completes, inject JavaScript
   oWV:bOnNavigationCompleted := { |cUrl|
      // Change the page background
      oWV:Eval( "document.body.style.backgroundColor = '#f0f0f0'" )

      // Get the page title
      oWV:Eval( "document.title" )
   }

   // Receive the result of Eval
   oWV:bOnEval := { |cJson| oWnd:SetText( "Page: " + cJson ) }

   ACTIVATE WINDOW oWnd MAXIMIZED

   oWV:End()

return nil

Example: Embed in a Dialog

#include "FiveWin.ch"

function Main()

   local oDlg, oWV

   DEFINE DIALOG oDlg TITLE "Embedded WebView" SIZE 800, 600

   ACTIVATE DIALOG oDlg ;
      ON INIT ( ;
         oWV := TWebView2():New( oDlg ),  ;
         oWV:Navigate( "https://www.fivetechsoft.com" ) ;
      ) ;
      VALID ( oWV:End(), .T. )

return nil

Helper: FW_WebView()

// Quick one-liner to display HTML in a WebView
FW_WebView( cHtml, oWnd )

FW_WebView() is a convenience function that creates or reuses a TWebView2 to display HTML content. If oWnd is an existing TWebView2, it reuses it; otherwise creates a new one.

Requirements

See Also