vaadin loginScreen 만들기 실습

직전 프로젝트에 로그인 화면을 추가해 보자.

layout을 상속, Component는 layout 내부에 추가하고 필요에 따라 중첩된 layout으로 UI를 구성한다.
4GL IDE나 x-internet tool, Swing, javaFX등에 경험이 있다면, 러닝 커브는 낮은 수준이 되겠다.

그렇다고 하루아침에 전문가는 될 수 없다.

1. package 구조
   

   

2. LoginScreen.java

   package com.vseminar.screen;
   
   import org.slf4j.Logger;
   import org.slf4j.LoggerFactory;
   
   import com.vaadin.data.validator.EmailValidator;
   import com.vaadin.event.ShortcutAction.KeyCode;
   import com.vaadin.server.FontAwesome;
   import com.vaadin.ui.Alignment;
   import com.vaadin.ui.Button;
   import com.vaadin.ui.Component;
   import com.vaadin.ui.HorizontalLayout;
   import com.vaadin.ui.Label;
   import com.vaadin.ui.PasswordField;
   import com.vaadin.ui.TextField;
   import com.vaadin.ui.VerticalLayout;
   import com.vaadin.ui.themes.ValoTheme;
   
   public class LoginScreen extends VerticalLayout {
   
   	/**
   	 *
   	 */
   	private static final long serialVersionUID = -4885878040618768241L;
   	private static final Logger logger = LoggerFactory.getLogger(LoginScreen.class);
   
   	public LoginScreen() {
   		setSizeFull();
   		Component loginForm = buildForm();
   		addComponent(loginForm);
   		setComponentAlignment(loginForm, Alignment.MIDDLE_CENTER);
   	}
   
   	private Component buildForm() {
   
   		final VerticalLayout loginPanel = new VerticalLayout();
   		loginPanel.setSizeUndefined();
   		loginPanel.setSpacing(true);
   		loginPanel.addComponent(buildLabels());
   		loginPanel.addComponent(buildFields());
   
   		return loginPanel;
   	}
   
   	private Component buildLabels() {
   		Label titleLabel = new Label("welcome to vaadin seminar");
   		titleLabel.addStyleName(ValoTheme.LABEL_H4);
   		titleLabel.addStyleName(ValoTheme.LABEL_COLORED);
   		return titleLabel;
   	}
   
   	private Component buildFields() {
   		final TextField email = new TextField("Email");
   		email.setIcon(FontAwesome.USER);
   		email.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
   		email.addValidator(new EmailValidator("Invalid e-mail address {0}"));
   
   		final PasswordField password = new PasswordField("Password");
   		password.setIcon(FontAwesome.LOCK);
   		password.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
   
   		final Button signin = new Button("Sign In");
   		signin.addStyleName(ValoTheme.BUTTON_PRIMARY);
   		signin.focus();
   		signin.setClickShortcut(KeyCode.ENTER);
   		signin.addClickListener(e->{
   			logger.debug("{} , {}", email.getValue(), password.getValue());
   		});
   
   		HorizontalLayout fields = new HorizontalLayout();
   		fields.setSpacing(true);
   		fields.addComponents(email,password,signin);
   		fields.setComponentAlignment(signin, Alignment.BOTTOM_LEFT);
   
   		return fields;
   	}
   }

3. VSeminarUI.java

   package com.vseminar.vaadin_seminar;
   
   import javax.servlet.annotation.WebServlet;
   
   import org.slf4j.Logger;
   import org.slf4j.LoggerFactory;
   
   import com.vaadin.annotations.Theme;
   import com.vaadin.annotations.VaadinServletConfiguration;
   import com.vaadin.server.VaadinRequest;
   import com.vaadin.server.VaadinServlet;
   import com.vaadin.ui.Button;
   import com.vaadin.ui.Label;
   import com.vaadin.ui.TextField;
   import com.vaadin.ui.UI;
   import com.vaadin.ui.VerticalLayout;
   import com.vseminar.screen.LoginScreen;
   
   /**
    * This UI is the application entry point. A UI may either represent a browser window
    * (or tab) or some part of a html page where a Vaadin application is embedded.
    * <p>
    * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
    * overridden to add component to the user interface and initialize non-component functionality.
    */
   @Theme("vseminar")
   public class VSeminarUI extends UI {
   
   	/**
   	 *
   	 */
   	private static final long serialVersionUID = -2338582038571479261L;
   	private static final Logger logger = LoggerFactory.getLogger(VSeminarUI.class);
   
       @Override
       protected void init(VaadinRequest vaadinRequest) {
   
       	logger.debug("init Vaadin UI");
   
           /*final VerticalLayout layout = new VerticalLayout();
   
           final TextField name = new TextField();
           name.setCaption("Type your name here:");
   
           Button button = new Button("Click Me");
           button.addClickListener( e -> {
               layout.addComponent(new Label("Thanks " + name.getValue()
                       + ", it works!"));
           });
   
           layout.addComponents(name, button);
           layout.setMargin(true);
           layout.setSpacing(true);
   
           setContent(layout);*/
       	setContent(new LoginScreen());
       }
   
       @WebServlet(urlPatterns = "/*", name = "VSeminarUIServlet", asyncSupported = true)
       @VaadinServletConfiguration(ui = VSeminarUI.class, productionMode = false)
       public static class VSeminarUIServlet extends VaadinServlet {
       }
   }

4. 실행화면
   

   

참고서적 : 모던 자바 웹 UI 바딘 프레임워크 - 김대성지음(지앤선)