Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Just How do you center the Main Window?
Hi people,
I have a main Window that I want to center in the middle of the page and then add components to it
........
MainWindow win = new MainWindow(); // MainWIndow extends Window
VerticalLayout layout = new VerticalLayout();
layout.setWidth("400");
Button button = new Button();
layout.addComponent(button);
layout.setComponentAlignment(button, Alignment.TOP_CENTER);
win.addComponent(layout);
win.center()
// win.setPositionY(100); DIDN'T WORK EITHER
// win.setPositionX(100); DIDN'T WORK EITHER
setMainWindow(win);
................
...
I have tried the above and the center method and the setPosition does not work. My window is still stuck in the top left corner. What am I doing wrong? How can I bring it in the middle? Any help? Using Vaadin 6.3.0
First you need to make the window root layout (content) full size, and then you can position the inner layout using setComponentAlignment. Like this:
VerticalLayout content = (VerticalLayout) getMainWindow().getContent();
content.setSizeFull();
content.setComponentAlignment(layout, Alignment.MIDDLE_CENTER);
And if you're going to center some non-full-size compoennt, say want to add a button or label to the window(panel) center, you'll need to add a couple of sizers and set an expand rations:
Label sizer1 = new Label("");
Label sizer2 = new Label("");
sizer1.setHeight("100%");
sizer2.setHeight("100%");
addComponent ( sizer1 );
addComponent ( myButton );
addComponent ( sizer2 );
setExpandRatio ( sizer1, 0.5f );
setExpandRatio ( sizer2, 0.5f );
setComponentAlignment( myButton, Alignment.MIDDLE_CENTER );
Thanks guys for you suggestions. I can center components onto any layout. The Issue am facing is centering the main window so I can add layout to a centered window
I want this code to center the main window as in this code
Window win = this.getMainWindow();
win.setSizeFull();
win.center();
@Henri am getting a null pointer Exception with this code
VerticalLayout content = (VerticalLayout) getMainWindow().getContent();
main window == web browser page. So if you call
( (VerticalLayout) getContent() ).setSizeFull ();
- the working area will shrink to entire browser's window, both horizontally and vertically.
Then, if you have, say, another layout (not 100% W/H) with your UI which you want to be displayed in the center of main window - try my example above with the sizers.
getContent() should not return NULL if you're creating standard Vaadin's Window. How do you create it ?
@Dmitri
This code throws the null pointer exception
public class Main extends Application {
@Override
public void init() {
VerticalLayout content = (VerticalLayout) getMainWindow().getContent();// NP here
Label sizer1 = new Label("");
Label sizer2 = new Label("");
Button myButton = new Button("CEnter Me Please");
sizer1.setHeight("100%");
sizer2.setHeight("100%");
content.addComponent(sizer1);
content.addComponent(myButton);
content.addComponent(sizer2);
content.setExpandRatio(sizer1, 0.5f);
content.setExpandRatio(sizer2, 0.5f);
content.setComponentAlignment(myButton, Alignment.MIDDLE_CENTER);
}
}
You have to set main window for your application, so call something like setMainWindow(new Window()); before the NPE.
Thanks guys managed to center the window at last with this code
public class HashPayMain extends Application {
@Override
public void init() {
MainWindow main = new MainWindow();
VerticalLayout content = new VerticalLayout();
setTheme("chameleon-blue");
Content contPanel = new Content();
content.addComponent(contPanel);
content.setComponentAlignment(contPanel, Alignment.MIDDLE_CENTER);
main.setContent(content);
setMainWindow(main);
}
}
Im using several views.. like
public class HomeViewImpl extends VerticalLayout implements HomeView {
how can I center a view?