vaadin 프로젝트 생성 실습

몇 해 전 프로젝트 일정에도 없던 jQeuryGrid를 커스터마이징 하느라 2주간 생고생하고, 손가락 관절이 아팠다.

Front, Backend 모두 framework이나 UI 툴도 없었던 그 프로젝트. 너무나 힘들었다. 내게 남은 건 아픈 몸뿐인가..
vaadin은 여러모로 편하다. Designer부터는 유료 월 90달러임. 개인 입장에선 결코 저렴하다고는 볼 수 없다.

1. eclipse marketplace에서 vaadin 검색 4.0.2 install
2. vaadin 7 project 생성 ( archetypeVersion = 7.6.5일때는 widgetsetName으로 생성이 되지만, 7.7.13에선 입력해도 생성이 안됨)
   1) 아래 처럼 MVN명령행으로 만들거나
   

   mvn archetype:generate -DarchetypeGroupId=com.vaadin \
   -DarchetypeArtifactId=vaadin-archetype-application \
   -DarchetypeVersion=7.6.5 -DgroupId=com.vseminar \
   -DartifactId=vaadin-seminar -Dversion=1.0 -Dpackagin=war \
   -DthemeName=vseminar -DuiName=VSeminarUI -DwidgetsetName=VSeminarWidgetset​

   
   2) maven project로 생성 시 archeType을 지정하면 가능함(add archeType) - 책대로 따라 하려면 똑 같이 하는 게 정신건강에 좋다.
   
   
   3) Eclipse 메뉴에서 이미지처럼 생성 ( 7.7.13이 생성되며,widgetsetName은 입력해도 무시됨 )
3. 
   
   
4. pom에 추가 

<!-- properties에 추가 -->
<logback-version>1.2.3</logback-version>
<slf4j-version>1.7.25</slf4j-version>

<dependency>
	<groupId>ch.qos.logback</groupId>
	<artifactId>logback-classic</artifactId>
	<version>${logback-version}</version>
</dependency>
<dependency>
	<groupId>org.slf4j</groupId>
	<artifactId>slf4j-api</artifactId>
	<version>${slf4j-version}</version>
</dependency>
<dependency>
	<groupId>org.slf4j</groupId>
	<artifactId>jcl-over-slf4j</artifactId>
	<version>${slf4j-version}</version>
</dependency>
<dependency>
	<groupId>org.slf4j</groupId>
	<artifactId>jul-to-slf4j</artifactId>
	<version>${slf4j-version}</version>
</dependency>
<dependency>
	<groupId>org.slf4j</groupId>
	<artifactId>log4j-over-slf4j</artifactId>
	<version>${slf4j-version}</version>
</dependency>

<pluginManagement>
	<plugins>
		<plugin>
			<groupId>org.eclipse.m2e</groupId>
			<artifactId>lifecycle-mapping</artifactId>
			<version>1.0.0</version>
			<configuration>
				<lifecycleMappingMetadata>
					<pluginExecutions>
						<pluginExecution>
							<pluginExecutionFilter>
								<groupId>com.vaadin</groupId>
								<artifactId>vaadin-maven-plugin</artifactId>
								<versionRange>[7.6.5,)</versionRange>
								<goals>
									<goal>resources</goal>
									<goal>update-widgetset</goal>
									<goal>compile</goal>
									<goal>update-theme</goal>
									<goal>compile-theme</goal>
								</goals>
							</pluginExecutionFilter>
							<action>
								<ignore></ignore>
							</action>
						</pluginExecution>
					</pluginExecutions>
				</lifecycleMappingMetadata>
			</configuration>
		</plugin>
	</plugins>
</pluginManagement>

logback.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <appender name="console" class="ch.qos.logback.core.ConsoleAppender">
    <!-- encoders are assigned the type
         ch.qos.logback.classic.encoder.PatternLayoutEncoder by default -->
    <encoder>
      <pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
    </encoder>
  </appender>

  <logger name="com.vseminar" level="debug" additivity="false">
  	<appender-ref ref="console" />
  </logger>

  <root level="warn">
    <appender-ref ref="console" />
  </root>

</configuration>

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;

/**
 * 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);
    }

    @WebServlet(urlPatterns = "/*", name = "VSeminarUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = VSeminarUI.class, productionMode = false)
    public static class VSeminarUIServlet extends VaadinServlet {
    }
}

tomcat 8.0.52 디버그 모드 실행 ( 프로덕션은 @VaadinServletConfiguration productionMode = true )

localhost:8080/vaadin-seminar 접속

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