SubWindow vs. Panel

Choosing whether to implement a subwindow or place panel components directly into a MainWindow, is always a time consuming task for me, and for certain things I find myself changing one design 4/5 times before settling on one specific implementation.

As of now, subwindow is an extension of a panel. However they diverge in a very substantial way when it comes to ui handling so here are my questions:

  1. A subwindow is always placed on top of everything else on the screen, how are the components behind it getting rendered by browsers?

  2. Also, Drag and Drop seems to still be a server-side implementation, so do the browsers only recalculate the new position of the window or is the whole window content getting completely rerendered dynamically as well? If so, is the content also rendered while we are in the process of moving the window, or only twice, when we first click with a mouse on it and then when we let go off the button?

  3. Let’s say we have a nice UI with panels set up already, but we have forgotten to add something or maybe want to implement a specif notification that we want all users to see before continuing. At the same time, we would like to avoid messing with the expand ratios etc. and having to adjust the positioning all over again etc.
    Can we potentially quasi-cheat here and implement a subwindow with isResizable()=false; and isDraggable()=false or do these get treated the same way as pop-ups by browsers? FWIW, this is not meant to be a security thing, so setModal() issues would not play a role here.

  4. Subwindows give you so much freedom, they are already draggable, resizable, closable etc. and with panels it is much harder to implement these because of how they usually have a parent container. How taxing is it for the server/browser to have several draggable/resizable subwindows placed on the screen at the same time? From what I have noticed, for some subwindows dragging can be pretty choppy, if they have certain embedded content, but I was not sure if it is the server’s or the browser’s performance that’s causing it.

  1. Sub-windows are implemented as
    elements with absolute positioning. The rendering engines in browsers are capable of rerendering the lower elements quickly if an upper element is moved.
  2. Do you mean by “Drag and Drop” moving sub-windows? It’s entirely client-side, no event is sent to the server-side when the user moves a sub-window.

It depends™. :slight_smile:

Your questions are so hypothetical, I don’t think there’s clear answer to any of them.

What I would do is make some UX designs and usability test them. Let your user stories and scenarios guide you to which one you should choose in which particular situation.

I wouldn’t worry about the performance. Just address that if and when it becomes an easy. That’s impossible to predict in advance with any system (Vaadin or not).

Sorry, I don’t think there’s a clear-cut answer to this. It really depends on the context.

You should not think of subwindows as panels - that is just a technical implementation detail, and not a very good one at that. Things will change in Vaadin 7 with respect to subwindows.

A subwindow is logically (even if not from the perspective of the browser) a
window
that is inside the browser window. It contains a layout (ComponentContainer, really) with some components. It can be moved etc. on top of the application.

A Panel is a
component
that is in a specific location in a layout and provides three things: scrolling, the possibility to restrict the scope of shortcut keys and (depending on the theme) a visual border around a group of components.

The components get rendered by Vaadin, and from the point of view of Vaadin, a subwindow simply has a z-index that places it on top of other components.

Did you actually try this? Sizes of components are recalculated (on the browser) all the time when you resize the window. Moving the window normally should not require size calculations.

It sounds like you are designing your layouts and themes in a very fragile way.

Anyway, there are often better ways to notify the user than a subwindow - have you looked at Window.showNotification(…)? PopupView? Add-ons from the directory?

How fast or choppy subwindow resizing is depends on the layout and components in it and how efficient they are to render. It is very unlikely that any such slowness would be caused by the subwindow itself. General layout optimization rules apply if it is too slow, search for them and a link to the related blog post on the forum.

At least as long as you don’t have listeners for subwindow position and size changes, everything should normally happen on the browser side.