JavaFX案例：集成進(jìn)度條與后臺任務(wù)

在這個示例中，我們將向JavaFX應(yīng)用中集成一個進(jìn)度條，用來展示一個模擬的后臺任務(wù)的完成進(jìn)度。這將涉及JavaFX的并發(fā)特性，特別是Task類和如何在UI線程安全地更新UI組件。

假設(shè)我們想要實現(xiàn)一個簡單的場景：用戶點(diǎn)擊一個按鈕開始一個耗時的任務(wù)，期間進(jìn)度條會根據(jù)任務(wù)完成情況實時更新，任務(wù)完成后顯示完成信息。

修改后的主類代碼

import javafx.application.Application;
import javafx.concurrent.Task;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;public class JavaFXProgressBarDemo extends Application {public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) {// UI元素Button startButton = new Button("開始任務(wù)");ProgressBar progressBar = new ProgressBar(0);Label statusLabel = new Label("等待任務(wù)開始...");// 設(shè)置任務(wù)Task<Void> task = createSimulationTask();// 綁定進(jìn)度條到任務(wù)progressBar.progressProperty().bind(task.progressProperty());// 任務(wù)狀態(tài)監(jiān)聽task.setOnSucceeded(event -> {statusLabel.setText("任務(wù)完成！");});task.setOnFailed(event -> {statusLabel.setText("任務(wù)失敗！");});// 按鈕點(diǎn)擊事件處理startButton.setOnAction(event -> {progressBar.setProgress(ProgressIndicator.INDETERMINATE_PROGRESS);Thread thread = new Thread(task);thread.setDaemon(true);thread.start();});// 布局VBox vbox = new VBox(10);vbox.setAlignment(Pos.CENTER);vbox.getChildren().addAll(startButton, progressBar, statusLabel);// 場景Scene scene = new Scene(vbox, 480, 200);// 舞臺primaryStage.setTitle("JavaFX 進(jìn)度條示例");primaryStage.setScene(scene);primaryStage.show();}private Task<Void> createSimulationTask() {return new Task<Void>() {@Overrideprotected Void call() throws Exception {for (int i = 0; i <= 100; i++) {updateProgress(i, 100);Thread.sleep(50); // 模擬耗時操作，實際應(yīng)用中應(yīng)避免使用sleep}return null;}};}
}

代碼解析

• 引入了一個ProgressBar和一個Button，以及一個用于顯示任務(wù)狀態(tài)的Label。
• 定義了一個createSimulationTask方法，返回一個Task<Void>實例。這個任務(wù)在后臺線程中執(zhí)行，模擬一個逐步完成的過程，通過調(diào)用updateProgress方法更新任務(wù)進(jìn)度。
• 將進(jìn)度條的進(jìn)度屬性與任務(wù)的進(jìn)度屬性綁定，確保UI可以反映任務(wù)的實際完成情況。
• 在按鈕的點(diǎn)擊事件處理器中，啟動一個新線程來執(zhí)行任務(wù)，并將進(jìn)度條設(shè)置為不確定模式（INDETERMINATE_PROGRESS），直到任務(wù)開始報告具體進(jìn)度。
• 添加了對任務(wù)成功或失敗的監(jiān)聽，以便在任務(wù)結(jié)束后更新狀態(tài)信息。

通過這個示例，你學(xué)習(xí)了如何在JavaFX應(yīng)用中使用進(jìn)度條展示后臺任務(wù)的進(jìn)度，以及如何通過Task類安全地處理并發(fā)問題，保持UI的響應(yīng)性和用戶友好性。

JavaFX案例：實現(xiàn)圖表展示（使用JavaFX Charts）

在前面的示例中，我們已經(jīng)探索了JavaFX的基本UI組件、數(shù)據(jù)綁定、列表選擇以及后臺任務(wù)處理?，F(xiàn)在，我們將進(jìn)一步拓展，通過集成JavaFX Charts來創(chuàng)建一個動態(tài)的數(shù)據(jù)可視化界面。假設(shè)我們要展示一個簡單的柱狀圖（Bar Chart），根據(jù)用戶輸入的數(shù)據(jù)動態(tài)更新圖表。

準(zhǔn)備工作

請注意，JavaFX Charts并非JavaFX核心庫的一部分，需要單獨(dú)引入相關(guān)依賴。如果你使用Maven或Gradle構(gòu)建項目，需添加對應(yīng)的依賴。

修改后的主類代碼

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;public class JavaFXChartsDemo extends Application {public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) {// 創(chuàng)建X軸（分類軸）CategoryAxis xAxis = new CategoryAxis();xAxis.setLabel("類別");// 創(chuàng)建Y軸（數(shù)值軸）NumberAxis yAxis = new NumberAxis();yAxis.setLabel("數(shù)量");// 創(chuàng)建柱狀圖BarChart<String, Number> barChart = new BarChart<>(xAxis, yAxis);// 設(shè)置圖表標(biāo)題barChart.setTitle("數(shù)據(jù)分布");// 數(shù)據(jù)準(zhǔn)備ObservableList<XYChart.Series<String, Number>> data = FXCollections.observableArrayList(new XYChart.Series<>("類別A", FXCollections.observableArrayList(new XYChart.Data<>("項目1", 20),new XYChart.Data<>("項目2", 30),new XYChart.Data<>("項目3", 15))),new XYChart.Series<>("類別B", FXCollections.observableArrayList(new XYChart.Data<>("項目1", 25),new XYChart.Data<>("項目2", 35),new XYChart.Data<>("項目3", 9))));// 將數(shù)據(jù)添加到圖表barChart.getData().addAll(data);// 使用BorderPane作為根容器，并將圖表置于其中BorderPane root = new BorderPane();root.setCenter(barChart);// 創(chuàng)建場景Scene scene = new Scene(root, 800, 600);// 設(shè)置舞臺primaryStage.setTitle("JavaFX 圖表示例");primaryStage.setScene(scene);primaryStage.show();}
}

代碼解析

• 引入了BarChart、CategoryAxis和NumberAxis，這些是JavaFX Charts庫中用于創(chuàng)建柱狀圖的類。
• 創(chuàng)建了X軸（用于分類）和Y軸（用于數(shù)值），并設(shè)置了它們的標(biāo)簽。
• 通過XYChart.Series和XYChart.Data構(gòu)建了兩組數(shù)據(jù)，分別代表不同類別的數(shù)據(jù)分布。
• 將數(shù)據(jù)集添加到BarChart中，并設(shè)置了圖表的標(biāo)題。
• 使用BorderPane作為根布局容器，將柱狀圖放置于中心位置。
• 最后，像之前一樣創(chuàng)建場景并顯示舞臺。

通過這個示例，你學(xué)習(xí)了如何在JavaFX應(yīng)用中集成圖表，為用戶提供直觀的數(shù)據(jù)可視化功能。盡管這里展示了靜態(tài)數(shù)據(jù)的圖表展示，但同樣的原理可以應(yīng)用于動態(tài)數(shù)據(jù)更新，以響應(yīng)用戶輸入或其他實時數(shù)據(jù)源。

JavaFX案例：實現(xiàn)拖放功能（Drag and Drop）

在本示例中，我們將為JavaFX應(yīng)用添加拖放（Drag and Drop）功能，讓用戶能夠直接通過鼠標(biāo)操作來移動或重新排序UI元素。我們將創(chuàng)建一個簡單的界面，其中包含幾個可拖動的標(biāo)簽，用戶可以將這些標(biāo)簽拖放到一個目標(biāo)區(qū)域。

修改后的主類代碼

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.input.ClipboardContent;
import javafx.scene.input.DragEvent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.TransferMode;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;public class JavaFXDragAndDropDemo extends Application {public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) {// 創(chuàng)建可拖動的標(biāo)簽集合Label label1 = createDraggableLabel("標(biāo)簽1");Label label2 = createDraggableLabel("標(biāo)簽2");Label label3 = createDraggableLabel("標(biāo)簽3");// 創(chuàng)建目標(biāo)區(qū)域Pane targetArea = new Pane();targetArea.setStyle("-fx-background-color: #DDDDDD; -fx-border-color: black;");targetArea.setPrefSize(200, 200);// 設(shè)置目標(biāo)區(qū)域為可接受拖放targetArea.setOnDragOver(event -> {Dragboard db = event.getDragboard();if (db.hasString()) {event.acceptTransferModes(TransferMode.COPY_OR_MOVE);}event.consume();});targetArea.setOnDragDropped(event -> {Dragboard db = event.getDragboard();boolean success = false;if (db.hasString()) {Label label = (Label) event.getGestureSource();label.relocate(event.getX() - (label.getWidth() / 2), event.getY() - (label.getHeight() / 2));targetArea.getChildren().add(label);success = true;}event.setDropCompleted(success);event.consume();});// 布局VBox vbox = new VBox(10, label1, label2, label3);HBox hbox = new HBox(10, vbox, targetArea);// 場景Scene scene = new Scene(hbox, 600, 400);// 舞臺primaryStage.setTitle("JavaFX 拖放示例");primaryStage.setScene(scene);primaryStage.show();}private Label createDraggableLabel(String text) {Label label = new Label(text);label.setOnDragDetected(new EventHandler<MouseEvent>() {@Overridepublic void handle(MouseEvent event) {Dragboard db = label.startDragAndDrop(TransferMode.ANY);ClipboardContent content = new ClipboardContent();content.putString(label.getText());db.setContent(content);event.consume();}});return label;}
}

代碼解析

• 通過createDraggableLabel方法創(chuàng)建可拖動的Label，為其添加onDragDetected事件處理器，用于啟動拖放操作。
• 當(dāng)拖動開始時，我們使用Dragboard存儲要傳輸?shù)臄?shù)據(jù)（這里是標(biāo)簽的文本），并設(shè)置允許的傳輸模式。
• 目標(biāo)區(qū)域（Pane）設(shè)置了onDragOver和onDragDropped事件處理器，允許拖放并處理放下事件，將拖動的標(biāo)簽添加到目標(biāo)區(qū)域，并調(diào)整位置。
• 布局使用HBox和VBox來組織可拖動的標(biāo)簽和目標(biāo)區(qū)域。

通過這個示例，你學(xué)習(xí)了如何在JavaFX應(yīng)用中實現(xiàn)拖放功能，這增強(qiáng)了用戶界面的交互性，讓用戶能直接參與和控制UI元素的布局或排序。