Just How do you center the Main Window?

Vaadin 6 / 7 / 8 Framework UI
1

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

2

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);
3

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 );
4

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();
5

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 ?

6

@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);
    }
}
7

You have to set main window for your application, so call something like setMainWindow(new Window()); before the NPE.

8

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);
    }
}
9

Im using several views… like

public class HomeViewImpl extends VerticalLayout implements HomeView {

how can I center a view?