Problem about "login page with setMainWindow"?

I write a class which extends Application. In it,there are two method related to the MainWindow.One is init(), I setMainWindow with a LoginForm class which extends Window. Another is startInit(), I remove the MainWindow by removeWindow(getMainWindow()). The problem is when I setMainWindow with LoginForm, if I want to change it with others, the MainWindow will not change. The detail codes are below:

MainApplication.java:

public class LoginDialog extends Window {

	public LoginDialog() {
		LoginForm login = new LoginForm();
		login.setWidth("100%");
		login.setHeight("300px");
		login.addListener(new LoginForm.LoginListener() {
			public void onLogin(LoginEvent event) {
				boolean boo = authenticate(event.getLoginParameter("username"), event.getLoginParameter("password"));
				if(boo){
					MainApplication app = (MainApplication) getApplication(); 
					app.startInit();
				}else
					getWindow().showNotification("Error", "Fail to login! Check Username and Password!", Window.Notification.TYPE_ERROR_MESSAGE);
			}
		});
		addComponent(login);
	}
	
	public boolean authenticate(String login, String password){
		if("admin".equals(login) && "123456".equals(password)){
			return true;
		}
		return false;
	}
}
 

MainApplication.java:

public class MainApplication extends Application {

	private TabSheet right = new TabSheet();
	private ICEPush pusher = new ICEPush();

	public boolean start = false;

	@Override
	public void init() {
		// TODO Auto-generated method stub
		setTheme("mainApptheme");
		setMainWindow(new LoginDialog());
	}
	
	public void startInit(){
		removeWindow(getMainWindow());
		buildMainFrameWork();
	}

	class BackgroundThread extends Thread {

		@Override
		public void run() {
			while (start && right.getSelectedTab() != null) {
				try {
					Thread.sleep(3000);
					if(right.getSelectedTab() instanceof MainFrameLogTab){
						((MainFrameLogTab)right.getSelectedTab()).addDynamicItem();
						pusher.push();
						System.out.println("====================push");
					}
				} catch (InterruptedException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
	}

	private void buildMainFrameWork() {
		setTheme("mainApptheme");
		final VerticalLayout root = new VerticalLayout();
		root.setSizeFull();

		Window main = new Window("Browser title...", root);
		setMainWindow(main);
		main.addComponent(pusher);

		Label title = new Label("EM Testing");
		title.addStyleName(Runo.LABEL_H1);
		title.setSizeUndefined();
		root.addComponent(title);
		root.setComponentAlignment(title, Alignment.TOP_CENTER);

		right.setSizeFull();
		root.addComponent(right);
		root.setExpandRatio(title, 0);
		root.setExpandRatio(right, 1);

		right.addTab(new MainFrameApplistTab(), "ApplistInfo", null);
		right.addTab(new MainFrameEmaspUserInfoTab(), "EmaspUserInfo", null);
		right.addTab(new MainFrameUserMapTab(), "UserMapInfo", null);
		right.addTab(new MainFrameLogTab(), "LogSystem", null);

		right.addListener(new TabSheet.SelectedTabChangeListener() {

			@Override
			public void selectedTabChange(SelectedTabChangeEvent event) {
				if (right.getSelectedTab() instanceof AbstractFrameTab) {
					if(right.getSelectedTab() instanceof MainFrameLogTab){
						start = true;
						AbstractFrameTab tab = (AbstractFrameTab) right.getSelectedTab();
						tab.refreshTable();
						new BackgroundThread().start();
					}else{
						start = false;
						AbstractFrameTab tab = (AbstractFrameTab) right.getSelectedTab();
						tab.refreshTable();
					}
				} else {
					start = false;
				}
			}
		});
	}
}

Do LoginDialog extends LoginForm instead and only use one window, doing window.setContent(new LoginForm) and window.setContent(root).

First, thank you for your help.I delete the LoginDialog class and setcontent with LoginForm component.The code below, it’s work.

VerticalLayout ver = new VerticalLayout();
		ver.setSizeFull();
		LoginForm loginForm = new LoginForm();
		ver.addComponent(loginForm);
		ver.setComponentAlignment(loginForm, Alignment.MIDDLE_CENTER);
		main.setContent(ver);
		
		loginForm.addListener(new LoginForm.LoginListener(){

			@Override
			public void onLogin(LoginEvent event) {
				// TODO Auto-generated method stub
				boolean boo = authenticate(event.getLoginParameter("username"), event.getLoginParameter("password"));
				if(boo){
					startInit();
				}else
					main.showNotification("Error", "Fail to login! Check Username and Password!", Window.Notification.TYPE_ERROR_MESSAGE);
			}
			
		});

But it come up with a new question: how to adjust the LoginForm’ position? I tried one method: I put the LoginForm in a VerticalLayout component like in code above, and use the setComponentAlignment(loginForm, Alignment.MIDDLE_CENTER). But it didn’t work. I’m a newer to vaadin and know little about vaadin. Thank you for your help.

I haven’t looked a the sizing defaults for loginform, but to make aligning to work, the inner component has to be smaller than the outer. If LoginForm has by default 100% width or height, it won’t align in that direction. Try adding loginForm.setSizeUndefined().

If it still doesn’t work, then you have to make sure that the layout “ver” has enough space to be any bigger than the form. Is ver directly in the main layout and does it get the required space from it? I’m just guessing how your code looks so I can’t be more specific yet.

Thank you very much. Your method is good. I just set the loginform with setSizeUndefined(),then I refresh the browser and found the loginform in the center of screen. Thank you for your help.

I have another question.The login component which I used is just com.vaadin.ui.LoginForm. It seems ugly or not beautiful. Does there have other method or something make it beautiful? Can you give me some materials or reference about it? Thank you!

Here’s a section on how you customize the LoginForm visually:
Book of Vaadin: 5.22. LoginForm

Thank you!