Intro

There are various tools & IDEs for building websites or web applications, and it's often essential to test them locally before making them public. In Delphi, TMS WEB Core uses a technique by running a web server serving the files to localhost on a specific port of your choice. Navigating to that URL shows the content of the HTML pages and initializes JavaScript running behind the scenes. This mimics the experience of navigating to a live URL in your browser. While websites typically operate within a browser,  what if you aim to develop an HTML/JavaScript web application, run it locally, and integrate it in a native Windows application? This is where TMS FNC Core steps in to provide the solution.

TTMSFNCEdgeWebBrowser

TMS FNC Core introduces a new Windows-specific known as TTMSFNCEdgeWebBrowser built on the Edge Chromium runtime. This component allows navigating to URLs, showing web content and many more. However, when dealing with a local web application that needs to be served and utilized, simply loading the HTML file won't suffice, as the browser may encounter issues loading scripts and CSS. To address this, we will delve into the setup process for the browser to make sure all related resources are running as expected.

Quiz

For the purpose of this blog post we create three files.

• index.html
• script.js
• styles.css

The files contain code for setting up a quiz inspired by a tutorial. You can download the files from this location. After downloading, simply copy the files into a folder on your system to be served to our browser component.

Following this, our next step involves creating a new application with a fresh instance of TTMSFNCEdgeWebBrowser placed on the form. The browser requires an initialization process, so we must await the OnInitialized event to setup the virtual hosting. When the OnInitialized event is called, we retrieve a pointer to the ICoreWebView2Controller interface, and from there we can access our internal webbrowser instance. The method that we need to use is called "SetVirtualHostNameToFolderMapping". We specify our host name, and the local path where our files are waiting to be served.

We start by adding our Windows specific unit.

uses
  FMX.TMSFNCWebBrowser.Win;

const
  COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_DENY = 0;
  COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_ALLOW = 1;
  COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_DENY_CORS = 2;

We call SetVirtualHostNameToFolderMapping after the browser component is initialized.

procedure TForm1.TMSFNCEdgeWebBrowser1Initialized(Sender: TObject);
var
  w: ICoreWebView2;
  w3: ICoreWebView2_3;
  c: ICoreWebView2Controller;
begin
  c := ICoreWebView2Controller(TMSFNCEdgeWebBrowser1.NativeBrowser);
  if c.get_CoreWebView2(w) = S_OK then
  begin
    if w.QueryInterface(IID_ICoreWebView2_3, w3) = S_OK then
    begin
      w3.SetVirtualHostNameToFolderMapping('MyQuiz', 'E:\Delphi\Quiz', COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_ALLOW);
    end;
  end;
end;

TMSFNCEdgeWebBrowser1.Navigate('https://MyQuiz/index.html');

TMS WEB Core Applications

Upon running TMS WEB Core applications within the IDE, a web server initializes. However, when attempting to open the project root HTML file directly outside of the IDE, JavaScript errors may arise due to the specific loading mechanism of a TMS WEB Core application. The mentioned technique allows serving TMS WEB Core specific HTML/JavaScript files, enabling seamless interaction with the application as if you would run it from your own server or hosting service.

Assuming we've created "Project1.web", the default output directory upon building within the IDE is typically the "TMSWeb" folder. To view the web application within TTMSFNCEdgeWebBrowser, we configure the virtual host name and folder as follows:

w3.SetVirtualHostNameToFolderMapping('MyWebApplication', 'E:\Delphi\Project1\TMSWeb\Debug', COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_ALLOW);

To navigate we can then call

TMSFNCEdgeWebBrowser1.Navigate('https://MyWebApplication/Project1.html');

Access to device-specific functionalities such as camera, microphone, geolocation, ... is supported within TMS WEB Core. For a comprehensive list of supported devices, please refer to the documentation provided here .

VCL Alternative

In this blog post, our focus was on TTMSFNCEdgeWebBrowser, a component of TMS FNC Core. For users of TMS VCL UI Pack, the same code can be seamlessly ported to TAdvWebBrowser, which is an exact replica. If you need code snippets tailored specifically for TAdvWebBrowser, don't hesitate to reach out to use. We're here to assist you in making your development process smooth and efficient.

Stay Tuned

From time to time, we like to spotlight a feature, share useful tips, utility functions, or methods in FNC. With FNC boasting a plethora of exciting functionality, if you come across something that you believe is important to share with fellow users, don't hesitate to contact us. Your insights are invaluable in enriching the FNC & Delphi community experience.