Showing CEF4 in FMX Panel

[andy.t]

Hi, Sorry but new to CEF4. How do I get the chromium window in a panel rather than the form. As FMX controls have no handle, I can only see how reparent the window to the form. When form/panel is resized, I would like browser to also resize with the panel.

Many Thanks,
AT.

[salvadordf]

Hi,

The SimpleFMXBrowser demo shows how to resize a browser like a panel but using a form.

I had to use this solution because CEF needs a regular control with a handle as a parent and it's easier to follow the destruction steps described in the demos when you can destroy the browser parent.

I guess you can create the browser using the form's handle and a custom rect but you would have to implement new ways to resize it and destroy it.

If anyone knows a better solution, pull requests and suggestions are always welcome.

[andy.t]

Hi Saladordf,

I would like to use CEF in a product I'm developing. I have used CEF3 within a panel fine, the only thing that didn't work was the Enter Key didn't click the default button in the web page being shown, and videos weren't being played. (Unsupported format message). If this is resolved I can use CEF3 instead of CEF4 for my solution which requires the browser to be within a panel/other control.

I have to stick with my app being a Firemonkey multi-device app.

Any help gratefully received.
Andy.

[salvadordf]

The "unsupported video format" error is caused by the proprietary codecs used in the video.

The CEF binaries available at Spotify only have the open source codecs to avoid legal problems but you can enable those codecs if you build them. Read this for more information :
https://www.briskbard.com/index.php?lan ... cef#codecs

Try the CEF4Delphi demos to see if you can reproduce the Enter Key problem and provide a step-by-step guide to reproduce it on my computer.

If your application has to run on MacOS, IOS or Android then you will have to use the WebBrowser component included in Delphi. At this moment, CEF4Delphi only works on Windows.

[andy.t]

Thanks for the update. The Enter key problem simply involves going to any site such as office.com and entering login details. If you press Enter in CEF3 nothing happens. In CEF4 it works perfectly and moves to the next page, but I have the problem of putting the CEF window in a panel (Which I need to do). My App is Multi-Device Firemonkey, but is Windows Only, so I do not need to worry about that part.

For now, the only thing that is stopping me from using CEF3 is the ENTER key issue, and the only thing stopping me from using CEF4 is the window in a panel issue.

Any help gratefully received.
Thanks,
Andy.

[salvadordf]

Use a browser in "off-screen" mode (OSR mode) to have full control of the browser size and location.

Use the FMXExternalPumpBrowser demo as a template for your application.

[andy.t]

Thank you for your help thus far. I have managed to get CEF 4 99% working as expected in my multi-screen App using the Off-screen mode. Took a while but is now looking good. Only 2 issues left are the video issue which you have advised on, but I'm also having an issue with the TAB key. With things as they stand the TAB key is not behaving properly. When I press it, it doesn't go to the next control in the browser window. It is going to something, but I'm not sure what.

The BrowserPanelKeydown event fires when pressing other keys, but not the TAB Key.

Any help gratefully received.
Andy.

[salvadordf]

Thanks for reporting that issue!

Please download CEF4Delphi again. I just uploaded a fix for the TAB key handling in the OSR Firemonkey demos.

The Tab key triggers the "OnDialogKey" event and not the "OnKeyDown" event of the panel.

Now the demos will focus the next HTML element when the user presses tab instead of focusing the next FMX control.