I’m a little bit confused with application level windows, and layouts.
My goal is to achieve a quite common result.
It’s similar to Vaadin.com or LinkedIn.com websites.
On the top, you have a header “band” with logo, menu, user name and search. It remains forever.
In the middle, you have a centered area (fixed width), the main area.
On the bottom (probably after you scrolled down the web page), you have the footer, with extra logo and links. As the header, it is displayed for every page.
With html-centric technologies, we used sitemesh to achieve that.
so you have 3 containers - header, center, footer. All 3 can be a HorizontalLayout. Also, you have to set a VerticalLayout for the window (it is set by default), lets call it “main”, so in very general, your code will look something similar:
VerticalLayout main = ... // (get or create vertical layout for your window)
HorizontalLayout header = new HorizontalLayout();
HorizontalLayout footer = new HorizontalLayout();
HorizontalLayout center = new HorizontalLayout();
header.setWidth("100%");
footer.setWidth("100%");
center.setSizeFull();
main.addComponent(header);
main.addComponent(center);
main.addComponent(footer);
// Now make center layout expandable
main.setExpandRatio(center,1.0f);
Now you can add actual “business” UI components to your header,footer and to the center area, build sublayouts, etc.
Because of the urls.
for the url: http://vaadin.com/forum, getWindow(“forum”) is called by vaadin, and I can return (from my version of that method) a new ForumWindow if none exist yet.
How would you do ?
From your answer, I guess, you have only 1 application window (main). Would you, in the getName, return always that main window, but just before, replace the center component inside that window? There would be no ForumWindow but a ForumPanel or something like that.
As Vaadin is a Application centric framework - not a page centric - simulating pages is a bit of extra trouble in Vaadin. Sorry.
The best example on this is Sampler - take a look of its source code for the navigation. It implements page navigation in such way that all the control is in the code, but all logical “pages” of the system update URL and are fully bookmarkable. It also supports multiple browser windows properly.
this depends on what style you want to get done in your application. Typically, Vaadin applications are single-page, so there are no page reloads and therefore there is a single main window per application. But in order to make your application bookmarkable, you may use URL anchors that will trigger events in your application, so you can , for instance, switch center view from one component to another. The url will be as foolows:
Another approach, is made the application old-stylish html mode, where you can create several windows, each with its own name. By navigating to url’s extended with the window name, your application will show different content. In this case just create the necessary number of windows, each with the same layout and common components on it and register them in your application, then navigate to url’s. The url’s will be a bit different:
And full page reload will occur when you switch from one url to another.
Another approach for the second html-stylish variant is to use custom layout. You may build overall page design and move it to custom layout html file, then use this custom layout file in different windows by adding different components into the layout slots. This will be the most html-page like design for the end user.
Of course, you are free to use both techniques in your application.