keyTMS ALL-ACCESS
local_offerOne money and time saving bundle
mouseCross Platform UI
bar_chartReporting
languageWeb
swap_horizCommunication
storageData
mouseWindows UI
  •  
  •  
  •  
  1. Home
  2. Blog

Blog

All Blog Posts  |  Next Post  |  Previous Post

Use 100% of TAdvWebBrowser

Monday, November 9, 2020

TAdvWebBrowser/TTMSFNCWebBrowser

TAdvWebBrowser or TTMSFNCWebBrowser are both the same components.
The first one is a component that is available in TMS VCL UI Pack and the TTMSFNCWebBrowser is included in TMS FNC Core.
This component can display web pages, HTML and load files such as PDF files.
Both browsers also allow executing scripts and catch the result in a callback.

Get started

You will need to take some additional steps to get started with the TAdvWebBrowser. The component is based on the Microsoft Edge Chromium web browser, so first of all this should be installed. Luckily Edge Chromium is now the default browser that Windows is distributing with the Windows 10 updates.
Another important remark is that you can use the normal version of Microsoft Edge and you don't need to intall one of their specific channels.
Another thing that you will need is the WebView2Loader DLL file. There is a 32-bit and 64-bit DLL, the use of one of these depends on the version of the application that you want to build. You can find these files in the 'Edge Support' folder which comes with the installation package.
These need to be placed in the systems folder of your system. In case you are working on a 32-bit system, you will need to put the file in the System32 folder. If you are working on a 64-bit system the file needs to be in the SysWOW64 folder as Delphi is a 32-bit program.

More information on the setup can be found here.

Now you are ready to start working with the TAdvWebBrowser.

TAdvWebBrowser built-in features

To start with the TAdvWebBrowser it can be as easy as placing the component on the form and setting the URL property to the link that you want.
If you want to give the user some more control, we've created a demo application, in which you can navigate via a TEdit and have buttons to go forward and backward.



This is easily done with the following code: 
AdvWebBrowser.Navigate(AURL);
AdvWebBrowser.goBack;
AdvWebBrowser.goForward;
With the OnNavigationComplete event you can check if the webbrowser changed to the desired page.
In this code sample we will add the URL to a listbox and check if we can go back or forward between the web pages.
procedure TForm.AdvWebBrowserNavigateComplete(Sender: TObject;
  var Params: TAdvCustomWebBrowserNavigateCompleteParams);
begin
  ListBox1.Items.Add(Params.URL);

  Back.Enabled := AdvWebBrowser1.CanGoBack;
  Forward.Enabled := AdvWebBrowser1.CanGoForward;
end;
Some other things that you can do is set your own HTML code. 
AdvWebBrowser1.LoadHTML(MyHTML);

Go to the next level

You can get much more out of your TAdvWebBrowser with the use of some simple methods.
With the ExecuteJavascript method, you can run the JavaScript code that you want in your browser. For example you can set the inner HTML of an object, in this case a paragraph. 
AdvWebBrowser.ExecuteJavascript('document.getElementById("myParagraph").innerHTML = "' + s + '";');
DOM access is currently not possible in the TAdvWebBrowser itself, but you can retrieve the HTML text of your page via this function as well. And you can make it readable by parsing the retrieved text to JSON. In this case it is done in an anonymous callback method.
AdvWebBrowser.ExecuteJavascript('function GetHTML(){return document.documentElement.innerHTML;} GetHTML();',
   procedure(const AValue: string)
   begin
     memo.Lines.Text:= TJSONObject.ParseJSONValue(AValue).Value;;
   end
   );
With the use of this JavaScript method, you can get almost everything out of this control.

TAdvWebBrowser also supports bridging between the client and the web browser. You can do this by creating a class for your bridge object.
TMyBridgeObject = class(TInterfacedPersistent, IAdvCustomWebBrowserBridge)
  private
    function GetObjectMessage: string;
    procedure SetObjectMessage(const Value: string);
  published
    property ObjectMessage: string read GetObjectMessage write SetObjectMessage;
  end;
  
  procedure TMyBridgeObject.SetObjectMessage(const Value: string);
  begin
    //Use the Value parameter.
  end;
As this Value parameter that you retrieve is a string, you can store anything you want in Value. This can be very useful for a JSON object.

Then you will need to add the bridge to the HTML code. 
 AHTML := '' + #13 + 
          ' ' + #13 +
          '   ' + #13 + 
          ' ' + #13 + 
		  ' ' + #13 + 
		  '  ' + #13 + 
		  ' ' + #13 + 
		  '';
  o := TMyBridgeObject.Create;
  AdvWebBrowser1.AddBridge(BridgeName, o);
In this example the Value will be equal to "Yes".

This will give you the following HTML:


If you want to see the demo in action, I've already made a video on the TAdvWebBrowser demo where I explain how it works.

Gjalt Vanhouwaert




This blog post has received 9 comments.


1. Monday, October 11, 2021 at 1:16:40 PM

How to use TMyBridgeObject in c++ builder? There is a compile error msg:
E2352 Cannot create instance of abstract class ''TMyBridgeObject''.

class PASCALIMPLEMENTATION TMyBridgeObject : public TInterfacedPersistent, public IAdvCustomWebBrowserBridge
{
typedef TInterfacedPersistent inherited;

private:
String __fastcall GetObjectMessage();
void __fastcall SetObjectMessage( const String Value );

__published:
__property String ObjectMessage = { read = GetObjectMessage, write = SetObjectMessage };
};

Thanks!

mmbuf


2. Tuesday, May 17, 2022 at 10:57:53 AM

How can you wait for the html document to load completely?

Ducreux Jean Guy


3. Tuesday, May 17, 2022 at 4:21:56 PM

Hi, yes, you can use the following code to accomplish this (OnDocumentComplete event)

procedure TForm1.AdvWebBrowser1DocumentComplete(Sender: TObject);
begin
//ready
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
AdvWebBrowser1.URL := ''http://www.tmssoftware.com'';
AdvWebBrowser1.StartDocumentReadyStateThread;
end;

Pieter Scheldeman


4. Wednesday, May 18, 2022 at 3:33:18 PM

Thanks! I''ll give it a try.

Ducreux Jean Guy


5. Wednesday, May 18, 2022 at 3:37:10 PM

Doesn''t work immediately. It first loads the n-1 HTML code. The second click retrieves the current page. How can I make it work on the first click, please?

Ducreux Jean Guy


6. Wednesday, May 18, 2022 at 3:44:22 PM

Let us discuss this further at our support channel https://support.tmssoftware.com/

Pieter Scheldeman


7. Tuesday, October 11, 2022 at 3:36:14 PM

How can I Hide scrollbars ? It was possible in TWebBrowser...

Nehmer Lizenz


8. Tuesday, October 11, 2022 at 5:34:11 PM

How can you delete session in TAdvWebBrowser?

Nehmer Lizenz


9. Wednesday, October 12, 2022 at 2:40:18 PM

It''s not immediately clear from the Microsoft APIs that it''s possible to hide the scrollbars. About the session, you can call ClearCache and the reload the browser for starting with a new session.

Pieter Scheldeman




Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post