Scrollable Window contents when screen smaller than window contents

Hi.

I made it to get a Window with contents which are bigger than the resolution of the screen and vaadin 7.3.5 with valo theme automatically scrolls the contents. This is fine.
But now I want to add a footer and this footer should be also visible (like the window outer.header) all the time, regardles how the window will be sized:
Working example:


| |
| OuterHeader |
||
| |
| Scrollable Content |
|
|

Wanted behavior:


| |
| OuterHeader |
||
| |
| Scrollable Content |
|
|
| |
| Footer |
|_____________________|

Has anyone a hint how to achieve this?

I can use a VerticalLayout in the conten Area but the footer inside this gets scrolled as well.

Thank yout in advance.
Christoph

Hello, here is my solution:

[code]
package cz.pse.services.component;

import com.vaadin.event.ShortcutAction.KeyCode;
import com.vaadin.ui.AbstractComponentContainer;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Component;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

/**

  • Centered, not closable window with “OK” and “Cancel” buttons on bottom.
  • Default action on button click is hiding the window.

*/
@SuppressWarnings(“serial”)
public abstract class WindowWithButtons extends Window implements ClickListener, ConfirmationWindow{

protected Button ok = new Button("OK");
protected Button cancel = new Button("Cancel");

private AbstractComponentContainer viewer;

protected ConfirmationState state;

public WindowWithButtons(){
    super();
    buildMainLayout();
}

public WindowWithButtons(String caption){
    this();
    setCaption(caption);
}

/**
 * Creates the inside of the window
 */
protected void buildMainLayout() {
    center();
    setClosable(false);
    VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setMargin(true);
    mainLayout.setSpacing(true);
    viewer = createViewer();
    mainLayout.addComponent(viewer);
    viewer.setSizeFull();
    mainLayout.setExpandRatio(viewer, 1);
    Component buttonPannel = createButtons();
    mainLayout.addComponent(buttonPannel);
    buttonPannel.setWidth("100%");

// mainLayout.setSizeFull();
setContent(mainLayout);
}

/**
 * Creates bottom panel with buttons
 *
 * @return
 */
protected Component createButtons() {
    HorizontalLayout layout = new HorizontalLayout();
    layout.setSpacing(true);
    ok.addClickListener(getOKAction());
    ok.setWidth(7, Unit.EM);
    ok.setClickShortcut(KeyCode.ENTER);
    ok.addStyleName("primary");
    ok.setId(getClass().getSimpleName() + ".OK");
    layout.addComponent(ok);
    layout.setComponentAlignment(ok, Alignment.MIDDLE_LEFT);
    cancel.addClickListener(getCancelAction());
    cancel.setWidth(7, Unit.EM);
    cancel.setClickShortcut(KeyCode.ESCAPE);
    cancel.setId(getClass().getSimpleName() + ".Cancel");
    layout.addComponent(cancel);
    layout.setComponentAlignment(cancel, Alignment.MIDDLE_RIGHT);
    return layout;
}

/**
 * Updates confirmation state depending on clicked button: sets {@link ConfirmationState#OK} for
 * OK button and {@link ConfirmationState#CANCEL} for any other button.
 *
 * @param event
 */
protected void updateState(ClickEvent event){
    state = event.getButton() == ok ? ConfirmationState.OK : ConfirmationState.CANCEL;
}

@Override
public void buttonClick(ClickEvent event) {
    updateState(event);
    setVisible(false);        
}

@Override
public void setVisible(boolean visible) {
    state = null;
    super.setVisible(visible);
}

@Override
public ConfirmationState getConfirmationState() {
    return state;
}

/**
 * @return main part of window (above button's panel)
 */
protected AbstractComponentContainer getViewer() {
    return viewer;
}

/**
 * Creates main part of window (above button's panel)
 *
 * @return
 */
protected AbstractComponentContainer createViewer() {
    VerticalLayout mainLayout = new VerticalLayout();
    return mainLayout;
}

/**
 * @return action on OK button click (hide the window as default)
 */
protected ClickListener getOKAction() {
    return this;
}

/**
 * @return action on Cancel button click (hide the window as default)
 */
protected ClickListener getCancelAction() {
    return this;
}

/**
 * Sets caption on OK
 *
 * @param caption
 */
protected void setOKCaption(String caption){
    ok.setCaption(caption);
}

/**
 * Sets caption on Cancel button
 *
 * @param caption
 */
protected void setCancelCaption(String caption){
    cancel.setCaption(caption);
}

}
[/code]Unfortunatelly you need to set window size.

Cheers
Agata

Hi Agata.

Thanks or your answer. I tried your code, buts still the same result that the buttons disapear and I have to scroll.
Do you use any styles?

I did this

public class MyWindow extends WindowWithButtons{

  public MyWindow ()
  {
    super();
    setWidth(600, Unit.PIXELS);
    setHeight(200, Unit.PIXELS);
    ...
    getViewer().addComponent(myContent);
  }

}

Thanks,
Christoph

Maybe you could use something like this:

[code]
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setSizeFull();
setContent(layout);

    HorizontalLayout hl_header = new HorizontalLayout();
    hl_header.setHeight("50px");
    hl_header.setWidth("100%");
    hl_header.addComponent(new Label("Header"));
    
    Panel pnl_content = new Panel();
    VerticalLayout vl_content = new VerticalLayout();
    vl_content.setSizeUndefined();
    addABunchOfContent(vl_content);
    pnl_content.setContent(vl_content);
    pnl_content.setSizeFull();
    
    HorizontalLayout hl_footer = new HorizontalLayout();
    hl_footer.setHeight("50px");
    hl_footer.setWidth("100%");
    hl_footer.addComponent(new Label("Footer"));
    
    layout.addComponent(hl_header);
    layout.addComponent(pnl_content);
    layout.addComponent(hl_footer);
    layout.setExpandRatio(hl_header, 0);
    layout.setExpandRatio(pnl_content, 1f);
    layout.setExpandRatio(hl_footer, 0);

}


public void addABunchOfContent(VerticalLayout layout){
    for(int i = 0; i<100; i++){
        Label lbl = new Label("Content");
        layout.addComponent(lbl);
    }
}

[/code]It’s inside init because i tested it inside the UI

I don’t use any styles.
Try:

  1. when instantiating the Window : getViewer().addComponent(mainComponent()); where
    mainComponent()
    returns
    Panel.
  2. Uncomment line 54:
    mainLayout.setSizeFull();

Agata

Thanks for your solutions.
It’s working now :slight_smile: