Vaadin - which components use to organize layout - layout

Question

I am confused with the possibilities of layouting components in Vaadin 7 - intuition tells to use just layout - however there are also Panels or Components which can be useful.
I need to create view which will have static left menu and top bar (constant size, visible on each page). The only thing that will change the content is middle component - which should be scrollable.
My design therefore is:
Custom component, which assembles everything. Is has absolute size for top and left menu.
Vertical layout for left menu and Horizontal layout for upper menu
Panel for middle component, since Panel is supposed to support scrolling.
Inside of panel I placed CssLayout with content that doesn't fit the page. Expected behaviour is that there would be a scroll bar (preferably on the browser, but i guess it'd be on the panel). But What actually happens is that just the part that fits the screen is visible and the rest is cut. CssLayout is sizeFull and panel default, but I tried also other combinations and nothing has helped.
How can I combine layouts to have middle panel scrollable (if needed) and top and left one with absolute size?
Thanks a lot,

Answer 1

In Vaadin 7 & 8, you generally use one of the Layout implementations to arrange widgets within a UI subclass. For example, VerticalLayout, HorizontalLayout, and GridLayout. For pixel-positioning, use AbsoluteLayout. Of course these can be nested one within another. But don't go crazy with the nesting as it may result in overly complex HTML/CSS at runtime.
The Panel class, as the doc says, is a special container. It contains only a single component, typically another container such as a Layout. The Panel presents itself with a border and a title bar displaying its caption property. This looks something like a sub-window.
As you mentioned, a Panel supports scrolling. But keep in mind that any web page defined with a Layout also supports scrolling, obviously.
Here is a complete example app showing a stack of TextField widgets in a VerticalLayout.
package com.basilbourque.example;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import javax.servlet.annotation.WebServlet;
import java.time.Instant;
/**
* This UI is the application entry point. A UI may either represent a browser window
* (or tab) or some part of an HTML page where a Vaadin application is embedded.
* <p>
* The UI is initialized using {#link #init(VaadinRequest)}. This method is intended to be
* overridden to add component to the user interface and initialize non-component functionality.
*/
#Theme ( "mytheme" )
public class MyUI extends UI {
#Override
protected void init ( VaadinRequest vaadinRequest ) {
final VerticalLayout layout = new VerticalLayout();
for ( int i = 1 ; i <= 100 ; i++ ) {
TextField textField = new TextField( String.format( "%3d" , i ) );
textField.setWidth( 17 , Unit.EM ); // Widen the field to fully display our contents.
textField.setValue( Instant.now().toString() );
layout.addComponents( textField );
}
setContent( layout );
}
#WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
#VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
public static class MyUIServlet extends VaadinServlet {
}
}
As to your idea of nesting VerticalLayout and HorizontalLayout for nav panels, button/tool bars, and such…
Vaadin 7 & 8: Absolutely proper, and a good idea. Sometimes a GridLayout makes sense for that as well.
Vaadin 10: May also be a good idea. Or you may want to explore using new CSS3 features flexbox and Grid Layout.
As for your problem with CssLayout inside a Panel, I have rarely used either. I suspect the problem would lie in not properly defining a specific width & height of the CssLayout. You did not post details and code, so we can only speculate.