JavaFX开发桌面，移动端，嵌入式权威指南（三）——应用SceneBuilder开发用户界面

最新推荐文章于 2023-03-20 14:36:48 发布

NewTech精选

最新推荐文章于 2023-03-20 14:36:48 发布

阅读量551

点赞数 2

分类专栏： JavaFX 文章标签： java 小程序

本文链接：https://blog.csdn.net/fitAllEnv/article/details/114972422

版权

JavaFX 专栏收录该内容

14 篇文章 5 订阅

订阅专栏

概述

JavaFX是用于构建富互联网应用程序的Java库。使用JavaFX开发的应用程序可以在各种设备上运行，如台式计算机，手机，物联网
设备，平板电脑等。上一章主要是介绍如何应用JavaFX使用编程声明方式开发用户界面。这一章主要应用SceneBuilder开发用户界面。

使用JavaFX SceneBuilder开发用户界面

这是安装好的SceneBuilder2.0，这是fxml文件编辑器，可以进行控件拖拽来搭建用户界面。
在这里插入图片描述

通过FXML设置舞台

将上一章中的 StageCoach程序改为fxml构建：

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

<?import javafx.scene.control.*?>
<?import javafx.scene.Group?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.shape.Rectangle?>
<?import javafx.scene.text.*?>
<Group fx:id="rootGroup"
       onMouseDragged="#mouseDraggedHandler"
       onMousePressed="#mousePressedHandler"
       xmlns="http://javafx.com/javafx/8"
       xmlns:fx="http://javafx.com/fxml/1"
       fx:controller="sample.StageCoachController">
    <children>
        <Rectangle fx:id="blue"
                   arcHeight="50.0"
                   arcWidth="50.0"
                   fill="SKYBLUE"
                   height="350.0"
                   strokeType="INSIDE"
                   width="250.0"/>
        <VBox fx:id="contentBox"
              layoutX="30.0"
              layoutY="20.0"
              spacing="10.0">
            <children>
                <Text fx:id="textStageX"
                      strokeType="OUTSIDE"
                      strokeWidth="0.0"
                      text="x:"
                      textOrigin="TOP"/>
                <Text fx:id="textStageY"
                      layoutX="10.0"
                      layoutY="23.0"
                      strokeType="OUTSIDE"
                      strokeWidth="0.0"
                      text="y:"
                      textOrigin="TOP"/>
                <Text fx:id="textStageH"
                      layoutX="10.0"
                      layoutY="50.0"
                      strokeType="OUTSIDE"
                      strokeWidth="0.0"
                      text="height:"
                      textOrigin="TOP"/>
                <Text fx:id="textStageW"
                      layoutX="10.0"
                      layoutY="77.0"
                      strokeType="OUTSIDE"
                      strokeWidth="0.0"
                      text="width:"
                      textOrigin="TOP"/>
                <Text fx:id="textStageF"
                      layoutX="10.0"
                      layoutY="104.0"
                      strokeType="OUTSIDE"
                      strokeWidth="0.0"
                      text="focused:"
                      textOrigin="TOP"/>
                <CheckBox fx:id="checkBoxResizable"
                          mnemonicParsing="false"
                          text="resizable"/>
                <CheckBox fx:id="checkBoxFullScreen"
                          mnemonicParsing="false"
                          text="fullScreen"/>
                <HBox fx:id="titleBox">
                    <children>
                        <Label fx:id="titleLabel"
                               text="title"/>
                        <TextField fx:id="titleTextField"
                                   text="Stage Coach"/>
                    </children>
                </HBox>
                <Button fx:id="toBackButton"
                        mnemonicParsing="false"
                        onAction="#toBackEventHandler"
                        text="toBack()"/>
                <Button fx:id="toFrontButton"
                        mnemonicParsing="false"
                        onAction="#toFrontEventHandler"
                        text="toFront()"/>
                <Button fx:id="closeButton"
                        mnemonicParsing="false"
                        onAction="#closeEventHandler"
                        text="close()"/>
            </children>
        </VBox>
    </children>
</Group>

在SceneBuilder中的显示效果：
在这里插入图片描述

理解fxml文件

  xmlns="http://javafx.com/javafx/8"
  xmlns:fx="http://javafx.com/fxml/1"

这两条命名空间将会被FXMLLoader使用。

   fx:controller="sample.StageCoachController"

它通知 JavaFX 运行时间，当前设计的 UI FXML 文件与其控制器Java 类协同工作。

因此，在加载FXML文件后，FXML文件中的顶层组节点可以在Java代码中作为舞台控制器类的根组字段访问和操作。在此FXML中
文件，我们分配了fx：id到我们创建的所有节点。当然如果不想程序化地操作节点，例如静态标签的情况，fx：id属性和控制器中的相应字段可以省略。

在程序中加载fxml

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Rectangle2D;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

import java.io.IOException;
import java.util.List;

public class StageCoachMainWithFxml extends Application {

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

    @Override
    public void start(Stage stage) throws IOException {
        final StageStyle stageStyle = configStageStyle();
        FXMLLoader fxmlLoader = new FXMLLoader(StageCoachMainWithFxml.class
                .getResource("StageCoach.fxml"));
        Group rootGroup = fxmlLoader.load();
        final StageCoachController controller = fxmlLoader.getController();
        controller.setStage(stage);
        controller.setupBinding(stageStyle);
        Scene scene = new Scene(rootGroup, 250, 350);
        scene.setFill(Color.TRANSPARENT);
        stage.setScene(scene);
        stage.setOnCloseRequest(we -> System.out.println("Stage is closing"));
        stage.show();
        Rectangle2D primScreenBounds = Screen.getPrimary().getVisualBounds();
        stage.setX((primScreenBounds.getWidth() - stage.getWidth()) / 2);
        stage.setY((primScreenBounds.getHeight() - stage.getHeight()) / 4);
    }

    private StageStyle configStageStyle() {
        StageStyle stageStyle = StageStyle.DECORATED;
        List<String> unnamedParams = getParameters().getUnnamed();
        if (unnamedParams.size() > 0) {
            String stageStyleParam = unnamedParams.get(0);
            if (stageStyleParam.equalsIgnoreCase("transparent")) {
                stageStyle = StageStyle.TRANSPARENT;
            } else if (stageStyleParam.equalsIgnoreCase("undecorated")) {
                stageStyle = StageStyle.UNDECORATED;
            } else if (stageStyleParam.equalsIgnoreCase("utility")) {
                stageStyle = StageStyle.UTILITY;
            }
        }
        return stageStyle;
    }
}

理解控制类

package sample;

import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

/**
 * @author: Administrator
 * @date: 2021/03/18 12:52
 * @description:
 */
public class StageCoachController {
    @FXML
    private Rectangle blue;
    @FXML
    private VBox contentBox;
    @FXML
    private Text textStageX;
    @FXML
    private Text textStageY;
    @FXML
    private Text textStageH;
    @FXML
    private Text textStageW;
    @FXML
    private Text textStageF;
    @FXML
    private CheckBox checkBoxResizable;
    @FXML
    private CheckBox checkBoxFullScreen;
    @FXML
    private HBox titleBox;
    @FXML
    private Label titleLabel;
    @FXML
    private TextField titleTextField;
    @FXML
    private Button toBackButton;
    @FXML
    private Button toFrontButton;
    @FXML
    private Button closeButton;
    private Stage stage;
    private StringProperty title = new SimpleStringProperty();
    private double dragAnchorX;
    private double dragAnchorY;
    public void setStage(Stage stage) {
        this.stage = stage;
    }
    public void setupBinding(StageStyle stageStyle) {
        checkBoxResizable.setDisable(stageStyle == StageStyle.TRANSPARENT
                || stageStyle == StageStyle.UNDECORATED);
        textStageX.textProperty().bind(new SimpleStringProperty("x: ")
                .concat(stage.xProperty().asString()));
        textStageY.textProperty().bind(new SimpleStringProperty("y: ")
                .concat(stage.yProperty().asString()));
        textStageW.textProperty().bind(new SimpleStringProperty("width: ")
                .concat(stage.widthProperty().asString()));
        textStageH.textProperty().bind(new SimpleStringProperty("height: ")
                .concat(stage.heightProperty().asString()));
        textStageF.textProperty().bind(new SimpleStringProperty("focused: ")
                .concat(stage.focusedProperty().asString()));
        stage.setResizable(true);
        checkBoxResizable.selectedProperty()
                .bindBidirectional(stage.resizableProperty());
        checkBoxFullScreen.selectedProperty().addListener((ov, oldValue, newValue) ->
                stage.setFullScreen(checkBoxFullScreen.selectedProperty().getValue()));
        title.bind(titleTextField.textProperty());
        stage.titleProperty().bind(title);
        stage.initStyle(stageStyle);
    }
    @FXML
    public void toBackEventHandler(ActionEvent e) {
        stage.toBack();
    }
    @FXML
    public void toFrontEventHandler(ActionEvent e) {
        stage.toFront();
    }
    @FXML
    public void closeEventHandler(ActionEvent e) {
        stage.close();
    }
    @FXML
    public void mousePressedHandler(MouseEvent me) {
        dragAnchorX = me.getScreenX() - stage.getX();
        dragAnchorY = me.getScreenY() - stage.getY();
    }
    @FXML
    public void mouseDraggedHandler(MouseEvent me) {
        stage.setX(me.getScreenX() - dragAnchorX);
        stage.setY(me.getScreenY() - dragAnchorY);
    }
}

唯一需要一些解释的是@FXML注释。它属于javafx.fxml包。这是一个标记注释，具有可应用于字段和方法的运行时保留。当应用于字段时，@FXML注释告诉 JavaFX 程序,该字段的名称使用FXML文件中的元素 fx：id 的值。当应用于一种方法时，@FXML注释告诉JavaFX程序该方法的名称可以用作事件处理器属性的值。字段和方法使用@FXML注解修饰，使得程序可以操作FXML中的组件。可以对修饰的字段进行参数的绑定，绑定事件处理器。对修饰的方法可以将行为绑定到相应fxml中的组件。例如fxml文件中button设置了onAction="#toFrontEventHandler" 属性，可以在控制器中使用如下方法绑定到相应的button.

@FXML
    public void toFrontEventHandler(ActionEvent e) {
        stage.toFront();
    }

NewTech精选

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录