Vaadin-Basis-layout: fixed header und footer + scrollable Inhalt

Ich bin neu in Vaadin und zu versuchen, zu wissen, ob es für meine Bedürfnisse für eine webapp-Projekt migration.
Eigentlich bin ich schon zu verlieren, meine Zeit auf einem einfachen Ziel: ein layout mit festen Kopf-und Fußzeilen, und eine scrollbare Inhalt in der Mitte.
Ich machte eine sehr einfache Geige mit, was ich will:
jsfiddle

Hier ist die Haupt-Vaadin-Klasse, die ich kam mit:

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);
}

}

Die angezeigte Seite ist OK auf Start, aber wenn ich scrollen Sie nach unten, in der Fußzeile auch scrolls (es ist nicht festgelegt).

Auf Start:
Vaadin-Basis-layout: fixed header und footer + scrollable Inhalt

, Wenn gescrollt:

Vaadin-Basis-layout: fixed header und footer + scrollable Inhalt

Stöberte ich auf vielen Seiten zu diesem Thema, aber ich hab mich nie sehen, keine richtige Antwort. Das scheint ziemlich kompliziert, in Vaadin, obwohl es ist sehr einfach in HTML; Vaadin kann nicht meine Bedürfnisse anzupassen.
Eh, weißt du, wie kann ich das erreichen dieses Verhalten?
Danke!

  • wenn Sie lieber das hantieren mit html, dann vielleicht ein CustomLayout helfen würde (siehe stackoverflow.com/questions/9563406/...).
  • Hi, danke für deine Antwort aber eigentlich möchte ich nicht gehen, Brauch für meine erste Erfordernis.
InformationsquelleAutor toni07 | 2015-01-14
  1. 11

    Können Sie eine Panel erstellen eines scrollbaren center content-Bereich. Siehe das Beispiel unten.

    Für die Tafel zu arbeiten, alles, was in der Hierarchie muss setSizeFull (oder gleichwertig) und der Inhalt des Fensters muss nicht (in dem Beispiel mainLayout und contentPanel sind 100%, aber contentLayout ist keine (implizite))

    @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)
    }

}

    (läuft standalone mit spring run vaadin.groovy)

    • Danke! Diese werden übersetzt in Java (nicht schwer...), aber es funktioniert Super! Ich sehe den wichtigsten Punkt hier ist, wickeln Sie die contentLayout in ein Panel, da habe ich versucht den gleichen code wie deine ohne das Panel, und es funktioniert nicht. So seltsam, ich konnte nicht die Antwort finden überall.
    • genau. ich habe einige Kommentare auf die interessanten Teile. layouts vielleicht nur neu berechnet, wenn es änderungen in der UI auch (manchmal je nach Thema) vielleicht haben ungerade überlauf Verhaltensweisen. eine weitere alternative wäre die Verwendung eines CSSLayout und befassen sich mit der Einrichtung in CSS. - Panel ist groß, wenn Sie es nicht mögen, wenn man mit der browser-Ende obwohl.
    InformationsquelleAutor cfrick
Schreibe einen Kommentar