[java] Vaadin에서 데이터 그리드 사용하기

29 Nov 2023

java

Vaadin은 자바 기반의 오픈 소스 웹 애플리케이션 프레임워크로, 사용자 인터페이스를 빠르고 쉽게 개발할 수 있도록 도와줍니다. 이 중 Vaadin의 데이터 그리드는 테이블 형식의 데이터를 효과적으로 표시하고 편집하는 데 사용되는 강력한 도구입니다. 이번 글에서는 Vaadin에서 데이터 그리드를 사용하는 방법에 대해 알아보겠습니다.

1. 의존성 추가하기

먼저, Vaadin에서 데이터 그리드를 사용하기 위해 프로젝트의 의존성에 vaadin-grid를 추가해야 합니다. Maven 프로젝트의 경우, pom.xml 파일에 다음 의존성을 추가합니다:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-grid</artifactId>
    <version>14.3.13</version>
</dependency>

2. 데이터 그리드 생성하기

데이터 그리드를 생성하기 위해서는 Grid 클래스의 인스턴스를 만들어야 합니다. 예를 들면 다음과 같습니다:

Grid<Person> grid = new Grid<>(Person.class);

위 코드에서 Person은 데이터 그리드에 표시할 데이터의 클래스입니다. 따라서 Person 클래스는 그리드에 표시할 필드 및 그리드로부터 사용자 입력을 받을 수 있는 필드와 메소드를 포함해야 합니다.

3. 컬럼 정의하기

데이터 그리드는 테이블의 각 열에 해당하는 컬럼을 가지고 있습니다. 컬럼은 addColumn() 메소드를 사용하여 정의할 수 있습니다. 예를 들어, 다음과 같이 이름과 나이 두 개의 컬럼을 설정할 수 있습니다:

grid.addColumn(Person::getName).setHeader("Name");
grid.addColumn(Person::getAge).setHeader("Age");

각 컬럼은 getter 메소드를 사용하여 데이터를 가져옵니다. setHeader() 메소드는 그리드에 표시될 컬럼의 헤더를 설정합니다.

4. 데이터 추가하기

데이터 그리드에 데이터를 추가하기 위해서는 setDataProvider() 메소드를 사용하여 데이터 제공자를 설정해야 합니다. 데이터 제공자는 DataProvider 인터페이스를 구현하는 클래스입니다. 예를 들면 다음과 같습니다:

List<Person> people = new ArrayList<>();
people.add(new Person("John", 25));
people.add(new Person("Alice", 30));

grid.setDataProvider(DataProvider.ofCollection(people));

위 코드에서 Person 객체를 생성하여 people 리스트에 추가한 후, DataProvider.ofCollection() 메소드를 사용하여 데이터 제공자를 생성합니다. 그리드는 데이터 제공자로부터 데이터를 가져와 표시합니다.

5. 그리드에 이벤트 처리 추가하기

데이터 그리드에 이벤트 처리를 추가하려면 addItemClickListener() 메소드를 사용하여 클릭 이벤트 핸들러를 등록해야합니다. 예를 들면 다음과 같습니다:

grid.addItemClickListener(event -> {
    Person selectedPerson = event.getItem();
    // 클릭된 항목에 대한 작업을 수행합니다.
});

위 코드에서는 그리드의 한 행을 클릭할 때마다 클릭된 항목에 대한 작업을 수행하는 클릭 이벤트 핸들러를 등록합니다.

마치며

이제 여러분은 Vaadin에서 데이터 그리드를 사용하는 방법을 알게 되었습니다. 데이터 그리드는 테이블 형태의 데이터를 표시하고 편집할 수 있도록 도와주는 강력한 도구입니다. Vaadin을 사용하면 웹 애플리케이션을 쉽게 개발할 수 있으며, 데이터 그리드를 사용하면 데이터를 효과적으로 관리할 수 있습니다.

참고 자료:

Vaadin Documentation: Grid Component

```