Spirng Vaadin Helloworld

Spring Vaadmin Helloworld

스프링 바딘? 

일반적인 웹 개발시 프론트엔드에서 자바스크립트와 html,css 를 별도의 언어로 개발해주어야 한다.

바딘 프로젝트로 개발 할 경우 순수 자바 로 프론트 영역까지 개발 할수 있도록 해준다.

간단한 Spring Vaadin HelloWorld 출력 해보기 

설정: IntelliJ 에서 Spring Initialize 프로젝트를 선택 -> dependency 에서 vaadin 선택

<dependencyManagement>
   <dependencies>
      <dependency>
         <groupId>com.vaadin</groupId>
         <artifactId>vaadin-bom</artifactId>
         <version>${vaadin.version}</version>
         <type>pom</type>
         <scope>import</scope>
      </dependency>
   </dependencies>
</dependencyManagement>

vaadin maven 안을 들여다보니 다양한 dependency 들이 존재 한다.

vaadin dependency -> server,push,themes

Add-on dependency -> vaadin-spring-boot-starter 등등이 보인다.

어플리케이션 실행시 아래와 같이 콘솔창에 나타난다.

아마도 바딘 프로젝트에 톰캣이 내장 되있는듯 하다.

http://localhost:8080 으로 접속 해보았다.

이런... witelabel error page 를  보여준다.

튜토리얼이나 구글 검색을 해보았다.

UI 클래스를 만들어 줘야 한다.

import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

/**
 * Created by gavin on 2017. 6. 21..
 */
@SpringUI
public class MyVaadin extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        setContent(new Label("Hello! I'm the root UI!"));
    }
}

다시 URL 접속을 해보았다.

이것으로 맛보기 하기엔 부족하여 튜토리얼 문서에서 제공 해주는 샘플 코드를 copy-paste 하여 실행해 보았다.

@Override
protected void init(VaadinRequest vaadinRequest) {
    setContent(new Label("Hello! I'm the root UI!"));
    // Create a sub-window and set the content
    Window subWindow = new Window("Sub-window");
    VerticalLayout subContent = new VerticalLayout();
    subWindow.setContent(subContent);

    // Put some components in it
    subContent.addComponent(new Label("Meatball sub"));
    subContent.addComponent(new Button("Awlright"));

    // Center it in the browser window
    subWindow.center();

    // Open it in the UI
    addWindow(subWindow);
}

다시 localhost:8080  으로 접속 해보았다

서브 윈도우창이 출력 된다.

또한 + 버튼으로 창 조절 드래그 앤드롭 과 같은 기능은 덤으로 된다.

예전에 자바로 윈도우 어플리케이션을 만들때 swing 으로 UI 만드는것과 거의 비슷한 개념?이다.

참고:

https://vaadin.com/docs/-/part/framework/layout/layout-sub-window.html