Jump to content
Yaron

FMX TWebBroweser loading pages in the background

Recommended Posts

I'm trying to create a smooth UI experience by loading a webpage in the background and only showing it later on when a user clicks a button in the app.

 

To load the webpage I'm using:

TWebBrowser.LoadFromStrings('<html><body style="background-color:#2f2f2f"></body></html>','');

 

However, it seems that the webpage is not rendered if TWebBrowser is not visible, resulting in a white page showing up instead of my HTML.

 

So I figured if this is a limitation, I'll just have TWebBrowser visible and cover it by a TRectangle, however that didn't work either as it seems (at least under windows) that the TWebBrowser control is always on-top.

I also tried to placing the TWebBrowser control into a TPanel to see if that would allow it to be overlaid by other components, but it didn't make a difference.

Finally I tried utilizing the "OnDidFinishLoad" event, but it didn't help either, a white page would still flicker for a split second before the page was rendered.

 

Is there some other trick I haven't thought of that will allow me to first render the page in the background and only then show it so I don't have a flashing white box appear for a second before the page renders?

 

Share this post


Link to post

I also tried having the TWebBrowser visible off-screen by calling "WebBrowser.SetBounds(clientWidth,0,clientWidth,clientHeight)" and then returning it on-screen when the user clicks a button.

On windows it works well enough (no white flash) but on Android I still see it flashing white for a split second.

Share this post


Link to post

If I'm not wrong, this my be due to fact that TWebBrowser is not painted by FMX, so you cannot control it the same way as other FMX controls. It is native component drawn by the OS, which is always on the top (no Z-Order in FMX?). I play a lot with TWebBrowser myself now and see some limitations.

  • Like 1

Share this post


Link to post
10 hours ago, Yaron said:

I am using Rio, doesn't seem to help with my issue.

Probably it won't as Z-order does not work. I have check, TWebBrowser with TRectangle on it, TWebBrowser is always drawn on top of everything.

 

 

What you want to achieve is simply not possible with FMX, I have done some test while I need to implement mapbox via web browser, and seems that noting can be done here.

 

Share this post


Link to post

Maybe one of the MVPs knows a way to do this by leveraging the underlying java code? I need the UI to look sleek and a blank white screen transition sorts of gives a clunky vibe.

Share this post


Link to post
On 10/29/2019 at 11:19 PM, Yaron said:

Maybe one of the MVPs knows a way to do this by leveraging the underlying java code? I need the UI to look sleek and a blank white screen transition sorts of gives a clunky vibe.

 

If you need to have sleek look... do not use FMX, use Flutter. I use both and the difference is huge, I keep FMX for one large product that cannot be replaced quickly, but all new stuff is done in Flutter today and I do not see bright future for FMX now.

 

Edited by TomDevOps
  • Sad 1

Share this post


Link to post
19 minutes ago, TomDevOps said:

 

If you need to have sleek look... do not use FMX, use Flutter. I use both and the difference is huge, I keep FMX for one large product that cannot be replaced quickly, but all new stuff is done in Flutter today and I do not see bright future for FMX now.

 

How does Flutter relate to Delphi?

Share this post


Link to post
57 minutes ago, Yaron said:

How does Flutter relate to Delphi?

It does not... you must abandon Delphi if you want to have such nice things, not that the language is the problem, but FMX, and if you must really stick with Delphi only, then go ahead with FGX 🙂

  • Like 2

Share this post


Link to post

I just looked at FGX, it doesn't look like it supports an alternative to TWebBrowser.

 

And I would like to stick with Delphi, I have developed a lot for it and have a lot of pre-built support code that allows me to quickly prototype.

Otherwise I would have already moved to ReactJS, Kotlin or Flutter as you mentioned.

 

Edited by Yaron
wrote does instead of doesn't
  • Like 1

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×