JavaFX中引用HTML、JS和CSS

JavaFX是一个用于构建丰富的互联网应用程序的软件平台。它提供了一个图形用户界面（GUI）工具包，可以通过使用Java编程语言来创建各种各样的应用程序。在JavaFX中，我们可以通过使用HTML、JS和CSS来增强应用程序的外观和功能。本文将介绍如何在JavaFX中引用HTML、JS和CSS，并提供一些示例代码来帮助您快速上手。

引用HTML

在JavaFX中，我们可以使用Web视图组件Webview来嵌入HTML内容。Webview提供了一个使用WebKit引擎来渲染HTML内容的区域。下面是一个简单的示例代码，展示了如何在JavaFX中引用HTML。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class HTMLExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        WebView webView = new WebView();
        webView.getEngine().loadContent("Hello, World!");
        
        Scene scene = new Scene(webView, 500, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

在这个例子中，我们创建了一个WebView对象，然后通过getEngine().loadContent()方法来加载HTML内容。在这个例子中，我们加载了一个简单的标题，但您也可以加载更复杂的HTML页面。

引用JS

JavaFX提供了一个JavaScript引擎，可以让我们在JavaFX应用程序中执行JavaScript代码。我们可以使用这个功能来调用JavaScript函数，处理JavaScript事件等。下面是一个示例代码，展示了如何在JavaFX中引用JS。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;

public class JSExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.load(getClass().getResource("example.html").toString());
        
        webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue == Worker.State.SUCCEEDED) {
                JSObject window = (JSObject) webEngine.executeScript("window");
                window.setMember("app", new JavaApp());
            }
        });
        
        Scene scene = new Scene(webView, 500, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
    public class JavaApp {
        public void showMessage(String message) {
            System.out.println(message);
        }
    }
}

在这个例子中，我们加载了一个名为"example.html"的HTML文件。在这个HTML文件中，我们定义了一个JavaScript函数showMessage()，当按钮被点击时会调用这个函数。在Java代码中，我们通过webEngine.executeScript()方法将一个Java对象JavaApp注入到JavaScript环境中。这个JavaApp对象具有一个showMessage()方法，用于在Java控制台中显示消息。

引用CSS

JavaFX提供了一个简单的方法来引用CSS样式表，并将其应用于JavaFX应用程序的UI组件。您可以通过在FXML文件或Java代码中设置CSS样式类来使用CSS样式。下面是一个示例代码，展示了如何在JavaFX中引用CSS。

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

public class CSSExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click me!");
        button.getStyleClass().add("my-button");
        
        StackPane root = new StackPane();
        root.getChildren().add(button);
        
        Scene scene = new Scene(root, 200, 200);
        scene.getStylesheets().add(getClass().getResource("style.css").toString());
        
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

在这个例子中，我们创建了一个按钮，并使用getStyleClass().add()方法将一个名为"my-button"的CSS样式类应用于按钮。然后，我们将这个按钮添加到一个StackPane布局中，并将StackPane设置为场景的根节点