Google Web Toolkit: May 2017

Wednesday, May 31, 2017

Re: Code references between client/server/shared folders

If there are no visual classes, functionality will normally occur. Regarding your comment, javac will always be applied in all classes, regardless of what directory they are in. The classes destined to the sharing between client and server, it is sufficient to implement them without using any graphical interface.

sorry my english.

Natan.

Em 30/05/2017 12:43, Thomas Broyer escreveu:

On Tuesday, May 30, 2017 at 5:36:01 PM UTC+2, Magnus wrote:

Hello,

my understanding of the typical folders in a GWT project is this:

client
only client-side code here

server
only server-side code here

shared
code that may be used on client-side and server-side

I believe that the code in the client folder gets compiled by the GWT compiler into JS only, while the code in the server folder gets compiled by javac into class files only.
Besides that, code in the shared folder gets compiled twice, once by the GWT compiler and once from javac.

You'll probably want to use javac on client code too; if only to get faster feedback for compilation errors. There are a few cases where GWT will look for the compiled classes too, so better have them.

My understanding always was that the code in the shared folder must be "pure" java, so that it can be compiled in both worlds, without any references into pure client-side code.

As Jens said, those are only conventions. For example, you'll find in GWT that the RemoteService interface is in the "client" package (this is legacy, because it predates the convention of using a "shared" package)

Also note that it's not about compilation (all your client code will compile using javac) but runtime (client-side code won't work in a JVM, i.e. on the server)

So far so good. But what happens, when code in the shared folder references some classes in the client folder?
I have just found such an example in my projects:

There is a class Move that represents a move in a chess game.
It's located in the shared folder, since it's used by the server and the client.

The class Move uses a class TimeFormatter (to format timestamps as "yyyy-mm-dd hh:mm:ss").
It's located in the client code and in turn uses the class com.google.gwt.i18n.client.DateTimeFormat.

What happens, when the javac compiler sees the Move class?

It depends how you invoke javac.

If the folders you're talking about are subpackages in the same source tree, then just pass everything at once to javac and GWT (there's a reason GWT has those *.gwt.xml files with <source path="…"/> elements in there)

What does it do with com.google.gwt.i18n.client.DateTimeFormat when compiling server-side code?

If it's in the classpath (gwt-user.jar or gwt-servlet.jar), it'll compile.

You should probably be more concerned about runtime behavior though: if you call that code on the server, it'll throw.

Should I move TimeFormatter into the shared folder, too?

And one more step: Could you use the same time formatting code in client and server code?

(At the moment I use com.google.gwt.i18n.client.DateTimeFormat at the client and SimpleDateFormat.format at the client.)

Jens suggested c.g.g.i.shared.DateTimeFormat; I wouldn't recommend it though (needs some additional setup on server-side, almost nobody uses it on server-side so you're basically on your own if you need help).

The best practice is to abstract both approaches behind an interface (or abstract class), that you'd put in the "shared" package, then have concrete implementations in the "client" and "server" packages, and arrange your code to use an instance of the appropriate implementation depending on the context (using the dependency injection pattern helps here). This means your Move class will receive a TimeFormatter (interface) as argument and will never instantiate one (ClientTimeFormatter or ServerTimeFormatter).

Super-source, as explained by Jens, also works, but is IMO more complex (to understand and maintain).

BTW: What's the "public" folder for? I saw it in some projects but not in the docs...

See http://www.gwtproject.org/doc/latest/DevGuideOrganizingProjects.html#DevGuideModules

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

How to add a GWT module to a dynamically created Iframe

What's the best way to handle this scenario ?

- Code wise have I would like to have 2 seperate GWT modules. Modules as defined in this page

- Download both modules in a single download, as a js file.

- Run one of the modules in a dynamically created iframe.

Detailed description:

I have a GWT module called 'embed' which generates embed.nocache.js file.

I have another GWT module called 'widget' which generates widget.nocache.js file.

I add embed.nocache.js to my HTML page. This adds a link called 'widget' in the HTML page.

On click of this link, an iframe (say, widget.html) opens. widget.html has a link to widget.nocache.js. This file gets downloaded, gets executed in the iframe and puts a horizontal panel into the iframe.

Now I need to eliminate a seperate download of widget.nocache.js file.

Say I inherit 'widget' module in embed, it gets compiled and downloaded together. How do I initialise the all the 'widget' related javascript in a dynamically created iframe ?

Can creating a custom linker help ?

Thanks.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

Tuesday, May 30, 2017

GWT module with Jsinterop exports but without an entry point is skipped during production compilation

Hi,
For a module with Jsinterop exports to be compiled I need to create a dummy entry point, otherwise it is skipped. I have the generateJsInteropExports flag set. The module inherits only from com.google.gwt.user.User and elemental2.dom.Dom modules which I suppose do not have entry points of their own. Can this be fixed somehow or the dummy entry point is required in this case?

Re: Code references between client/server/shared folders

On Tuesday, May 30, 2017 at 5:36:01 PM UTC+2, Magnus wrote:

Hello,

my understanding of the typical folders in a GWT project is this:
client
only client-side code here
server
only server-side code here
shared
code that may be used on client-side and server-side
I believe that the code in the client folder gets compiled by the GWT compiler into JS only, while the code in the server folder gets compiled by javac into class files only.
Besides that, code in the shared folder gets compiled twice, once by the GWT compiler and once from javac.

You'll probably want to use javac on client code too; if only to get faster feedback for compilation errors. There are a few cases where GWT will look for the compiled classes too, so better have them.

My understanding always was that the code in the shared folder must be "pure" java, so that it can be compiled in both worlds, without any references into pure client-side code.

As Jens said, those are only conventions. For example, you'll find in GWT that the RemoteService interface is in the "client" package (this is legacy, because it predates the convention of using a "shared" package)

Also note that it's not about compilation (all your client code will compile using javac) but runtime (client-side code won't work in a JVM, i.e. on the server)

So far so good. But what happens, when code in the shared folder references some classes in the client folder?
I have just found such an example in my projects:
There is a class Move that represents a move in a chess game.
It's located in the shared folder, since it's used by the server and the client.
The class Move uses a class TimeFormatter (to format timestamps as "yyyy-mm-dd hh:mm:ss").
It's located in the client code and in turn uses the class com.google.gwt.i18n.client.DateTimeFormat.
What happens, when the javac compiler sees the Move class?

It depends how you invoke javac.

If the folders you're talking about are subpackages in the same source tree, then just pass everything at once to javac and GWT (there's a reason GWT has those *.gwt.xml files with <source path="…"/> elements in there)

What does it do with com.google.gwt.i18n.client.DateTimeFormat when compiling server-side code?

If it's in the classpath (gwt-user.jar or gwt-servlet.jar), it'll compile.

You should probably be more concerned about runtime behavior though: if you call that code on the server, it'll throw.

Should I move TimeFormatter into the shared folder, too?
And one more step: Could you use the same time formatting code in client and server code?
(At the moment I use com.google.gwt.i18n.client.DateTimeFormat at the client and SimpleDateFormat.format at the client.)

Jens suggested c.g.g.i.shared.DateTimeFormat; I wouldn't recommend it though (needs some additional setup on server-side, almost nobody uses it on server-side so you're basically on your own if you need help).

The best practice is to abstract both approaches behind an interface (or abstract class), that you'd put in the "shared" package, then have concrete implementations in the "client" and "server" packages, and arrange your code to use an instance of the appropriate implementation depending on the context (using the dependency injection pattern helps here). This means your Move class will receive a TimeFormatter (interface) as argument and will never instantiate one (ClientTimeFormatter or ServerTimeFormatter).

Super-source, as explained by Jens, also works, but is IMO more complex (to understand and maintain).

BTW: What's the "public" folder for? I saw it in some projects but not in the docs...

See http://www.gwtproject.org/doc/latest/DevGuideOrganizingProjects.html#DevGuideModules

Re: Code references between client/server/shared folders

I usually only call the shared code form the client (and not the other way round).

You can have separate TimeFormatter:

one for client -->

com.google.gwt.i18n.client.*

and one for server or shared (if its used by other server side modules as well) -->

java.time.* java.util.Date

If your TimeFormatter is in the shared module (use case: multiple server modules using it), you can tell the GWT compiler to exclude it:

<source path='shared'>

 <exclude name="**/TimeFormatter.java" />

.....

The public folder is usually used to server public assets like your html, or external js or css files (for e.g. bootstrap or jQuery)

On Tuesday, May 30, 2017 at 11:36:01 AM UTC-4, Magnus wrote:

Hello,

my understanding of the typical folders in a GWT project is this:
client
only client-side code here
server
only server-side code here
shared
code that may be used on client-side and server-side
I believe that the code in the client folder gets compiled by the GWT compiler into JS only, while the code in the server folder gets compiled by javac into class files only.
Besides that, code in the shared folder gets compiled twice, once by the GWT compiler and once from javac.

My understanding always was that the code in the shared folder must be "pure" java, so that it can be compiled in both worlds, without any references into pure client-side code.

So far so good. But what happens, when code in the shared folder references some classes in the client folder?
I have just found such an example in my projects:
There is a class Move that represents a move in a chess game.
It's located in the shared folder, since it's used by the server and the client.
The class Move uses a class TimeFormatter (to format timestamps as "yyyy-mm-dd hh:mm:ss").
It's located in the client code and in turn uses the class com.google.gwt.i18n.client.DateTimeFormat.
What happens, when the javac compiler sees the Move class?
What does it do with com.google.gwt.i18n.client.DateTimeFormat when compiling server-side code?

Should I move TimeFormatter into the shared folder, too?
And one more step: Could you use the same time formatting code in client and server code?
(At the moment I use com.google.gwt.i18n.client.DateTimeFormat at the client and SimpleDateFormat.format at the client.)

Thanks
Magnus

BTW: What's the "public" folder for? I saw it in some projects but not in the docs...

Re: Code references between client/server/shared folders

my understanding of the typical folders in a GWT project is this:
client
only client-side code here
server
only server-side code here
shared
code that may be used on client-side and server-side

It is just a convention, you can generally use whatever folders you want to organize your code. This convention has been made primarily for projects that have client/shared/server code in the same code base (the default project layout if you create one using the GWT Eclipse Plugin). Maven projects usually consists of multiple modules which makes this distinction via package names optional.

I believe that the code in the client folder gets compiled by the GWT compiler into JS only, while the code in the server folder gets compiled by javac into class files only.
Besides that, code in the shared folder gets compiled twice, once by the GWT compiler and once from javac.

Right, if you have made client/shared folder visible to the GWT compiler using the <source path="..."/> tags in your *.gwt.xml file. If there isn't any such tag then <source path="client"/> will be assumed as a default by GWT compiler.

My understanding always was that the code in the shared folder must be "pure" java, so that it can be compiled in both worlds, without any references into pure client-side code.

Generally yes, but you could also use Java classes that GWT does not understand out of the box. You would then mark code as @GwtIncompatible if you don't need it on the client or you provide a super-source implementation. For the past GWT releases a good example might be ConcurrentMap which GWT does not support out of the box but might be useful in a shared class.

So far so good. But what happens, when code in the shared folder references some classes in the client folder?
I have just found such an example in my projects:
There is a class Move that represents a move in a chess game.
It's located in the shared folder, since it's used by the server and the client.
The class Move uses a class TimeFormatter (to format timestamps as "yyyy-mm-dd hh:mm:ss").
It's located in the client code and in turn uses the class com.google.gwt.i18n.client.DateTimeFormat.
What happens, when the javac compiler sees the Move class?
What does it do with com.google.gwt.i18n.client.DateTimeFormat when compiling server-side code?

If will fail to compile if you don't have that class on your classpath. In your specific example if will probably work if you use GWT-RPC because then you need gwt-servlet.jar on your classpath which in turn contains this class (yes it is a bit weird to have a server jar with client classes in it but well).

Should I move TimeFormatter into the shared folder, too?
And one more step: Could you use the same time formatting code in client and server code?
(At the moment I use com.google.gwt.i18n.client.DateTimeFormat at the client and SimpleDateFormat.format at the client.)

You could make your TimeFormatter class the single source for time formatting in your project. In that case you would move it into your shared folder, implement it using SimpleDateFormat.format() and in addition provide a super-source version of TimeFormatter for GWT compiler which will use com.google.gwt.i18n.client.DateTimeFormat to implement the TimeFormatter API. Alternatively you could emulate SimpleDateFormat.format() by providing a super-source version of SimpleDateFormat. The whole approach is the same GWT itself uses to let you use all the emulated JRE classes in the browser.

Alternatively you could use com.google.gwt.i18n.shared.DateTimeFormat to implement your TimeFormatter class. Then it should work on server and client but then your server has an additional dependency to GWT, maybe you don't want that.

BTW: What's the "public" folder for? I saw it in some projects but not in the docs...

"public" folders are folders whose content will be copied by the GWT compiler to the GWT compile output folder without any modifications. If a project uses it then mostly for images (e.g. favicon.ico and the like), css, html. The name "public" is also just a convention and can be changed by adding <public path="some folder" /> to your *.gwt.xml file.

-- J.

Code references between client/server/shared folders

Hello,

my understanding of the typical folders in a GWT project is this:

client
only client-side code here
server
only server-side code here
shared
code that may be used on client-side and server-side

I believe that the code in the client folder gets compiled by the GWT compiler into JS only, while the code in the server folder gets compiled by javac into class files only.
Besides that, code in the shared folder gets compiled twice, once by the GWT compiler and once from javac.

My understanding always was that the code in the shared folder must be "pure" java, so that it can be compiled in both worlds, without any references into pure client-side code.

So far so good. But what happens, when code in the shared folder references some classes in the client folder?
I have just found such an example in my projects:

There is a class Move that represents a move in a chess game.
It's located in the shared folder, since it's used by the server and the client.
The class Move uses a class TimeFormatter (to format timestamps as "yyyy-mm-dd hh:mm:ss").
It's located in the client code and in turn uses the class com.google.gwt.i18n.client.DateTimeFormat.

What happens, when the javac compiler sees the Move class?

What does it do with com.google.gwt.i18n.client.DateTimeFormat when compiling server-side code?

Should I move TimeFormatter into the shared folder, too?

And one more step: Could you use the same time formatting code in client and server code?

(At the moment I use com.google.gwt.i18n.client.DateTimeFormat at the client and SimpleDateFormat.format at the client.)

Thanks
Magnus

BTW: What's the "public" folder for? I saw it in some projects but not in the docs...

Re: GWT DataGrid background colour for rows

DataGrid being a "cell widget", it will be "re-rendered" regularly, losing all modifications you manually did to the DOM tree.

You can "persist" your changes using setRowStyles for classnames applied to a TableRowElement, or custom column with overridden getCellStyleNames for classnames applied to a TableCellElement, or a custom CellTableBuilder for more complex custom rendering; or you can use a RedrawEvent.Handler to reapply your changes every time the grid is re-rendered.

On Tuesday, May 30, 2017 at 3:50:01 PM UTC+2, Santanu Banerjee wrote:

I am trying to apply background colour to some rows dynamically based on some program logic, but I can see that the colour is disspearing on any further row selection.
I used two approaches to change the colour.
1) baseGrid.getRowElement(i).getCells().getItem(0).addClassName(<css style>);

Use a setRowStyles(), with a RowStyles implementation that returns <css style>

2)TableCellElement cell = grid.getRowElement(i).getCells().getItem(colIndex); cell.getStyle().setProperty("background", "#DDDDDD");

Could you please suggest any alternative ways I can do it. so that the background colour of the rows do not change on any further row selection?

Thanks,
Santanu

GWT DataGrid background colour for rows

I am trying to apply background colour to some rows dynamically based on some program logic, but I can see that the colour is disspearing on any further row selection.

I used two approaches to change the colour.

1) baseGrid.getRowElement(i).getCells().getItem(0).addClassName(<css style>);

2)TableCellElement cell = grid.getRowElement(i).getCells().getItem(colIndex); cell.getStyle().setProperty("background", "#DDDDDD");

Could you please suggest any alternative ways I can do it. so that the background colour of the rows do not change on any further row selection?

Thanks,

Santanu

Monday, May 29, 2017

UmbrellaException for input string: ...px - only in Edge browser

Hello,

Only when i open my site in the edge browser it displays my design incorrectly.

Also i get alot of UmbrellaExceptions with error on input string for different "px" values.

This does not happen in any other browser. Does anyone know what might cause this?

P.S first post here, so if i should add something more please let me know.

Best regards,

Rowan

Saturday, May 27, 2017

Re: SimpleLayoutPanel inside a ScrollPanel or a VerticalPanel does not work

great, many thanks for your help! :)

On Saturday, May 27, 2017 at 4:19:13 PM UTC+7, Thomas Broyer wrote:

On Friday, May 26, 2017 at 10:32:12 PM UTC+2, Piotr Morgwai Kotarbinski wrote:
Hey all,
I have the following code:

uiBinder ui.xml template:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <g:ScrollPanel> <g:SimpleLayoutPanel><g:Label>AAA</g:Label></g:SimpleLayoutPanel> </g:ScrollPanel> </ui:UiBinder>

uiBinder java class:
public class TestLayout extends Composite { interface ViewUiBinder extends UiBinder<Widget, TestLayout> {} private static ViewUiBinder uiBinder = GWT.create(ViewUiBinder.class); public TestLayout() { initWidget(uiBinder.createAndBindUi(this)); } }

entryPoint:
public void onModuleLoad() { RootLayoutPanel.get().add(new TestLayout()); }

...and it renders to an empty page :(

the exact resulting html is like this: (copied from chrome's dom inspector, formatting mine)
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="Gwt/Gwt.nocache.js"></script> <link rel="stylesheet" href="http://localhost:8088/Gwt/gwt/standard/standard.css"> <script src="http://localhost:8088/Gwt/7ED5A073690437962C6F98112D263AB9.cache.js"></script> </head> <body> <iframe src='javascript:""' id="Gwt" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none; left: -1000px; top: -1000px;"></iframe> <div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;"> </div> <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"> <div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div> <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px;"> <div style="overflow: auto; position: absolute; zoom: 1; left: 0px; top: 0px; right: 0px; bottom: 0px;"> <div style="position: relative; zoom: 1;"> <div style="position: relative;"> <div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div> <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%;"> <div class="gwt-Label" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">AAA</div> </div> </div> </div> </div> </div> </div> </body> </html>

notice the "position: absolute;" in the style of the 2 inner-most div elements surrounding "AAA" : if I change them manually to "position: relative;" inside chrome's dom inspector then it renders ok.
moreover, if I just replace the SimpleLayoutPanel with a SimplePanel in the ui.xml file, it all renders fine in spite of still using a RootLayoutPanel (not a RootPanel) in my EntryPoint... :?

I've also noticed that similar problem appears when I try to put a SimpleLayoutPanel inside a VerticalPanel:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <g:VerticalPanel> <g:SimpleLayoutPanel><g:Label>AAA</g:Label></g:SimpleLayoutPanel> <g:SimpleLayoutPanel><g:Label>BBB</g:Label></g:SimpleLayoutPanel> </g:VerticalPanel> </ui:UiBinder>

...because of very similar reasons: the 2 inner-most div elements around both "AAA" and "BBB" will have "position: absolute;" in their style. Again, replacing it manually for "position: relative;" makes it render ok and replacing the SimpleLayoutPanel with a SimplePanel makes it all work ok.

Is it a bug or am I missing something? If it's expected then what Panel should I use instead of a SimpleLayoutPanel as a placeholder inside a ScrollPanel or a VerticalPanel when using layout Panels in general? (a SimplePanel works, but it's not a layout Panel, so I guess I should not rely that it will work under all possible circumstances and I guess I should be using some layout Panel instead)

tl;dr: use a SimplePanel (it's OK, it's "just a div element"; actually a SimplePanel is like a FlowPanel, except its API ensures it can only contain one single Widget).

For a ScrollPanel to be able to make its content scroll, it must not dictate its size.
A SimpleLayoutPanel expects that its parent will give it dimensions, that it will then transfer to its inner widget (hence the div with position:relative with a div with position:absolute an left:0;top:0;width:100%;height:100%, and the gwt-Label with left:0;top:0;right:0;bottom:0). If you don't give an explicit size to the SimpleLayoutPanel, and its parent doesn't (such as when it's a ScrollPanel or a VerticalPanel), then it'll end up with a height of 0, and because of the overflow:hidden you won't see its content (the gwt-Label).

Re: SimpleLayoutPanel inside a ScrollPanel or a VerticalPanel does not work

On Friday, May 26, 2017 at 10:32:12 PM UTC+2, Piotr Morgwai Kotarbinski wrote:

Hey all,
I have the following code:

uiBinder ui.xml template:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <g:ScrollPanel> <g:SimpleLayoutPanel><g:Label>AAA</g:Label></g:SimpleLayoutPanel> </g:ScrollPanel> </ui:UiBinder>

uiBinder java class:
public class TestLayout extends Composite { interface ViewUiBinder extends UiBinder<Widget, TestLayout> {} private static ViewUiBinder uiBinder = GWT.create(ViewUiBinder.class); public TestLayout() { initWidget(uiBinder.createAndBindUi(this)); } }

entryPoint:
public void onModuleLoad() { RootLayoutPanel.get().add(new TestLayout()); }

...and it renders to an empty page :(

the exact resulting html is like this: (copied from chrome's dom inspector, formatting mine)
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="Gwt/Gwt.nocache.js"></script> <link rel="stylesheet" href="http://localhost:8088/Gwt/gwt/standard/standard.css"> <script src="http://localhost:8088/Gwt/7ED5A073690437962C6F98112D263AB9.cache.js"></script> </head> <body> <iframe src='javascript:""' id="Gwt" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none; left: -1000px; top: -1000px;"></iframe> <div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;"> </div> <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"> <div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div> <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px;"> <div style="overflow: auto; position: absolute; zoom: 1; left: 0px; top: 0px; right: 0px; bottom: 0px;"> <div style="position: relative; zoom: 1;"> <div style="position: relative;"> <div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div> <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%;"> <div class="gwt-Label" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">AAA</div> </div> </div> </div> </div> </div> </div> </body> </html>

notice the "position: absolute;" in the style of the 2 inner-most div elements surrounding "AAA" : if I change them manually to "position: relative;" inside chrome's dom inspector then it renders ok.
moreover, if I just replace the SimpleLayoutPanel with a SimplePanel in the ui.xml file, it all renders fine in spite of still using a RootLayoutPanel (not a RootPanel) in my EntryPoint... :?

I've also noticed that similar problem appears when I try to put a SimpleLayoutPanel inside a VerticalPanel:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <g:VerticalPanel> <g:SimpleLayoutPanel><g:Label>AAA</g:Label></g:SimpleLayoutPanel> <g:SimpleLayoutPanel><g:Label>BBB</g:Label></g:SimpleLayoutPanel> </g:VerticalPanel> </ui:UiBinder>

...because of very similar reasons: the 2 inner-most div elements around both "AAA" and "BBB" will have "position: absolute;" in their style. Again, replacing it manually for "position: relative;" makes it render ok and replacing the SimpleLayoutPanel with a SimplePanel makes it all work ok.

Is it a bug or am I missing something? If it's expected then what Panel should I use instead of a SimpleLayoutPanel as a placeholder inside a ScrollPanel or a VerticalPanel when using layout Panels in general? (a SimplePanel works, but it's not a layout Panel, so I guess I should not rely that it will work under all possible circumstances and I guess I should be using some layout Panel instead)

tl;dr: use a SimplePanel (it's OK, it's "just a div element"; actually a SimplePanel is like a FlowPanel, except its API ensures it can only contain one single Widget).

For a ScrollPanel to be able to make its content scroll, it must not dictate its size.

A SimpleLayoutPanel expects that its parent will give it dimensions, that it will then transfer to its inner widget (hence the div with position:relative with a div with position:absolute an left:0;top:0;width:100%;height:100%, and the gwt-Label with left:0;top:0;right:0;bottom:0). If you don't give an explicit size to the SimpleLayoutPanel, and its parent doesn't (such as when it's a ScrollPanel or a VerticalPanel), then it'll end up with a height of 0, and because of the overflow:hidden you won't see its content (the gwt-Label).

Friday, May 26, 2017

SimpleLayoutPanel inside a ScrollPanel or a VerticalPanel does not work

Hey all,

I have the following code:

uiBinder ui.xml template:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <g:ScrollPanel>
    <g:SimpleLayoutPanel><g:Label>AAA</g:Label></g:SimpleLayoutPanel>
  </g:ScrollPanel>
</ui:UiBinder>

uiBinder java class:

public class TestLayout extends Composite {
  interface ViewUiBinder extends UiBinder<Widget, TestLayout> {}
  private static ViewUiBinder uiBinder = GWT.create(ViewUiBinder.class);
  public TestLayout() { initWidget(uiBinder.createAndBindUi(this)); }
}

entryPoint:

public void onModuleLoad() { RootLayoutPanel.get().add(new TestLayout()); }

...and it renders to an empty page :(

the exact resulting html is like this: (copied from chrome's dom inspector, formatting mine)

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="Gwt/Gwt.nocache.js"></script>
  <link rel="stylesheet" href="http://localhost:8088/Gwt/gwt/standard/standard.css">
  <script src="http://localhost:8088/Gwt/7ED5A073690437962C6F98112D263AB9.cache.js"></script>
</head>
<body>
<iframe src='javascript:""' id="Gwt" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none; left: -1000px; top: -1000px;"></iframe>
<div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;">&nbsp;</div>
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
  <div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;">&nbsp;</div>
  <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px;">
    <div style="overflow: auto; position: absolute; zoom: 1; left: 0px; top: 0px; right: 0px; bottom: 0px;">
      <div style="position: relative; zoom: 1;">
        <div style="position: relative;">
          <div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;">&nbsp;</div>
          <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%;">
            <div class="gwt-Label" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">AAA</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

notice the "position: absolute;" in the style of the 2 inner-most div elements surrounding "AAA" : if I change them manually to "position: relative;" inside chrome's dom inspector then it renders ok.

moreover, if I just replace the SimpleLayoutPanel with a SimplePanel in the ui.xml file, it all renders fine in spite of still using a RootLayoutPanel (not a RootPanel) in my EntryPoint... :?

I've also noticed that similar problem appears when I try to put a SimpleLayoutPanel inside a VerticalPanel:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <g:VerticalPanel>
    <g:SimpleLayoutPanel><g:Label>AAA</g:Label></g:SimpleLayoutPanel>
    <g:SimpleLayoutPanel><g:Label>BBB</g:Label></g:SimpleLayoutPanel>
  </g:VerticalPanel>
</ui:UiBinder>

...because of very similar reasons: the 2 inner-most div elements around both "AAA" and "BBB" will have "position: absolute;" in their style. Again, replacing it manually for "position: relative;" makes it render ok and replacing the SimpleLayoutPanel with a SimplePanel makes it all work ok.

Is it a bug or am I missing something? If it's expected then what Panel should I use instead of a SimpleLayoutPanel as a placeholder inside a ScrollPanel or a VerticalPanel when using layout Panels in general? (a SimplePanel works, but it's not a layout Panel, so I guess I should not rely that it will work under all possible circumstances and I guess I should be using some layout Panel instead)

I would be grateful for any feedback or advice :)

Thanks!