2

I am new to Vaadin and trying to know if it can suit my needs for a webapp project migration. Actually I'm already loosing my time on a simple goal: to have a layout with fixed headers and footers, and a scrollable content in the middle. I made a very basic fiddle with what I want: jsfiddle

Here is the main Vaadin class I came up with:

public class MyVaadinUI extends UI {

// attributes

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "testvaadin.aep.com.AppWidgetSet")
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {

    buildMainLayout();
}

private void buildMainLayout() {

    final VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setSizeFull();

    //HEADER
    final VerticalLayout headerLayout = new VerticalLayout();
    final Resource res = new ThemeResource("img/logo.png");
    final Image image = new Image(null, res);
    headerLayout.addComponent(image);

    //CONTENT
    final VerticalLayout contentLayout = new VerticalLayout();
    for(int i=0; i<80; i++){
        contentLayout.addComponent(new Button("TEST " + i));
    }

    //FOOTER
    final VerticalLayout footerLayout = new VerticalLayout();
    footerLayout.addComponent(new Label("--------------------------- footer --------------------------"));

    mainLayout.addComponent(headerLayout);
    mainLayout.addComponent(contentLayout);
    mainLayout.addComponent(footerLayout);
    mainLayout.setExpandRatio(contentLayout, 1);
    setContent(mainLayout);
}

}

The displayed page is OK on startup, but when I scroll down, the footer also scrolls (it is not fixed).

On startup: startup

When scrolled:

scrolled down

I browsed a lot of pages on this topic, but I did never see any correct answer. This seems to be rather complicated in Vaadin, although it is very simple in HTML; Vaadin may not suit my needs. Anyway, do you know how can I achieve this behaviour? Thanks!

Péter Török
  • 114,404
  • 31
  • 268
  • 329
toni07
  • 356
  • 7
  • 20
  • if you prefer fiddling with html, then maybe a CustomLayout would help (see http://stackoverflow.com/questions/9563406/how-to-use-html-template-with-vaadin#9564654). – cfrick Jan 14 '15 at 10:52
  • Hi, thanks for your reply but actually I would not like to go custom for my very first requirement. – toni07 Jan 14 '15 at 11:00

1 Answers1

10

You can use a Panel to create a scrollable center content area. See the example below.

For the panel to work, everything in the component hierarchy must be setSizeFull (or equivalent) and the content of the panel must not (in the example mainLayout and contentPanel are 100%, but contentLayout is not (implicit))

@Grapes([
        @Grab('org.vaadin.spring:spring-boot-vaadin:0.0.3'),
        @Grab('com.vaadin:vaadin-client-compiled:7.4.0.beta1'),
        @Grab('com.vaadin:vaadin-themes:7.4.0.beta1'),
       ])
import com.vaadin.ui.*

@org.vaadin.spring.VaadinUI
class MyUI extends UI {

    protected void init(com.vaadin.server.VaadinRequest request) {
        final headerLayout = new VerticalLayout(new Label('HEADER'))
        final footerLayout = new VerticalLayout(new Label('FOOTER'))

        final contentLayout = new VerticalLayout()
        80.times{ contentLayout.addComponent(new Button("TEST $it")) }
        // XXX: place the center layout into a panel, which allows scrollbars
        final contentPanel = new Panel(contentLayout)
        contentPanel.setSizeFull()

        // XXX: add the panel instead of the layout
        final mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout)
        mainLayout.setSizeFull()
        mainLayout.setExpandRatio(contentPanel, 1)
        setContent(mainLayout)
    }

}

(runs standalone with spring run vaadin.groovy)

cfrick
  • 35,203
  • 6
  • 56
  • 68
  • Thanks! This has to be translated to Java (not hard...) but it works great! I see the main point here is to wrap the contentLayout into a Panel, because I tried the same code as yours without the Panel, and it does not work. So strange I could not find the answer anywhere. – toni07 Jan 14 '15 at 13:45
  • exactly. i have added some comments on the interesting parts. layouts might only get recalculated, if there are changes in UI also (sometimes depending on the theme) they might have odd overflow behaviours. another alternative would be the use of an `CSSLayout` and deal with the setup in CSS. Panel is great, if you don't like to fiddle with the browser end though. – cfrick Jan 14 '15 at 13:56