JavaFxの紹介
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]にあります。