JavaFX란 무엇인가

찌끅·2024년 9월 11일
Java

JavaFX: 개념과 간단한 사용법

JavaFX는 자바에서 데스크톱 GUI 애플리케이션을 만들기 위한 프레임워크이다. 자바의 GUI 기술 중 가장 최신이며, Swing의 단점을 보완하여 더 직관적이고, 강력한 기능을 제공한다. 하드웨어 가속, 미디어 처리, CSS 스타일링 같은 기능을 통해 현대적인 사용자 인터페이스를 쉽게 구현할 수 있다.

JavaFX의 주요 개념

  1. Stage (스테이지): JavaFX 애플리케이션에서 Stage는 윈도우 창을 의미한다. 모든 JavaFX 애플리케이션은 하나 이상의 Stage를 사용해 화면에 표시된다.
  2. Scene (씬): Scene은 화면에 표시되는 UI 요소들의 컨테이너로, Stage에 배치된다. 하나의 Stage에는 하나의 Scene만 배치될 수 있다.
  3. Node (노드): Node는 Scene 내부의 개별 구성 요소이다. 버튼, 텍스트, 레이아웃, 이미지 등이 모두 Node로 취급된다.
  4. Layout (레이아웃): 다양한 UI 요소들을 배치하는 데 사용하는 컨테이너이다. 예를 들어, 수직 또는 수평으로 요소를 정렬하는 VBox, HBox, 그리드 형식으로 배치하는 GridPane 등이 있다.

JavaFX의 장점

  • CSS 스타일링: JavaFX는 CSS로 UI의 스타일을 정의할 수 있어, 웹 애플리케이션처럼 다양한 디자인을 적용할 수 있다.
  • FXML 지원: XML 기반의 FXML 파일을 사용하여 UI를 설계하고, 자바 코드를 분리함으로써 코드의 가독성을 높이고 유지보수를 쉽게 할 수 있다.
  • 미디어 통합: 이미지, 동영상, 오디오 같은 미디어를 쉽게 처리할 수 있어 멀티미디어 애플리케이션 개발에 적합하다.
  • 하드웨어 가속: 그래픽 처리가 빠르고 효율적이다.

JavaFx 예제

1. JavaFx 기본 구조

JavaFx 애플리케이션은 일반적으로 Application 클래스를 상속하고 start() 메서드를 구현하는 것으로 시작된다. Stage와 Scene이 JavaFx 애플리케이션의 기초를 이룬다.

예시:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class BasicApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click Me");
        
        // Scene에 Button 추가
        Scene scene = new Scene(button, 300, 200);
        
        // Stage 설정
        primaryStage.setTitle("Basic JavaFX App");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

위 코드는 간닪나 버튼이 있는 JavaFX 애플리케이션이다. 버튼을 누르면 아무런 동작도 하지 않지만, UI 요소 추가를 간단히 보여준다.

2. 레이아웃 관리

JavaFX는 여러 종류의 레이아웃 관리자를 제공한다. 예를 들어, VBox, HBox, BorderPane, GridPane 등이 있다. 이 레이아웃들은 컨트롤들의 배치를 관리한다.

예시: VBox 사용

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class VBoxExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        VBox vbox = new VBox(10);  // 10은 요소 간의 간격을 의미합니다
        Button btn1 = new Button("Button 1");
        Button btn2 = new Button("Button 2");
        
        vbox.getChildren().addAll(btn1, btn2);
        
        Scene scene = new Scene(vbox, 300, 200);
        primaryStage.setScene(scene);
        primaryStage.setTitle("VBox Layout Example");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

이 예제는 VBox 레이아웃을 사용하여 버튼 두 개를 세로로 배치하는 방법을 보여준다.

3. 이벤트 처리

JavaFX는 이벤트 처리에 대한 강력한 지원을 제공하여 사용자가 UI 요소와 상호작요할 때 다양한 이벤트를 처리할 수 있다. 일반적인 이벤트로는 ActionEvent가 있으며, 버튼 클릭에 주로 사용된다.

예시: 버튼 클릭 이벤트 처리

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class ButtonEventApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click Me");

        // 버튼 클릭 시 이벤트 처리
        button.setOnAction(e -> System.out.println("Button clicked!"));
        
        Scene scene = new Scene(button, 300, 200);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Button Event Example");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

위 예제에서는 버튼을 클릭했을 때 콘솔에 "Button Clicked!"라는 메시지를 출련한다.

4. CSS를 사용한 스타일링

JavaFX에서는 CSS를 사용하여 UI 요소의 스타일을 정의할 수 있다. CSS 파일을 사용하면 애플리케이션의 외관을 쉽게 변경할 수 있다.

예시: CSS를 이용한 버튼 스타일링

/* style.css */
.button {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 14px;
}
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class CssApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Styled Button");

        Scene scene = new Scene(button, 300, 200);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        
        primaryStage.setScene(scene);
        primaryStage.setTitle("CSS Styling Example");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

위 예제에서는 버튼을 CSS로 스타일링하여 배경색과 글자색을 변경한다.

5. FXML을 사용한 UI 정의

JavaFX에서는 XML 기반 언어인 FXML을 사용하여 UI를 선언적으로 정의할 수 있다. 이를 통해 코드를 더 간결하게 유지하고, 개발자와 디자이너 간 협업을 용이하게 할 수 있다.

예시: FXML을 사용한 버튼 UI

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.VBox?>

<VBox spacing="10" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <Button text="Button 1" />
    <Button text="Button 2" />
</VBox>
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class FxmlApp extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        
        Scene scene = new Scene(root, 300, 200);
        primaryStage.setScene(scene);
        primaryStage.setTitle("FXML Example");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

위 예제는 FXML을 사용해 UI를 정의하고, 버튼 두 개를 배치하는 방법을 보여준다.

6. 미디어 및 애니메이션

JavaFX는 멀티미디어 기능을 제공하여 비디오 재생, 이미지 처리, 애니메이션 등을 쉽게 구현할 수 있다. Timeline, FadeTransition, RotateTransition과 같은 클래스들을 사용하여 애니메이션을 구현할 수 있다.

예시: 애니메이션

import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class AnimationApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Rotate Me");

        RotateTransition rotate = new RotateTransition(Duration.seconds(2), button);
        rotate.setByAngle(360);
        rotate.setCycleCount(2);  // 두 번 회전
        rotate.setAutoReverse(true);

        button.setOnAction(e -> rotate.play());
        
        StackPane root = new StackPane(button);
        Scene scene = new Scene(root, 300, 200);
        
        primaryStage.setScene(scene);
        primaryStage.setTitle("Animation Example");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

이 예제에서는 버튼을 클릭할 때 버튼이 회전하는 애니메이션이 적용된다.

profile
찌끅
이전 포스트

MariaDB

다음 포스트

자바에서 메소드(Method)란

0개의 댓글