[java] Vaadin에서 사용자 정의 위젯 구현하기

Vaadin은 Java로 작성된 웹 애플리케이션 프레임워크로, 사용자 정의 위젯을 구현하여 애플리케이션에 추가할 수 있습니다. 이번 글에서는 Vaadin에서 사용자 정의 위젯을 구현하는 방법에 대해 살펴보겠습니다.

위젯 클래스 생성하기

첫 번째로, 사용자 정의 위젯을 구현하기 위해 위젯 클래스를 생성해야 합니다. 이 클래스는 com.vaadin.ui.CustomComponent 클래스를 상속받아야 합니다. 아래는 예시입니다.

import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;

public class CustomWidget extends CustomComponent {

    private VerticalLayout layout;

    public CustomWidget() {
        layout = new VerticalLayout();
        
        Button button = new Button("클릭");
        button.addClickListener(e -> {
            Label label = new Label("버튼 클릭됨!");
            layout.addComponent(label);
        });
        
        layout.addComponent(button);
        setCompositionRoot(layout);
    }
}

위 코드에서는 CustomWidget 클래스가 CustomComponent를 상속받았습니다. CustomWidget 생성자에서는 버튼을 생성하고, 버튼 클릭 시 라벨을 추가합니다. VerticalLayout을 사용하여 위젯 내부 요소들을 정렬합니다. 마지막으로 setCompositionRoot(layout)를 호출하여 위젯의 루트 컴포넌트로 layout을 설정합니다.

위젯 사용하기

위젯 클래스를 생성한 후에는 해당 위젯을 애플리케이션에서 사용할 수 있습니다. 아래는 Vaadin 애플리케이션에서 위젯을 사용하는 방법입니다.

import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.UI;

public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        setContent(layout);
        
        CustomWidget customWidget = new CustomWidget();
        layout.addComponent(customWidget);
    }
}

위 코드에서는 MyUI 클래스가 UI를 상속받았습니다. init 메서드에서는 VerticalLayout을 생성하고, setContent(layout)로 메인 레이아웃을 설정합니다. 그리고 위에서 정의한 CustomWidget을 생성하여 메인 레이아웃에 추가합니다.

실행 결과

위에서 작성한 코드를 실행하면 다음과 같이 버튼이 포함된 사용자 정의 위젯이 나타납니다.

Custom Widget Screenshot

마무리

Vaadin에서는 사용자 정의 위젯을 구현하여 애플리케이션에 추가할 수 있습니다. 위에서는 위젯 클래스를 생성하고 사용하는 방법을 간단히 살펴보았습니다. Vaadin의 다양한 컴포넌트와 기능을 활용하여 개인적인 요구에 맞는 사용자 정의 위젯을 구현해보세요.

참고 문서