java - 如何在 JavaFX 应用程序中执行没有 webview 或 fxml 的 javascript？

Question

我有一个 JavaFX 示例代码，有一个 CSS 文件和一个 javascript 文件，没有 html 代码，也没有 fxml 代码，我想加载 javascript 文件代码。我知道如何加载 css 文件:

scene.getStylesheets().add(Login.class.getResource("login.css").toExternalForm());

但我没有找到针对 javascript 文件的相同说明。我想在场景中添加javascript文件代码:

.java 代码是:

package login;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;


public class Login extends Application {

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Bienvenido a JavaFX");
        GridPane grid = new GridPane();
        grid.setAlignment(Pos.CENTER);
        grid.setHgap(10);
        grid.setVgap(10);
        grid.setPadding(new Insets(25, 25, 25, 25));
        Scene scene = new Scene(grid, 300, 300);
        primaryStage.setScene(scene);
        scene.getStylesheets().add(Login.class.getResource("login.css").toExternalForm());


        Text scenetitle = new Text("Bienvenido");
        //scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
        scenetitle.setId("welcome-text");
        grid.add(scenetitle, 0, 0, 2, 1);

        Label userName = new Label("Nombre de Usuario:");
        grid.add(userName, 0, 1);

        TextField userTextField = new TextField();
        grid.add(userTextField, 1, 1);

        Label pw = new Label("Contraseña:");
        grid.add(pw, 0, 2);

        PasswordField pwBox = new PasswordField();
        grid.add(pwBox, 1, 2);

        //grid.setGridLinesVisible(true); // Para Debugging.

        Button btn = new Button("Entrar");
        HBox hbBtn = new HBox(10);
        hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
        hbBtn.getChildren().add(btn);
        grid.add(hbBtn, 1, 4);

        final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

        //Eventos(btn, actiontarget);

        primaryStage.show();
    }
    // I WANT TO SUBSTITUTE THIS  EVENT WITH THE JAVASCRIPT FILE CODE 
    /*public void Eventos(Button btn, final Text actiontarget) {
        btn.setOnAction((ActionEvent event) -> {
            //actiontarget.setFill(Color.FIREBRICK);
            actiontarget.setId("actiontarget");
            actiontarget.setText("Botón Entrar presionado");
        });
    }*/

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

JavaScript 代码是:login.js

var actiontarget = document.getElementById("actiontarget") ;
function handleSubmitButtonAction() {
    actiontarget.setText("Calling the JavaScript");
}

css代码为:login.css

.root {
    -fx-background-color: lightblue;
}
.label {
    -fx-font-size: 0.750em;
    -fx-font-weight: bold;
    -fx-font-text-fill: #333333;
}
.label, #actiontarget {
    -fx-effect: dropshadow(gaussian, rgba(255, 255, 255, 0.5), 0, 0, 0, 1);
}
#welcome-text {
    -fx-font-size: 2.0em;
    -fx-font-family: "Arial Black";
    -fx-fill: #818181;
    -fx-effect: innershadow(three-pass-box, rgba(0, 0, 0, 0.7), 6, 0.0, 0, 2);
}
#actiontarget {
    -fx-fill: firebrick;
    -fx-font-weight: bold;
}
.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
    -fx-transition: all 2s linear;
}
.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

我知道如何使用 FXML 文件制作它，我从互联网上找到的所有可能的解决方案都使用 webview、webengine 和 html 文件，但我的应用程序中没有 html 文件。

此代码来自 Oracle JavaFX 官方网页的 ifxpub-get_started.pdf 文档。

谢谢

Answer 1

好的，似乎唯一的方法是制作 fxml 文件，因为它没有实现能够从 .java 类执行 .js 文件。解决方案代码:

文件 Login.java:

package login;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Login extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root;
        root = FXMLLoader.load(getClass().getResource("login.fxml"));
        primaryStage.setTitle("Bienvenido a JavaFX");

        Scene scene = new Scene(root, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

文件 login.fxml:

<?xml version="1.0" encoding="UTF-8"?>
<?language javascript?>

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane xmlns:fx="http://javafx.com/fxml/1" alignment="center" hgap="10" vgap="10" styleClass="root">
    <fx:script source="login.js"/>
    <padding>
        <Insets top="25" right="25" bottom="10" left="25"/>
    </padding>
    <Text id="welcome-text" text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/>
    <Label text="User Name:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
    <PasswordField id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
    <HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button text="Sign In" onAction="handleSubmitButtonAction(event);"/>
    </HBox>
    <Text fx:id="actiontarget" GridPane.columnIndex="1" GridPane.rowIndex="6"/>
    <stylesheets>
        <URL value="@login.css" />
    </stylesheets>
</GridPane>

请注意，当您将 id 用于 javascript 代码时，您只需要 fx:id，否则您只需要 id

文件 login.js:

function handleSubmitButtonAction() {
    actiontarget.setText("Calling the JavaScript");
}

文件 login.css:

.root {
    -fx-background-color: lightblue;
}
.label {
    -fx-font-size: 0.750em;
    -fx-font-weight: bold;
    -fx-font-text-fill: #333333;
}
.label, #actiontarget {
    -fx-effect: dropshadow(gaussian, rgba(255, 255, 255, 0.5), 0, 0, 0, 1);
}
#welcome-text {
    -fx-font-size: 2.0em;
    -fx-font-family: "Arial Black";
    -fx-fill: #818181;
    -fx-effect: innershadow(three-pass-box, rgba(0, 0, 0, 0.7), 6, 0.0, 0, 2);
}
#actiontarget {
    -fx-fill: firebrick;
    -fx-font-weight: bold;
}
.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
    -fx-transition: all 2s linear;
}
.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

就这些。