Visualization Design Java 웹 응용 프로그램 보기

이 문서에서는 버튼, 텍스트 필드, 콤보 상자 등 UI 구성 요소를 캔버스 (웹 페이지 또는 보기) 에 끌어다 놓으면 GUI를 직관적으로 디자인할 수 있는 방법을 보여 드리겠습니다.이 설계를 Java 백엔드에 연결하는 방법도 학습합니다.
이것을 가능하게 하는 도구를 Vaadin Designer라고 부른다.비록 무료 제품은 아니지만, 시도해 보십시오. 이것은 자바 응용 프로그램에서 웹 사용자 인터페이스를 실현하는 데 필요한 시간을 크게 줄였기 때문입니다.
원하는 경우 이 문서에는 다음과 같은 비디오 버전이 있습니다.

새 항목 만들기

https://start.vaadin.com로 이동하여 새 Maven 프로젝트를 생성합니다.프롬프트가 나타나면 스트림(Java)을 선택합니다.

이 도구를 사용하면 생성할 프로그램을 미리 설정할 수 있습니다.페이지 왼쪽에서 모든 옵션을 찾을 수 있습니다.특히 왼쪽 위 모서리의 뷰 탭에서는 응용 프로그램에 뷰를 추가할 수 있습니다.나중에 IntelliJ IDEA에서 수정할 수 있는 여러 유용한 뷰 유형을 찾을 수 있습니다.그러나 이 강좌에서 우리는 보기 없는 깨끗한 항목이 있기를 바란다.우리는 처음부터 우리 자신을 창조할 것이다.
기본적으로 생성된 모든 뷰(Hello World 및 About)를 삭제합니다.쓰레기통 아이콘을 누르면 모든 보기를 삭제합니다.이제 뷰 탭이 비어 있어야 합니다.

다운로드 버튼을 클릭하여 zip 파일의 컨텐트와 IntelliJ IDEAimport 항목을 추출합니다.

마문 Vaadin Designer 설치

Vaadin Designer 를 IntelliJ IDEA에 설치해야 합니다.평가판 라이센스를 설정해야 합니다.이 과정은 매우 간단하다.검사 설명plugin.
Linux 또는 Windows를 사용하는 경우 IntelliJ IDEA의 파일| 설정으로 이동합니다.macOS를 사용하는 경우 IntelliJ IDEA | 기본 설정을 참조하십시오.창의 왼쪽에 있는 목록에서 플러그 인을 선택합니다.검색 상자에 vaadin을 입력하고 vaadin Designer를 설치합니다.프레임워크 7에 대해 Vaadin Designer를 선택하지 않도록 하십시오!플러그인의 이전 버전이며 최신 버전의 Vaadin과 호환되지 않습니다.
here
IDE를 다시 시작해야 할 수도 있지만 설치 프로세스가 완료되면 뷰를 시각적으로 만들기 시작할 수 있습니다.

새 디자인 추가

메뉴에서 File | New | Vaadin 10+ 디자인을 선택합니다.뷰 이름을 [프리젠테이션 뷰]로 변경하고 [확인]을 클릭합니다.

이렇게 하면 두 개의 파일이 생성됩니다.

frontend/demo-view.ts: Vaadin Designer가 관리하는 타자 스크립트 파일입니다.이 파일을 수동으로 편집할 필요는 없습니다.대신 UI 구성 요소를 뷰로 끌어다 놓을 때 Vaadin Designer를 사용하여 간접적으로 수정할 수 있습니다.

src/main/java/com/example/app/DemoView.java: 뷰에 비헤이비어를 추가할 수 있는 Java 패키지입니다.예를 들어 탐지기를 누르고 백엔드 서비스를 호출합니다.

demo-view.ts 파일을 두 번 클릭하여 시각화 디자이너를 엽니다.이러한 파일을 처음 열면 IntelliJ IDEA에서 인덱싱에 시간이 걸릴 수 있습니다.인내심을 가져라, 이 과정이 끝나면, 너는 즉시 파일을 열 수 있다.

템플릿 선택

IntelliJ IDEA에서 디자인 파일을 열면 Vaadin Designer가 뷰 또는 페이지 디자인의 시작점으로 사용할 수 있는 템플릿 세트를 표시합니다.목록에서 사이드바가 있는 머리글 및 바닥글을 선택합니다.

보기에 UI 구성 요소 추가
화면 왼쪽에 사용 가능한 UI 구성 요소 목록이 표시됩니다.예를 들어 레이아웃(수직, 수평, 분할 등), 단추, 도표, 날짜 선택기, 격자, 선택 구성 요소(예를 들어 조합 상자와 단추) 등이다.목록이 매우 크기 때문에, 당신은 이름에 따라 검색할 수 있습니다.수직 레이아웃을 검색한 다음 목록에서 수직 레이아웃을 캔버스로 드래그합니다(시각적으로 제작 중인 뷰 또는 웹 페이지).

같은 방법으로 h1을 검색하고 h1 구성 요소를 우리가 추가한 수직 레이아웃의 맨 위에 있는 보기로 드래그합니다.

UI 구성 요소를 뷰가 아닌 아웃라인 뷰로 드래그할 수도 있습니다.이 기능은 여러 UI 구성 요소가 중첩된 상태에서 특정 배치에 UI 구성 요소를 추가하는 경우에 유용합니다.UI 구성 요소를 어디에 배치할지 보다 정확하게 제어할 수 있습니다.이 기술을 사용하여 이전에 추가한 수직 레이아웃에서 Vaadin 텍스트 필드를 드래그합니다.

이 과정을 계속하고 날짜 선택기와 단추를 추가합니다.오류가 발생하면 UI 구성 요소를 잘못된 레이아웃에 놓으면 다시 드래그해서 보기나 대강에 놓을 수 있습니다.결과는 다음과 같습니다.

UI 구성 요소 구성

UI 구성 요소를 뷰로 드래그하면 레이블, 텍스트 및 자리 표시자에 기본값이 표시되며 이 값을 변경하려는 경우가 많습니다.아웃라인에서 이 속성과 UI 구성 요소의 추가 속성을 변경할 수 있습니다.아웃라인 아래쪽에서 선택한 UI 구성 요소의 속성과 구성 목록을 찾을 수 있습니다.
뷰 또는 아웃라인에서 h1 컴포넌트를 선택하고 텍스트 속성을 "Vaadin Designer Demo"와 유사한 내용으로 변경합니다.

Vaadin 텍스트 필드를 선택하여 label 속성을 "이름 입력:"으로 변경하고 자리 표시자 속성의 내용을 삭제합니다. (또는 표시할 문자열을 지정합니다.)
이 절차를 반복하여 날짜 선택기를 구성합니다.태그 속성을 "출생일:"으로 변경합니다.버튼의 경우 텍스트 속성을 전송으로 변경합니다.결과는 다음과 같습니다.

배치 조정

사용자 인터페이스 구성 요소의 여백, 크기, 정렬 방법 및 기타 속성은 대강 패널 아래에 있는 옵션을 사용하여 쉽게 조정할 수 있습니다.다른 수직 레이아웃이 포함된 수직 레이아웃을 선택하고 경로를 가운데로 배치합니다.

텍스트 필드 및 날짜 선택기의 경우 다음 화면 캡처에 표시되는 정렬 옵션을 설정하여 필드에 레이아웃의 모든 수평 공간을 사용합니다.

적절한 정렬 옵션을 사용하여 배치의 오른쪽에 버튼을 배치합니다.

Java 백엔드 서비스 추가

인코딩해야 돼!간단한 클래스와 방법으로 구현하기 위해 자바 백엔드 서비스가 필요합니다.프로젝트에 다음 클래스를 추가합니다.

package com.example.app;

import org.springframework.stereotype.Service;

import java.time.LocalDate;
import java.time.temporal.ChronoUnit;

@Service
public class BackendService {

    public String greet(String name, LocalDate birthDate) {
        if (name == null || name.isEmpty() || birthDate == null) {
            return "So... what's your name?";
        } else {
            long age = ChronoUnit.YEARS.between(birthDate, LocalDate.now());
            return String.format("Hello, %s. You are %d years old", name, age);
        }
    }

}

​
이런 방법은 출생일을 정한 사람의 나이를 알려주는 개성화된 메시지를 포함하는 문자열을 되돌려주는 방법이 있다.이 종류는 @Service에 의해 주석되어 있음을 주의하십시오.이것은 다른 클래스의 구조 함수에 매개 변수를 추가할 때 이 클래스의 실례를 주입할 수 있도록 하는 Spring 주석입니다.우리는 곧 그것의 실제 응용을 볼 수 있을 것이다.

서버측 Java에서 UI 구성 요소 액세스

서버측 Java 코드에서 텍스트 필드와 날짜 선택기의 값에 액세스해야 합니다.입력 필드의 데이터를 우리가 만든 백엔드 서비스에 보내기 위해 단추에 클릭 listener를 추가해야 합니다.우선, 프로그래밍 방식으로 접근하고자 하는 모든 UI 구성 요소에 사용할 자바 속성의 이름을 설정해야 합니다.이것은 id 속성을 설정해서 이루어진 것입니다.텍스트 필드, 날짜 선택기 및 버튼에 name, birthDate 및 를 사용합니다.

둘째, 우리는 나타나는 작은 단추를 눌러서 대강판의 구성 요소에 마우스 포인터를 놓아야 한다.필요한 세 가지 UI 구성 요소: 텍스트 필드, 날짜 선택기 및 버튼:
send Java 클래스를 보면 Java 등록 정보와 구성된 이름이 표시됩니다.

@Tag("demo-view")
@JsModule("./demo-view.ts")
@Route("")
public class DemoView extends LitTemplate {

    @Id("send")
    private Button send;
    @Id("birthDate")
    private DatePicker birthDate;
    @Id("name")
    private TextField name;

    ...
}

보기에 백엔드 서비스 연결하기

백엔드 서비스와 Java의 UI 구성 요소가 있습니다.지금 그것들을 연결하는 것은 매우 간단하다.DemoView 클래스의 구조 함수를 다음과 같이 변경합니다.

...
public DemoView(BackendService backendService) {
    send.addClickListener(event -> {
        String message = backendService.greet(name.getValue(), birthDate.getValue());
        Notification.show(message);
    });
}
...

코드는 이해하기 쉽다.텍스트 필드와 날짜 선택기의 값을 백엔드 서비스에 보내고 결과를 DemoView 에 분배하고 브라우저에 알림으로 표시합니다.우리가 어떻게 String류의 실례를 주입했는지 주의해라.Spring은 이 작업을 담당하므로 인스턴스 생성에 대한 걱정은 하지 않아도 됩니다.기술적인 측면에서 볼 때 BackendService와 DemoView류의 실례는 모두 Spring에서 창설하고 관리한 것이다.

브라우저에 뷰 공개

이전에 디자인한 보기를 웹 브라우저를 통해 사용할 수 있도록 하기 위해서, 우리는 그것을 파이프라인에 지정해야 한다.BackendService 클래스에 @Route 설명을 추가하면 다음과 같습니다.

@Tag("demo-view")
@JsModule("./demo-view.ts")
@Route("")
public class DemoView extends LitTemplate {
    ...
}

이렇게 하면, 우리가 프로그램을 시작할 때, 보기는 에서 사용할 수 있다.만약 우리가 http://localhost:8080 이런 물건을 원한다면, 우리는 사용할 수 있다DemoView.

http://localhost:8080/demo, 어플리케이션 실행

모든 것이 다 준비되었다.@Route("demo") 클래스의 main 방법을 오른쪽 단추로 누르고 '실행 프로그램' 을 선택해서 프로그램을 실행합니다.프로그램을 처음 실행하는 데 시간이 좀 걸릴 수도 있습니다.Maven이 모든 Java 의존 항목을 로컬 저장소에 다운로드하고 클라이언트 의존 항목도 마찬가지이기 때문이다.후속 운행 속도가 훨씬 빠르다.
프로세스가 완료되면 필요한 경우 자동으로 새 브라우저 탭이 열립니다.다음은 이 프로그램의 화면 캡처입니다.

추가 자원

와딘에 대한 더 많은 정보를 얻으려면quick 을 보십시오.또는 Spring Boot과 Vaadin을 사용하여 전체 응용 프로그램을 구성하는 방법을 배우려면 자세히 보기start tutorial를 참조하십시오.