Formatting issues in View - Vaadin

I have created a view as attached file “AppointmentView.png”


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 snapshot Bad Menu Layout.png

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

}

}

Could someone please help on this?

16465.png
16466.png

I tried setting the height to 100% as well as setExpandRatio for the buttons in menu layout . It did not work. Even if I add a new component label as above, it does not consume the entire vertical layout.

can I add a button or link at the bottom of layout on Vertical Layout? Please let me know for any suggestions

try lo.setComponentAlignment(myButton, Alignment.BOTTOM_CENTER)

In the createVerticalToolbar() I added the below lines, but it did not work.

lo.setComponentAlignment(newContact, Alignment.BOTTOM_CENTER); lo.setComponentAlignment(search, Alignment.BOTTOM_CENTER); lo.setComponentAlignment(showAll, Alignment.BOTTOM_CENTER); lo.setComponentAlignment(help, Alignment.BOTTOM_CENTER); createVerticalToolbar() code:

[code]
private Component createVerticalToolbar() {
VerticalLayout lo = new VerticalLayout();
newContact.setStyleName(“img”);
newContact.setHeight(“100%”);
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.setHeight(“100%”);
search.setWidth(“100%”);
lo.addComponent(search);
showAll.setIcon(new ClassResource(“…/…/com/image/users.png”));
showAll.addListener((Button.ClickListener) this);
showAll.setHeight(“100%”);
showAll.setWidth(“100%”);
lo.addComponent(showAll);
help.setIcon(new ClassResource(“…/…/com/image/help.png”));
help.addListener((Button.ClickListener) this);
help.setHeight(“100%”);
help.setWidth(“100%”);
lo.addComponent(help);
// Add new component which uses up the remaining space

    lo.setMargin(true);
    lo.setSpacing(true);
    lo.setHeight("250px");
    lo.setWidth("400px");
    lo.setSizeFull();
    lo.setComponentAlignment(newContact, Alignment.BOTTOM_CENTER);
    lo.setComponentAlignment(search, Alignment.BOTTOM_CENTER);
    lo.setComponentAlignment(showAll, Alignment.BOTTOM_CENTER);
    lo.setComponentAlignment(help, Alignment.BOTTOM_CENTER);
    return lo;
}

[/code]Still the menu Layout is not fully filled with Blue