Creating a layout with menubar and toolbar ?

hello all

I’m trying to create a layout with menubar and toolbar but does not work.

I’m trying as below.

public class FightsysUI extends UI {
@Override
protected void init(VaadinRequest request) {
    //container principal 
    HorizontalLayout hLayout = new HorizontalLayout();
    hLayout.setSizeFull();
    
    //layout represent a toolbar
    HorizontalLayout toolbar = new HorizontalLayout();
    
    //image align on center my page
    Image imgBG = new Image("Image", new ThemeResource("../imagens/imagem01.png"));
    
    //menubar
    final MenuBar menu = new MenuBar();
    menu.setWidth("100%");
    menu.addItem("Customer", null, null);
    menu.addItem("Reports", null, null);
    menu.addItem("About", null, null);
    
    //buttons toolbar
    toolbar.addComponent(new Button("OK"));
    toolbar.addComponent(new Button("OK01"));
    toolbar.addComponent(new Button("OK02"));
    toolbar.addComponent(new Button("OK03"));
    toolbar.addComponent(new Button("OK04"));
    
    //add components
    hLayout.addComponent(menu);
    hLayout.addComponent(imgBG);
    hLayout.addComponent(toolbar);
            
    setContent(hLayout);
    
}

}

The problem is that all components align on right menubar and I want that align to below of menubar and the Image align on center.

Any idea ?

13331.jpg

now works !

here how I did.

public class FightsysUI extends UI {
@Override
protected void init(VaadinRequest request) {
    //container principal 
	VerticalLayout vLayout = new VerticalLayout();    	
	vLayout.setSpacing(false);
	setContent(vLayout);
	
    HorizontalLayout hLayout = new HorizontalLayout();
    hLayout.setSizeFull();
    
    //layout represent a toolbar
    HorizontalLayout toolbar = new HorizontalLayout();
    
    //image align on center my page
    Image imgBG = new Image("Image", new ThemeResource("../imagens/imagem01.png"));
    
    
    //menubar
    final MenuBar menu = new MenuBar();
    menu.setWidth("100%");
    menu.addItem("Customer", null, null);
    menu.addItem("Reports", null, null);
    menu.addItem("About", null, null);
    
    //buttons toolbar
    toolbar.addComponent(new Button("OK"));
    toolbar.addComponent(new Button("OK01"));
    toolbar.addComponent(new Button("OK02"));
    toolbar.addComponent(new Button("OK03"));
    toolbar.addComponent(new Button("OK04"));
    
    //add components        
    hLayout.addComponent(menu);        
    vLayout.addComponent(hLayout);
    vLayout.addComponent(toolbar);
    vLayout.addComponent(imgBG);
    
}

}

thanks

Another way could be using HTML Layouts