Layout Resizing Problem

[Richard8 (Richard Gal)]

Dear Vaadin Experts

I would like to ask for your help in the following:

I implemented an application (using a Model-View-Presenter approach) and I have found that sometimes the layout of my main view is not resized correctly. More specifically:

I have the following view hierarchy

AppView (VerticalLayout)
 |
 |- CityBuilderView (HorizontalLayout)
 |    |
 |    |- CityEditorView (VerticalLayout)
 |    |
 |    `- TourEditorView (VerticalLayout)
 |
 `- TourDetailsEditorView (HorizontalLayout)

2. The application starts with the AppView/CityBuilderView/CityEditorView, whose height is small.
3. Then, selecting “TOUR” in the tree-view displays AppView/CityBuilderView/TourEditorView, whose height is bigger.
4. Then, selecting “Tour Details” from the context menu of the “TOUR” tree item displays AppView/TourDetailsEditorView
5. Then, selecting “BackToCity” results in displaying AppView/CityBuilderView/CityEditorView again.
6. Then, selecting “TOUR” in the tree-view displays AppView/CityBuilderView/TourEditorView again,
   but this time only the top part of the view is displayed
   . Actually with a height equalling the previous, smaller view.
   

Selecting “CITY” and then “TOUR” in the tree-view fixes AppView/CityBuilderView/TourEditorView.

I extracted the relevant code into an Eclipse project to demonstrate the issue. Am I doing something wrong or is it a layouting bug?

Thanks for your help in advance,
Richie.
11508.zip (3.62 MB)

[Richard8 (Richard Gal)]

I was trying to debug the client-server communication while going through the steps that reproduce the issue and compared them with the communication happening in the unproblematic steps and I found them identical. It looks as if the issue was happening upon client site rendering.

Has anyone encountered a similar issue?

Has anyone had the chance to look into the code I attached?

BR,
Richie.

[Michal (Michal Kuleta)]

I’ve downloaded your code and you’ve made some mistakes all of us make when starting with Vaadin

First of all, when working with layouts, “Analyze layouts” feature is your best friend. It can be used by launching application in debug mode, thus getting floating “Debug” window with some buttons. You can do it by visiting: http://localhost:8080/LayoutTest?debug
Some things worth remembering:

• Component with full width/height cannot be added to parent with it’s width/height undefined. When a parent has undefined size, it scales to the size of it’s children. When a child has full size, it takes parent area and fills it completely. See the issue here?
• Newly created VerticalLayout has full width and undefined height
• Newly created Panel, if not given a layout instance in constructor, always contains VerticalLayout with sizes mentioned above - Panel’s children are added to that layout
• Newly created Panel also has full width and undefined height
  

Analyze layouts dumps some info both on the client and server console and their output differs slightly, personally I find the server side message more useful.

Getting to the point - one of issues with your layout is that AppViewImpl has undefined height and it gets filled with Panels that have full height - see the note above

As a side note, using “Analyze layouts” on your sample application gave me some interesting stack trace:[code]
ComponentDetail not found for VVerticalLayout with PID PID_SAppView. This should not happen.
(TypeError): Cannot read property ‘eventListeners_0’ of undefined stack:
TypeError: Cannot read property ‘eventListeners_0’ of undefined
at $hasEventListeners_0
at $hasEventListeners
at $hasEventListener
at $handleEventHandlerRegistration
at Object.updateFromUIDL_16 [as updateFromUIDL]

at $updateFromUIDL_13
at Object.execute_11 [as execute_0]

at runWhenWidgetsLoaded
at $handleReceivedJSONMessage
at Object.onResponseReceived
type: non_object_property_load arguments: eventListeners_0,
[/code]
Vaadin team, anyone reading?

[Artur (Artur Signell)]

@Michal Kuleta

As a side note, using “Analyze layouts” on your sample application gave me some interesting stack trace:[code]
ComponentDetail not found for VVerticalLayout with PID PID_SAppView. This should not happen.
(TypeError): Cannot read property ‘eventListeners_0’ of undefined stack:
TypeError: Cannot read property ‘eventListeners_0’ of undefined
at $hasEventListeners_0
at $hasEventListeners
at $hasEventListener
at $handleEventHandlerRegistration
at Object.updateFromUIDL_16 [as updateFromUIDL]

at $updateFromUIDL_13
at Object.execute_11 [as execute_0]

at runWhenWidgetsLoaded
at $handleReceivedJSONMessage
at Object.onResponseReceived
type: non_object_property_load arguments: eventListeners_0,
[/code]
Vaadin team, anyone reading?

If it is reproducible, please create a ticket for it at http://dev.vaadin.com and attached the (preferrably minimized) application / test that causes it.

[Michal (Michal Kuleta)]

@Artur Signell

If it is reproducible, please create a ticket for it at http://dev.vaadin.com and attached the (preferrably minimized) application / test that causes it.

It is reproducible - happens every time for the sample application posted by Richard Gal. I would rather not go as deep into the application sources. Richard, if you could strip the application to the bare minimum required to reproduce this error, it would be greatly appreciated.

[Richard8 (Richard Gal)]

@Michal Kuleta

It is reproducible - happens every time for the sample application posted by Richard Gal. I would rather not go as deep into the application sources. Richard, if you could strip the application to the bare minimum required to reproduce this error, it would be greatly appreciated.

Certainly, I will.

I am quite busy during this week, but I will extract the bare minimum code that reproduces the issue during the weekend, the latest.

Thanks for your answers,
Richie

[Richard8 (Richard Gal)]

@Michal Kuleta

Getting to the point - one of issues with your layout is that AppViewImpl has undefined height and it gets filled with Panels that have full height - see the note above

I have

2. eliminated all issues reported by “Debug Window / Analyze Layouts”
3. stripped the application to a minimal one, which reproduces the rendering problem.
   

Still, my original view rendering problem is still there.

The stripped application has the following view hierarchy:

AppView (VerticalLayout)
 |
 |- EditorsView (HorizontalLayout)
 |    |
 |    |- EditorShortView (VerticalLayout)
 |    |
 |    `- EditorTallView (VerticalLayout)
 |
 `- AnotherView (VerticalLayout)

The rendering problem can be reproduced by the following steps:

2. Start the application. As a result, “AppView / EditorsView / EditorShortView” is displayed.
3. Click the “Tall View” button. As a result, “AppView / EditorsView / EditorTallView” is displayed.
4. Click the “Another View” button. As a result, “AppView / AnotherView” is displayed with a link to go “Back”
5. Click “Back”. As a result “AppView / EditorsView / EditorShortView” is displayed.
6. Click “Tall View”. As a result, “AppView / EditorsView / EditorTallView” is displayed but this time this view is truncated (Its bottom part is clipped).
   

Then if your click

• “Short View” and then “Tall View”, OR
• Refresh the browser
  

, “AppView / EditorsView / EditorTallView” is rendered correctly

The application is attached.

Thanks in advance for any help,
Richie.

PS.: the attached application does not result in the stack trace in red inside the Debug Window after clicking “Analyze Layouts”. However, if you add a debug ID (
setDebugId(“AppView”)
) to
AppView
, then the stack trace appears.
11524.zip (3.61 MB)

[Richard8 (Richard Gal)]

Hello

Did anybody have the chance to take a look at the code I attached in my previous post? Unfortunately, I haven’t been able to cope with the layout issue in it, yet.

Am I making a silly mistake in the attached code or is it an issue in Vaadin?

Thanks for your attention,
Richie.