JavaFxの紹介

投稿日: 2019-10-19 2019-11-05
タグ: Java

1前書き

JavaFXは、Javaでリッチクライアントアプリケーションを構築するためのライブラリです。 ** Javaをサポートしているほぼすべてのデバイスで動作するGUIアプリケーションを設計するためのAPIを提供します。

このチュートリアルでは、その主な機能と機能に焦点を当てて説明します。

** 2 JavaFX API

Java 8、9、および10では、JavaFXライブラリーを使い始めるのに追加のセットアップは必要ありません。プロジェクトはJDK 11からJDKから削除されます。

2.1. 建築

JavaFXは

Prism

** として知られているハードウェアアクセラレーショングラフィックスパイプラインをレンダリングに使用します。さらに、グラフィックの使用を完全に加速するために、

DirectX

と

OpenGL

を内部的に使用することで、ソフトウェアまたはハードウェアのレンダリングメカニズムを利用します。
JavaFXはネイティブオペレーティングシステム** に接続するためのプラットフォーム依存の

Glass

ウィンドウツールキットレイヤを持っています。オペレーティングシステムのイベントキューを使用してスレッドの使用をスケジュールします。また、ウィンドウ、イベント、タイマーを非同期的に処理します。

Media

および

Web

エンジンは、メディアの再生とHTML/CSSのサポートを可能にします。

JavaFXアプリケーションのhttps://docs.oracle.com/javafx/2/get

started/img/helloworld

scenegraph.png[main structure]がどのようなものであるかを見てみましょう。

ここでは、2つの主なコンテナに気付きます。

**

Stage

はメインコンテナであり、そのエントリポイントです。

応用** 。これはメインウィンドウを表し、

start（）

メソッドの引数として渡されます。

Scene

は、ImageなどのUI要素を保持するためのコンテナです。

ビュー、ボタン、グリッド、テキストボックス。

Scene

は置き換えたり、別の

Scene

に切り替えることができます。これは階層オブジェクトのグラフを表し、これは

Scene

グラフとして知られています。その階層の各要素はノードと呼ばれます。単一のノードには、ID、スタイル、エフェクト、イベントハンドラ、状態があります。

さらに、

Scene

にはレイアウトコンテナ、画像、メディアも含まれています。

2.2. スレッド

システムレベルでは、JVMはアプリケーションの実行とレンダリングのために別々のスレッドを作成します。

Prism

レンダリングスレッド –

Scene Graph

のレンダリングを担当

別々に。

アプリケーションスレッド – あらゆるJavaFXアプリケーションのメインスレッドです。すべて

稼働中のノードとコンポーネントはこのスレッドにアタッチされています。

2.3. ライフサイクル

javafx.application.Application

**

init（）

– アプリケーションインスタンスが作成された後に呼び出されます。で

この時点では、JavaFX APIはまだ準備ができていないので、ここではグラフィカルコンポーネントを作成することはできません。

start（ステージステージ）

– すべてのグラフィカルコンポーネントがここで作成されます。

また、グラフィカルアクティビティのメインスレッドはここから始まります。
**

stop（）

– アプリケーションのシャットダウン前に呼び出されます。例えば、

ユーザーがメインウィンドウを閉じるとアプリケーションを終了する前に、このメソッドをオーバーライドしてクリーンアップすると便利です。

静的

launch（）

メソッドは、JavaFXアプリケーションを起動します。

2.4. FXML

JavaFXは、ビューインタフェースを作成するために特別なFXMLマークアップ言語を使用します。

これは、ビューをビジネスロジックから分離するためのXMLベースの構造を提供します。 XMLは、より自然に

Scene Graph

階層を表すことができるので、ここではより適しています。

最後に、

。fxml

ファイルをロードするために、

FXMLLoader

クラスを使用します。これは、シーン階層のオブジェクトグラフになります。

3入門

実用的にするために、そして

人々のリストを通して検索することを可能にする小さなアプリケーションを構築しよう。

まず、ドメインを表すために

Person

モデルクラスを追加しましょう。

public class Person {
    private SimpleIntegerProperty id;
    private SimpleStringProperty name;
    private SimpleBooleanProperty isEmployed;

   //getters, setters
}

int、String

、および

boolean

の値をまとめるために、

javafx.beans.property

パッケージの__SimpleIntegerProperty、SimpleStringProperty、SimpleBooleanPropertyの各クラスを使用していることに注目してください。

次に、

Application

抽象クラスを拡張する

Main

クラスを作成しましょう。**

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader loader = new FXMLLoader(
          Main.class.getResource("/SearchController.fxml"));
        AnchorPane page = (AnchorPane) loader.load();
        Scene scene = new Scene(page);

        primaryStage.setTitle("Title goes here");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

メインクラスは

start（）

メソッドをオーバーライドします。これはプログラムのエントリポイントです。

次に、

FXMLLoader

は、

SearchController.fxml

から

AnchorPane

にオブジェクトグラフ階層をロードします。

新しい

Scene

を開始した後、それをプライマリ

Stage

に設定します。ウィンドウのタイトルと

show（）

も設定します。

JavaFX Launcher

なしでJARファイルを実行できるようにするには、

main（）

メソッドを含めると便利です。**

3.1. FXMLビュー

それでは、

SearchController

XMLファイルについて詳しく見てみましょう。

検索アプリケーションの場合は、キーワードと検索ボタンを入力するためのテキストフィールドを追加します。

<AnchorPane
  xmlns:fx="http://javafx.com/fxml"
  xmlns="http://javafx.com/javafx"
  fx:controller="com.baeldung.view.SearchController">
    <children>

        <HBox id="HBox" alignment="CENTER" spacing="5.0">
            <children>
                <Label text="Search Text:"/>
                <TextField fx:id="searchField"/>
                <Button fx:id="searchButton"/>
            </children>
        </HBox>

    </children>
</AnchorPane>

AnchorPane

は、ここではルートコンテナであり、グラフ階層の最初のノードです。ウィンドウのサイズを変更している間、子をそのアンカーポイントに移動します。 **

fx:controller

属性は、Javaクラスとマークアップを結び付けます。

他にもいくつかの組み込みレイアウトがあります。

BorderPane

– レイアウトを5つのセクション（上、右、

下、左、中央
** __HBox – 水平方向のパネルに子コンポーネントを配置する

__VBox – 子ノードは垂直列に配置されます。
GridPane – 行と列を持つグリッドを作成するのに便利

この例では、水平の

HBox

パネルの内側で、テキストを配置するための

Label

、入力用の

TextField

、および

Button

を使用しました。

fx:id

を使用して、後でJavaコードで使用できるように要素をマークします。

それから、それらをJavaフィールドにマップするために – 私たちは

@ FXML

アノテーションを使います:**

public class SearchController {

    @FXML
    private TextField searchField;
    @FXML
    private Button searchButton;

    @FXML
    private void initialize() {
       //search panel
        searchButton.setText("Search");
        searchButton.setOnAction(event -> loadData());
        searchButton.setStyle("-fx-background-color: #457ecd; -fx-text-fill: #ffffff;");
    }
}

@ FXML

アノテーション付きフィールドを入力した後、

initialize（）

が自動的に呼び出されます。

最後に、ここで説明したこのロジックすべてにより、次のウィンドウが表示されます。

リンク:/uploads/HBox-300×224.png%20300w[]

4.

バインディングAPI

視覚的な側面が処理されたので、バインディングデータを見てみましょう。

バインディングAPIは、別のオブジェクトの値が変化したときにオブジェクトに通知するいくつかのインタフェースを提供します。

bind（）

メソッドを使用するか、リスナーを追加することで値をバインドできます。

単方向バインディングは、一方向のみのバインディングを提供します。

searchLabel.textProperty().bind(searchField.textProperty());

ここでは、検索フィールドを変更すると、ラベルのテキスト値が更新されます。

比較すると、双方向バインディングは2つのプロパティの値を双方向に同期させます。

フィールドをバインドする別の方法は

ChangeListenerです。

**

searchField.textProperty().addListener((observable, oldValue, newValue) -> {
    searchLabel.setText(newValue);
});

Observable

インターフェースを使用すると、オブジェクトの値を変更して観察することができます。

これを例示するために、最も一般的に使用されている実装は

javafx.collections.ObservableList <T>

インターフェースです。

ObservableList<Image> masterData = FXCollections.observableArrayList();

ここでは、要素の挿入、更新、削除などのモデル変更は、ただちにUIコントロールに通知されます。

5並行性

シーングラフでUIコンポーネントを操作することは、アプリケーションスレッドからのみアクセスされるため、スレッドセーフではありません。**

javafx.concurrent

パッケージは、マルチスレッドを支援するためのものです。

バックグラウンドスレッドでデータ検索を実行する方法を見てみましょう。

Task<ObservableList<Person>> task = new Task<ObservableList<Person>>() {
    @Override
    protected ObservableList<Person> call() throws Exception {
        updateMessage("Loading data");
        return FXCollections.observableArrayList(masterData
          .stream()
          .filter(value -> value.getName().toLowerCase().contains(searchText))
          .collect(Collectors.toList()));
    }
};

ここでは、ワンタイムタスク

javafx.concurrent.Task

オブジェクトを作成し、

call（）

メソッドをオーバーライドします。

call（）

メソッドは完全にバックグラウンドスレッドで実行され、その結果をアプリケーションスレッドに返します。** このメソッド内でUIコンポーネントを操作すると、ランタイム例外がスローされます。

ただし、

updateProgress（）、updateMessage（）

を呼び出してアプリケーションスレッド項目を更新することはできます。タスク状態がSUCCEEDED状態に遷移すると、

onSucceeded（）

イベントハンドラがアプリケーションスレッドから呼び出されます。

task.setOnSucceeded(event -> {
    masterData = task.getValue();
   //update other UI components
});

Task

は

Runnable

なので、開始するには

task

パラメーターを指定して新しい

Thread

を開始するだけです。

Thread th = new Thread(task);
th.setDaemon(true);
th.start();

setDaemon（true）

フラグは、作業終了後にスレッドが終了することを示します。

6. イベント処理

イベントをアプリケーションにとって興味深いアクションとして記述できます。

たとえば、マウスクリック、キー押下、ウィンドウのサイズ変更などのユーザー操作は、

javafx.event.Event

クラスまたはそのサブクラスによって処理または通知されます。

また、3種類のイベントを区別します。

InputEvent

– すべてのタイプのキーとマウスのアクション

KEY

PRESSED、KEY

TYPED、KEY

RELEASED

、または

MOUSE

PRESSES、
MOUSE

RELEASED

**

ActionEvent

–

Button__の起動などのさまざまなアクションを表します。

または

KeyFrame

を終了する
**

WindowEvent

–

WINDOW

SHOWING、WINDOW

SHOWN

説明するために、以下のコードは

searchField

の上で

Enter

キーを押すイベントをキャッチします。

searchField.setOnKeyPressed(event -> {
    if (event.getCode().equals(KeyCode.ENTER)) {
       //search and load some data
    }
});

7.スタイル

カスタムデザインを適用することで、JavaFXアプリケーションのUIを変更できます。

デフォルトでは、JavaFXはアプリケーション全体のCSSリソースとして

modena.css

を使用します。これは

jfxrt.jar

の一部です。

デフォルトのスタイルを上書きするために、シーンにスタイルシートを追加することができます。

scene.getStylesheets().add("/search.css");

インラインスタイルも使用できます。たとえば、特定のノードにスタイルプロパティを設定するには、次のようにします。

searchButton.setStyle("-fx-background-color: slateblue; -fx-text-fill: white;");

8結論

この短い記事はJavaFX APIの基本をカバーしています。私たちは内部構造を調べ、そのアーキテクチャー、ライフサイクル、およびコンポーネントの主要機能を紹介しました。

その結果、私たちは簡単なGUIアプリケーションを習得し、作成できるようになりました。

そして、いつものように、チュートリアルの完全なソースコードはhttps://github.com/eugenp/tutorials/tree/master/javafx[over on GitHub]にあります。

getdocs

13036