Vaadin에는 UX, 성능 및 액세스 가능성에 맞게 웹 구성 요소가 포함되어 있다. 즉, 멋진 앱을 더 빠르게 만들 수 있습니다. 구성 요소는 모든 프레임 워크에서 사용할 수있는 표준 HTML 요소로 빌드된다.
Vaadin은 Java로 웹 애플리케이션을 개발하는 가장 빠른 방법이다. 서버와 브라우저 간의 통신을 자동화하고 모든 Vaadin 구성 요소에 대한 고급 구성 요소 API를 제공한다.
Creating CRUD UI with Vaadin
15분의 시간만 있으면 가능하다.
간단한 JPA를 사용한 Vaadin UI를 만들 것이다. CRUD 기능을 완벽하게 갖춘 앱과 필터링 예제가 있다.
Create the backend services
스프링 예제에 나와있는 Accessing Data with JPA과 차이점은 엔터티 클래스에는 getter와 setter가 있으며 저장소의 사용자 지정 검색 메서드는 최종 사용자에게 좀 더 우아하다고 한다. 스프링 페이지에 나와있는대로 해석 하긴 했는데 무슨 말인지 그냥 모르겟음. 머가 graceful 한건지.. 똑같은 entity 같은데...
src/main/java/hello/Customer.java
src/main/java/hello/CustomerRepository.java
src/main/java/hello/Application.java
Spring Boot 기반의 응용 프로그램은 DB에 약간의 예제 데이터를 채울 수 있으므로 그대로 둘 수 있습니다.
Define the MainView class
MainView 클래스는 Vaadin의 UI 로직에 대한 진입 점이다. 스프링 부트 응용 프로그램에서는 @Route로 주석을 달면 Spring에 의해 자동으로 선택되고 웹 응용 프로그램의 루트에 표시된다. 라우트 주석에 매개 변수를 제공하여 뷰가 표시되는 URL을 사용자 정의 할 수 있다. 간단한 "hello world"은 다음과 같이 보일 수 있다.
List entities in a data grid
Grid 컴포넌트는 레이아웃을 위해 사용한다.
1. 생성자로 CustomerRepository를 주입한다
2. findAll로 데이터를 가져온다.
3. 가져온 데이터를 grid에 setItems 메소드를 사용하여 넣는다.
4. VerticalLayout 정의된 add 메소드 사용한다. (grid는 component라는 것을 알 수 있음)
Vaadin Grid는 서버에서 브라우저로 데이터를 지연로드하지만, findAll로 가져오면 전체 데이터 목록을 유지한다. 일부 메모리를 절약하려면 setDataProvider (DataProvider) 메소드를 사용하여 페이지 결과를 표시하거나 페이징을 사용해야 한다.
Filtering the data
대용량 데이터가 서버에 문제가 될 수 있다. 나중에 사용자가 수정하려는 데이터를 찾는 데 어려움을 겪을 수 있다. TextField component를 사용하여 필터 entity를 만든다. 먼저 listCustomer () 메서드를 수정하여 필터링을 지원한다. 이렇게만 하면 바로 필터링이 되서 바로바로 검색이 가능하다..... 놀라운 세상
Listener를 TextField 구성 요소에 연결하고 해당 값을 해당 필터 메서드에 연결한다. placeholder는 textfield에 들어갈 내용이고 ValueChangeListener는 ValueChangeMode.EAGER를 입력하는 동안 자동으로 호출된다.
Define the editor component
Vaadin UI는 단순한 Java 코드이므로 초기부터 재사용 가능한 코드를 작성하지 않아도된다. CustomerRepository를 삽입하고 C, U, D 부분 또는 CRUD 기능을 처리 할 수 있도록 Spring 관리 빈으로 만들 것이다.
src/main/java/hello/CustomerEditor.java
더 큰 응용 프로그램에서는이 editor component를 여러 위치에서 사용할 수 있다. 또한 대규모 응용 프로그램에서는 MVP와 같은 일반적인 패턴을 적용하여 UI 코드를 구성 할 수도 있다
Wire the editor
이전 단계에서는 컴포넌트 기반 프로그래밍의 기본 사항을 이미 보았다. 버튼과 선택 리스너를 사용하여 그리드에 편집기를 메인 뷰에 완전히 통합 할 수 있다.
Spring Data JPA를 사용하여 완전한 기능을 갖춘 CRUD UI 애플리케이션을 작성했다. 그리고 REST 서비스를 노출시키지 않거나 한 줄의 JavaScript 또는 HTML을 작성하지 않아도된다.
