Spring Boot와 Vaadin의 full stack 어플리케이션 ( JPA, PostgreSQL )

Spring Boot와 Vaadin의 full stack 어플리케이션 ( JPA, PostgreSQL )

- Vaadin은 무멋인가?

1. 프로젝트 생성 ( start.spring.io , SPRING INITIALIZR )후에 zip 해제 하기

Maven Project , 1.4.4 ( 1.5.x는 에러가 발생 )

Dependencies 선택 : Web, Vaadin, JPA, PostgreSQL

Artifact : todolistvaading

2. 프로젝트 불러오기

Eclipse에서 Import -> Project from Folder or Archive

Project(우측 마우스) ->Run AS -> Maven clean, Maven Install 실행

Project(우측 마우스) -> Maven -> Update Project선택

3. 생성할 예제

4. UI 클래스 생성하기

package com.example;

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

@SpringUI
@Theme("valo")
public class TodoUI extends UI {

private VerticalLayout layout;

    @Override
    protected void init(VaadinRequest vaadinRequest) {

// 화면 구성 하기
setupLayout();
addHeader();
addForm();
addTodoList();
addActionButton();
}

}

private void setupLayout(){
    layout = new VerticalLayout();
    setContent(layout); 
}

private void addHeader(){
    Label header = new Label("TODO");
    layout.addComponent(header);
}

private void addForm(){
    HorizontalLayout formLayout = new HorizontalLayout();
    TextField taskField = new TextField();
    Button addButton = new Button("Add");  // 나중에 icon으로 변경 

    formLayout.addComponent(taskField, addButton);
    layout.addComponent(formLayout);
}

private void addTodoList(){  
    //@Autowired TodoList todoList 추가
    layout.addComponent(todoList);
}

@Component
public class TodoList extends VerticalLayout {
    
}

private void addActionButton() {
    Button deleteButton = new Button("Delete completed");
    layout.addComponent(deleteButton);
}

원문 : 동영상 강좌

https://www.youtube.com/watch?v=tnVKN25dIm8

-- 추가 꾸미기

private void setupLayout() {
    ...
    layout.setSpacing(true);
    layout.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
    ...
}

private void addHeader() {
    ...
    header.addStyleName(ValoTheme.LABEL_H1);
    header.setSizeUndefined();
    ...
}

private void addForm() {
    ...
    formLayout.setSpacing(true);
    formLayout.setWidth("80%");
}

private void addTodoList() {
    ...
    todoList.setWidth("80%");
}

private void addActionButton() {
    ...
    deleteButton.addClickListener(click->todoList.deleteCompleted());
}

Todo.java

TodoChangeListener.java

TodoLayout.java

TodoList.java

TodoRepository.java

TodoUI.java

TolistvaadinApplication.java

* Vaadin Login Example

https://examples.javacodegeeks.com/enterprise-java/vaadin/vaadin-login-example/