Colin's Blog
[java] JFoenix를 사용하여 비디오 플레이어 디자인

JFoenix는 JavaFX를 구현하기 위한 결합 라이브러리입니다. 이 라이브러리를 사용하면 JavaFX 애플리케이션에 매력적인 Material Design을 쉽게 적용할 수 있습니다. 이번 글에서는 JFoenix를 사용하여 비디오 플레이어를 디자인하는 방법을 알아보겠습니다.

필요한 라이브러리 설치

JFoenix를 사용하기 위해 다음과 같은 의존성을 프로젝트에 추가해야 합니다.

<dependency>
    <groupId>com.jfoenix</groupId>
    <artifactId>jfoenix</artifactId>
    <version>9.0.10</version>
</dependency>

JFoenix를 이용한 비디오 플레이어 디자인 구현

  1. UI 설계

    먼저 UI를 설계해야 합니다. JFoenix를 사용하여 Material Design 요소들을 추가할 수 있습니다. 예를 들어, 다음과 같이 왼쪽에 비디오 플레이어, 오른쪽에 제목과 재생 목록이 있는 패널을 만들 수 있습니다.

    UI Design

  2. FXML 파일 작성

    위에서 설계한 UI에 대한 FXML 파일을 작성해야 합니다. 이 FXML 파일은 JavaFX 컨트롤러와 연결됩니다. JFoenix를 사용하는 FXML에는 다음과 같은 추가적인 컨트롤러 요소들을 포함해야 합니다.

    <?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXListView?>
<?import com.jfoenix.controls.JFXSlider?>
<?import com.jfoenix.controls.JFXProgressBar?>
<?import com.jfoenix.controls.JFXTimePicker?>
<?import com.jfoenix.controls.JFXHamburger?>
<?import com.jfoenix.transitions.hamburger.HamburgerBasicCloseTransition?>
   
<!-- 비디오 플레이어 컨테이너 -->
<StackPane fx:id="videoPlayerContainer" 
           alignment="CENTER_LEFT" 
           style="-fx-background-color: #212121;">
    <!-- 여러 UI 요소들 추가 -->
</StackPane>
   
<!-- 제목과 재생 목록이 있는 오른쪽 패널 -->
<AnchorPane fx:id="rightPanel" 
            alignment="CENTER" 
            style="-fx-background-color: #424242;">
    <!-- 여러 UI 요소들 추가 -->
</AnchorPane>

  3. 컨트롤러 작성하기

    FXML 파일에 추가한 요소들을 컨트롤러에서 초기화 및 제어해야 합니다. 다음은 비디오 플레이어 컨트롤러 클래스의 예시입니다.

    import com.jfoenix.controls.JFXButton;
import com.jfoenix.controls.JFXListView;
import com.jfoenix.controls.JFXSlider;
import com.jfoenix.controls.JFXProgressBar;
import com.jfoenix.controls.JFXTimePicker;
import com.jfoenix.controls.JFXHamburger;
import com.jfoenix.transitions.hamburger.HamburgerBasicCloseTransition;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.AnchorPane;
import java.net.URL;
import java.util.ResourceBundle;
   
public class VideoPlayerController implements Initializable {
       
    @FXML
    private StackPane videoPlayerContainer;
   
    @FXML
    private AnchorPane rightPanel;
   
    /* 다른 UI 요소들에 대한 FXML 도입 */
       
    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        // 컨트롤러 초기화 로직 작성
    }
       
}

  4. JFoenix 디자인 적용하기

    비디오 플레이어 컨트롤러에서 JFoenix 컴포넌트들을 초기화하고 디자인을 적용해야 합니다. 예를 들어, 다음은 JFoenix 슬라이더 및 버튼을 초기화하고 스타일을 적용하는 예시입니다.

    @FXML
private JFXSlider volumeSlider;
   
@FXML
private JFXButton playButton;
   
@Override
public void initialize(URL url, ResourceBundle resourceBundle) {
    // JFoenix 컴포넌트 초기화
    JFXSlider volumeSlider = new JFXSlider();
    volumeSlider.setMin(0);
    volumeSlider.setMax(100);
       
    JFXButton playButton = new JFXButton("Play");
       
    // JFoenix 컴포넌트 스타일 및 적용
    volumeSlider.getStylesheets().add(getClass().getResource("/css/jfoenix-components.css").toExternalForm());
    volumeSlider.getStyleClass().add("jfx-custom-slider");
       
    playButton.getStylesheets().add(getClass().getResource("/css/jfoenix-components.css").toExternalForm());
    playButton.getStyleClass().add("jfx-custom-button");
       
    // UI에 추가
    videoPlayerContainer.getChildren().add(volumeSlider);
    rightPanel.getChildren().add(playButton);
}

  5. 애플리케이션 실행

    이제 애플리케이션을 실행하고 JFoenix를 사용하여 디자인된 비디오 플레이어를 확인할 수 있습니다. 올바른 JFoenix 스타일을 적용하기 위해 적절한 CSS 파일을 임포트 해야 합니다.

결론

이제 JFoenix를 사용하여 JavaFX 애플리케이션에 매력적인 Material Design을 적용하는 방법을 알게 되었습니다. JFoenix 라이브러리를 활용하여 다양한 디자인 요소들을 적용할 수 있고, 이를 통해 비디오 플레이어와 같은 멋진 UI를 쉽게 구현할 수 있습니다.

참고자료:

© 2018 Colin. All rights reserved.