【Java】JavaFX Ver.２

Posted on by masumasu

こんにちわ、masumasuです。

7月に入り、暑い日々がやってきましたね。仕事終わりのビールが毎日楽しみでなりません。

皆様は7月の楽しみは何ですか？

前回は、JavaFXの概要と開発環境の準備について解説しました。

今回は、前回に引き続き、JavaFXを使って簡単なアプリケーションを作りながら、FXMLやCSSの使い方を紹介します。

1. Hello JavaFXアプリの作成

まずは「Hello, JavaFX!」アプリを作ってみましょう。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class HelloApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        Label label = new Label("Hello, JavaFX!");
        StackPane root = new StackPane(label);
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("Hello JavaFX");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

このコードでは、ラベルを中央に表示するだけのシンプルなアプリケーションを作成しています。

JavaFXの基本は「Stage（ウィンドウ）」「Scene（シーン）」「Node（要素）」という3つの構造に分かれており、それぞれが役割を担っています。

2. FXMLの導入

FXMLを使えば、UIレイアウトをXMLで記述することができます。

以下はその一例です。

sample.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox spacing="10" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml">
    <Label text="Hello from FXML!" />
    <Button text="Click Me" />
</VBox>

FXMLはコントローラークラスと連携させることで、ボタンのイベント処理なども実装可能です。

3. CSSによるスタイリング

FXMLで定義したUIは、CSSでスタイル調整が可能です。

以下はその一例です。

style.css

.label {
    -fx-font-size: 20px;
    -fx-text-fill: #2a9d8f;
}
.button {
    -fx-background-color: #e76f51;
    -fx-text-fill: white;
}

CSSファイルはFXMLまたはSceneにバインドして適用します。

まとめ

これからJavaFXを学び始めたい方は、まずは簡単なアプリを作ってみることから始めてみてはいかがでしょうか。

ご覧いただきありがとうございます。