I would like a UI with the following requirements:
- VerticalLayout with 3 sections: top, middle and bottom.
- The height of the top and bottom are fixed at 10em and 5em, respectively. The top should always remain glued to the very top of the page. The bottom should always be glued to the bottom of the page. The middle area should expand (or contract) to take up all remaining space.
- The height of the top and bottom are fixed at 10em and 5em, respectively. The top should always remain glued to the very top of the page. The bottom should always be glued to the bottom of the page. The middle area should expand (or contract) to take up all remaining space.
- When either the top or bottom or both are set to invisible the middle section should expand (or contract) to take up all available room in the page.
- The middle section has a text area containing the source of the UI so far. (also provided on this post below)
I have a live demo on the Vaadin cloud area at
HERE
http://javapda.jelastic.servint.net/top-middle-bottom/app/
In the demo there are 2 buttons in the middle area that are used to toggle the top and bottom areas. But if you begin toggling you will see that the required behavior is not achieved.
Can anyone help to figure out where it is incorrect?
Or point me to a similar sample elsewhere?
Here is the code so far:
package com.jgk.app.vaadin;
@Title("Top-Middle-Bottom")
@SuppressWarnings("serial")
public class TopMiddleBottomProofOfConceptUI extends UI implements
Button.ClickListener {
Component top, middle, bottom;
@Override
protected void init(VaadinRequest request) {
setContent(buildTopMiddleBottom());
}
private Component buildTopMiddleBottom() {
VerticalLayout layout = new VerticalLayout();
layout.setSizeFull();
layout.setMargin(false);
top = new Panel("top - 10em");
top.setHeight(10f, Unit.EM);
bottom = new Panel("bottom - 5em");
bottom.setHeight(5f, Unit.EM);
VerticalLayout middleContent = new VerticalLayout();
TextArea t = new TextArea((String)null);
t.setValue(new SupportDataSource().getSupportData("TopMiddleBottomProofOfConceptUI.java"));
t.setSizeFull();
middleContent.addComponent(buildToggleButtonComponent(null));
middleContent.addComponent(t);
middle = new Panel("middle",middleContent);
middle.setSizeFull();
layout.addComponent(top);
layout.addComponent(middle);
layout.addComponent(bottom);
return layout;
}
private Panel buildToggleButtonComponent(String caption) {
CssLayout layout = new CssLayout();
layout.setSizeFull();
//layout.setMargin(false);
layout.addComponent(new Button("Toggle Top", this));
layout.addComponent(new Button("Toggle Bottom", this));
Panel panel = new Panel(caption, layout);
panel.setSizeFull();
return panel;
}
@Override
public void buttonClick(ClickEvent event) {
if (event.getButton().getCaption().toLowerCase().indexOf("top") > -1) {
top.setVisible(!top.isVisible());
} else if (event.getButton().getCaption().toLowerCase()
.indexOf("bottom") > -1) {
bottom.setVisible(!bottom.isVisible());
} else {
throw new RuntimeException(
String.format("What button is this? '%s'", event
.getButton().getCaption()));
}
}
}
Thanks in advance.