CEF BrowserComponent - Exception in thread "AWT-EventQueue-0"

[Angelo Maci]

My Codename app has a BrowserComponent with a text editor inside. When JavaFX was used the editor was displayed but had some issues.

Now I am running the same code with CEF support. I had to copy the .....idea-IC-201.7223.91/jbr/lib/libjawt.so file into the /home/pc/.codenameone/cef/lib/linux64 folder to get the BrowserComponent loaded.

Now I can see just horizontal and vertical scrollbar, and no content.

In log I get this:

CEF Args: [--disable-gpu, --disable-software-rasterizer, --disable-gpu-compositing, --touch-events=enabled, --enable-media-stream, --device-scale-factor=4, --force-device-scale-factor=4, --autoplay-policy=no-user-gesture-required, --enable-usermedia-screen-capturing]

Using:

JCEF Version = 83.4.0.260

CEF Version = 83.4.0

Chromium Version = 83.0.4103.106

initialize on Thread[AWT-EventQueue-0,6,main] with library path /home/pc/.codenameone/cef/lib/linux64

Added scheme search://

Added scheme client://

Added scheme cn1stream://

DevTools listening on ws://127.0.0.1:8088/devtools/browser/acb758a2-831d-41c5-9102-d61c9fbadc52

AppHandler.stateHasChanged: NEW

AppHandler.stateHasChanged: INITIALIZING

AppHandler.stateHasChanged: INITIALIZED

CEF Args: [--disable-gpu, --disable-software-rasterizer, --disable-gpu-compositing, --touch-events=enabled, --enable-media-stream, --device-scale-factor=4, --force-device-scale-factor=4, --autoplay-policy=no-user-gesture-required, --enable-usermedia-screen-capturing]

Setting URL but not ready https://cn1app/streams/1

Running ready callbacks

Running ready callbacks

Setting url https://cn1app/streams/1

Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Stream was closed

Address changed to https://cn1app/streams/1

onload

Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0" Exception in thread "AWT-EventQueue-0"

my system is

IntelliJ IDEA 2020.2 (Community Edition)

Build #IC-202.6397.94, built on July 27, 2020

Runtime version: 11.0.7+10-b944.20 amd64

VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.

Linux 5.4.0-42-generic

GC: ParNew, ConcurrentMarkSweep

Memory: 949M

Cores: 4

Non-Bundled Plugins: com.codename1.plugin.intellij

Current Desktop: ubuntu:GNOME

[Steve Hannah]

While your app is open, you can debug the web view in Chrome by going to http://localhost:8088 

That might offer you some clues as to what is going wrong.

--
You received this message because you are subscribed to the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discu...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/ff0d12eb-f412-4777-bcc6-e90eab8e3275o%40googlegroups.com.

--

Steve Hannah

Software Developer

Codename One

http://www.codenameone.com

[Angelo Maci]

In Chrome I see that control in a very big size but it is tiny in fact, with just the scrollbars, but the editor is inside, I see some little area of it. The BrowserComponent has not expanded like in JavaFX. Please see the attached image.

In general I would like to know how to set the size of a component to "wrap_content" or "match_parent", unless I am missing something obvious, my fault.

Thanks in advance

To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/ff0d12eb-f412-4777-bcc6-e90eab8e3275o%40googlegroups.com.

[Shai Almog]

Did you try setNativeScrollingEnabled(false) on the browser component?

[P5music]

It is the same with setNativeScrollingEnabled(false), scrollbars are there yet. And the BrowserComponent is tiny, it seems empty but in Chrome I see the content in a very tiny window.

[Shai Almog]

Is the browser in the center of a border layout in the parent form?
It looks like the browser component itself isn't getting enough space on the layout. Notice that the form needs to be in border layout and the browser component should be in the center of that so it will take up available space.

[P5music]

The browser component just expands when in a BL inside a form.

My layout is made of a TableLayout that reproduces a master/detail layout. The TL is in the main form.

No matter what combination of Container and BorderLayout axis I create, the effect is that the BrowserComponent starts just as a tiny spot (some pixels wide), then if I touch it, it becomes...less tiny, with scrollbars as previously shown.

Furthermore I experienced instable layout when putting the BrowserComponent in a real layout, in certain cases the other components disappeared after interacting with the BC and only the BC remained.

Another case: I put the other components in LEFT, and the BC in RIGHT, I could see the BC at same vertical size of the other layout stuff on left, but horizontally speaking in fact the BC covered the other things on the left of some amount,

[Shai Almog]

Make sure to disable scrolling on the parent form. Also make sure to give the table layout the right amount of height constraint.

You would have run into this issue on devices with the FX browser so it's good the CEF browser behaves the same way.

The core of the issue is this: browser component can't tell us its preferred size during layout since this requires parsing all the HTML which might not even be available and is happening on a separate thread to begin with. So preferred size is small/zero and the layout correctly places it as a small sliver.

The second problem is scrolling which lays out things differently. It can also collide with the native scrolling within the browser itself so nesting scrollables is a big problem here and contributes to janky UI.

BorderLayout center on the form solves this in two ways. It implicitly disables the scrolling on the form (Form is the only container that's scrollable by default). The second feature is that the CENTER constraint ignores the preferred size of the component and grants it available space. That way the browser takes up the remaining space regardless of the rest of the content. You can achieve that with TableLayout if you disable scrolling manually and set the width/height percentage via a constraint.

[P5music]

With your suggestions it worked.

But there's no mean to disable the scrollbars.

webView.setNativeScrollingEnabled(false);

webView.setScrollableX(false);

webView.setScrollableY(false);

are useless.

Furthermore a strange behaviour of the BrowserComponent happens: when you use the scollbars, it scrolls, then the mouse is catched by the BC and when it is inside the control it is like it is scolling, not pointing, so the content scrolls in a erratic way.

[Steve Hannah]

I've added this to the issue tracker so you can track the progress there.

https://github.com/codenameone/CodenameOne/issues/3212

To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discu...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/f041543f-8900-4e03-9809-d9226ca531afo%40googlegroups.com.