Formatting issues in View - Vaadin

Question

I have created a view as below:

The menu Layout or the left vertical layout does not have the entire Layout filled in Blue color. Its only Blue till the respective Buttons are present.

I need to have the entire Menu Layout in Blue Color and retain the Buttons in same position as it is now. So, to achieve it I uncommented the below code in the view

menuLayout.setSizeFull();

But the entire menu layout becomes very bad to look as below. please see the below snapshot

Could someone please help on this?

The code used is as below:

public class AppointmentView  extends CustomComponent implements View,Button.ClickListener {


private static final long serialVersionUID = 1L;
public static final String NAME = "Appointment";
private VerticalLayout mainLayout = new VerticalLayout();
private VerticalLayout upperSection = new VerticalLayout();
private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
private VerticalLayout menuLayout = new VerticalLayout();
private VerticalLayout contentLayout = new VerticalLayout();
private Button newContact = new NativeButton("Add contact");
private Button search = new NativeButton("Search");
private Button share = new NativeButton("Share");
private Button help = new NativeButton("Help");
private NavigationTree tree = new NavigationTree();

public AppointmentView()    {
    setSizeFull();
    upperSection.addComponent(new Label(""));
    menuLayout.addComponent(new Label(""));
    contentLayout.addComponent(new Label(""));  
    menuLayout.setSpacing(true);
    //menuLayout.setSizeFull();
    menuLayout.setStyleName(Reindeer.LAYOUT_BLUE);
    lowerSection.addComponent(menuLayout);
    lowerSection.addComponent(contentLayout);
    lowerSection.setSizeFull();
    upperSection.setStyleName(Reindeer.LAYOUT_BLUE);
    upperSection.addComponent(createToolbar());
    lowerSection.setSplitPosition(30);
    menuLayout.addComponent(createVerticalToolbar());
    mainLayout.addComponent(upperSection);
    mainLayout.addComponent(lowerSection);
    mainLayout.setSizeFull();
    mainLayout.setExpandRatio(lowerSection, 1);
    setCompositionRoot(mainLayout);
}

private Component createToolbar() {
    HorizontalLayout layout = new HorizontalLayout();
    Embedded em = new Embedded("", new ClassResource("../../com/image/logo.png"));
    layout.addComponent(em);
    layout.setComponentAlignment(em, Alignment.MIDDLE_RIGHT);
    layout.setExpandRatio(em, 1);
    layout.setStyleName("toolbar");
    layout.setMargin(true);
    layout.setSpacing(true);
    layout.setWidth("100%");
    return layout;
}

@SuppressWarnings("deprecation")
private Component createVerticalToolbar() {
    VerticalLayout lo = new VerticalLayout();
    newContact.setStyleName("img");
    newContact.setWidth("100%");
    newContact.setIcon(new ClassResource("../../com/image/document-add.png"));
    newContact.addListener((Button.ClickListener) this);
    lo.addComponent(newContact);
    search.setIcon(new ClassResource("../../com/image/folder-add.png"));
    search.addListener((Button.ClickListener) this);
    search.setWidth("100%");
    lo.addComponent(search);
    share.setIcon(new ClassResource("../../com/image/users.png"));
    share.addListener((Button.ClickListener) this);
    share.setWidth("100%");
    lo.addComponent(share);
    help.setIcon(new ClassResource("../../com/image/help.png"));
    help.addListener((Button.ClickListener) this);
    help.setWidth("100%");
    lo.addComponent(help);

    lo.setMargin(true);
    lo.setSpacing(true);
    lo.setWidth("100%");
    lo.setSizeFull();
    return lo;
}

public void buttonClick(ClickEvent event) {
    final Button source = event.getButton();
    if (source == search) {
        Notification.show("Search hit");
    } else if (source == newContact) {
        Notification.show("New contact");
    } else if (source == help) {
        Notification.show("Help");
    } else if (source == share) {
        Notification.show("Share");
    }
}

@Override
public void enter(ViewChangeEvent event) {
    // TODO Auto-generated method stub

}

}

Answer 1

You nested two VerticalLayouts for the left menu.

When you wish to fill the whole height, then setting the height to 100% is the correct way to do it.

A VerticalLayout usually distributes the space between the components. If you don't wish this, then you can set expansionratios to tell it which component should use how much space.

In the constructor change the line calling the createVerticalToolbar to this:

.....
createVerticalToolbar(menuLayout);
.....




private void createVerticalToolbar(VerticalLayout lo) {
    newContact.setStyleName("img");
    newContact.setWidth("100%");
    newContact.setIcon(new ClassResource("../../com/image/document-add.png"));
    newContact.addListener((Button.ClickListener) this);
    lo.addComponent(newContact);
    search.setIcon(new ClassResource("../../com/image/folder-add.png"));
    search.addListener((Button.ClickListener) this);
    search.setWidth("100%");
    lo.addComponent(search);
    share.setIcon(new ClassResource("../../com/image/users.png"));
    share.addListener((Button.ClickListener) this);
    share.setWidth("100%");
    lo.addComponent(share);
    help.setIcon(new ClassResource("../../com/image/help.png"));
    help.addListener((Button.ClickListener) this);
    help.setWidth("100%");
    lo.addComponent(help);

    // Add new component which uses up the remaining space
    Label lbl= new Label("About");
    lo.addComponent(lbl);    
    lo.setExpandRatio(help, 20);

    lo.setMargin(true);
    lo.setSpacing(true);
    lo.setWidth("100%");
    lo.setSizeFull();
    return lo;
}