I’m quite new to Vaadin and I’m trying to design the UI of our webapp.
How would you implement, using verticalLayout and horizontalLayout a design that look like Vaadin website meaning:
1/ the black banner that goes from one side of the screen to another
2/ a Main content using 980px, centered
3/ a footer that can extend from one side to another
The design that you mentioned is feasible. As you said, have a VerticalLayout as the mainLayout and add three Horizontal/VerticalLayout into it. If you want the top and bottom layouts always visible, then set the main VerticalLayout to size full, change the main content layout into a panel and give setSizeFull() and mainLayout.setExpandRatio(mainContent, 1); to it.
Just a word of caution: You mentioned website in your header. If your creating web applications then Vaadin is splendid for that purpose, but if it in fact is a more traditional web page with static content that you’re creating, then maybe another framework will fit the purpose better. That depends a lot on what you need.