JaxaFx学习（一）

（1）基本结构

（2）Application

（3）Stage窗口显示

（4）Scene场景切换

（5）UI控件通用属性

（6）UI控件属性绑定很属性监听

（7）事件驱动编程

（8）Color、Font、Image

（9）FXML布局文件

（10）Scene Builder构建fxml布局文件

（1）基本结构

//入口函数调用lanch方法，launch会自动的调用start方法

（2）Application

Application有一个获取主机服务的方法：

调用它的showDocument给他一个网址：进行跳转

package org.example;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class Main extends Application {
    public static void main(String[] args) {
        System.out.println("Hello world!");
        //入口函数调用lanch方法，launch会自动的调用start方法
        Application.launch(args);
    }

    @Override
    public void init() throws Exception {
        super.init();
        //init可以做数据初始化的操作：建立数据库连接之类的，可以新建一个线程去连接数据库，跟start方法同步执行
    }

    @Override
    public void start(Stage primaryStage) throws Exception {//窗口Stage

        //窗口是否可以改变大小
        primaryStage.setResizable(true);
        //设置窗口图标
        primaryStage.getIcons().add(new Image("images/logo.jpg"));
        //窗口样式
        primaryStage.initStyle(StageStyle.DECORATED);

        Label label=new Label("Hello");//标签
        Button button=new Button("跳转");


        BorderPane borderPane=new BorderPane(button);//把标签放到，布局里，BorderPane会把布局划分为上下左右中，加的标签默认放到中间

        //按钮点击事件
        button.setOnAction(e ->{
            getHostServices().showDocument("www.baidu.com");
        });

        //场景
        Scene scene=new Scene(borderPane,300,300);//布局放到场景里面

        primaryStage.setScene(scene);//场景放到窗口里

        primaryStage.setTitle("窗口");//标题
        primaryStage.show();
    }

    @Override
    public void stop() throws Exception {
        super.stop();
        //做清理资源的操作
    }
}

点击跳转：

（3）Stage窗口显示


package org.example;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonType;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Modality;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

import java.util.Optional;

public class Stage0 extends Application {
    public static void main(String[] args) {
        System.out.println("Hello world!");
        //入口函数调用lanch方法，launch会自动的调用start方法
        Application.launch(args);
    }

    @Override
    public void init() throws Exception {
        super.init();
        //init可以做数据初始化的操作：建立数据库连接之类的，可以新建一个线程去连接数据库，跟start方法同步执行
    }

    @Override
    public void start(Stage primaryStage) throws Exception {//窗口Stage

        //窗口是否可以改变大小
        primaryStage.setResizable(true);
        //设置窗口图标
        primaryStage.getIcons().add(new Image("images/logo.jpg"));
        //窗口样式
        primaryStage.initStyle(StageStyle.DECORATED);


        Button button0=new Button("跳转");
        Button button1=new Button("跳转");
        button0.setLayoutX(200);
        button0.setLayoutY(200);
        button1.setLayoutX(200);
        button1.setLayoutY(250);



        //组件图，树形结构组件图
        AnchorPane anchorPane=new AnchorPane();
        anchorPane.getChildren().addAll(button0,button1);

        //按钮点击事件
        button0.setOnAction(e ->{
            //显示新窗口
            Stage stage=new javafx.stage.Stage();
            stage.setHeight(200);
            stage.setWidth(300);
            stage.initModality(Modality.WINDOW_MODAL);//none：非模态  APPLICATION_MODAL：模态其他窗口不能使用 WINDOW_MODAL：需要设置下父窗口，只有父窗口不能使用
            stage.initOwner(primaryStage);
            stage.setTitle("父模态窗口");
            stage.show();//显示新窗口
        });

        button1.setOnAction(e ->{
            Stage stage=new javafx.stage.Stage();
            stage.setHeight(200);
            //没有设置默认为非模态
            stage.initModality(Modality.NONE);
            stage.setWidth(300);
            stage.setTitle("非模态窗口");
            stage.show();
        });

        //取消系统默认退出事件
        Platform.setImplicitExit(false);
        primaryStage.setOnCloseRequest(event -> {
            event.consume();//关闭窗口的动作

            Alert alert=new Alert(Alert.AlertType.CONFIRMATION);
            alert.setTitle("退出程序");
            alert.setHeaderText(null);
            alert.setContentText("您是否要退出程序？");
            Optional<ButtonType> result=alert.showAndWait();
            if (result.get()==ButtonType.OK){
                Platform.exit();//退出程序
                primaryStage.close();//只是退出窗口，程序还在运行
            }
        });

        //场景
        Scene scene=new Scene(anchorPane,300,300);//布局放到场景里面

        primaryStage.setScene(scene);//场景放到窗口里

        primaryStage.setTitle("窗口");//标题
        primaryStage.show();
    }

    @Override
    public void stop() throws Exception {
        super.stop();
        //做清理资源的操作
    }
}

点击第二个按钮：他是非模态的

点击第一个按钮：他是模态的，设置了父窗口模态

非模态窗口此时是可以使用的

（4）Scene场景切换


package org.example;

import javafx.application.Application;
import javafx.scene.ImageCursor;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Modality;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class Scene1 extends Application {
    public static void main(String[] args) {
        System.out.println("Hello world!");
        //入口函数调用lanch方法，launch会自动的调用start方法
        Application.launch(args);
    }

    @Override
    public void init() throws Exception {
        super.init();
        //init可以做数据初始化的操作：建立数据库连接之类的，可以新建一个线程去连接数据库，跟start方法同步执行
    }

    @Override
    public void start(Stage primaryStage) throws Exception {//窗口Stage

        //窗口是否可以改变大小
        primaryStage.setResizable(true);
        //设置窗口图标
        primaryStage.getIcons().add(new Image("images/logo.jpg"));
        //窗口样式
        primaryStage.initStyle(StageStyle.DECORATED);

        //Label label=new Label("Hello");//标签
        Button button0=new Button("跳转");

        button0.setLayoutX(200);
        button0.setLayoutY(200);

        AnchorPane anchorPane=new AnchorPane();//把标签放到，布局里，BorderPane会把布局划分为上下左右中，加的标签默认放到中间

        anchorPane.getChildren().addAll(button0);

        //场景
        Scene scene=new Scene(anchorPane,300,300);//布局放到场景里面

        Label label2=new Label("JavaFx");//标签
        Button button1=new Button("返回原场景");
        label2.setLayoutX(200);
        label2.setLayoutY(200);
        button1.setLayoutX(200);
        button1.setLayoutY(250);
        AnchorPane anchorPane1=new AnchorPane();
        anchorPane1.getChildren().addAll(button1,label2);

        //场景二
        Scene scene1=new Scene(anchorPane1,500,500);
        //设置鼠标箭头
        scene1.setCursor(new ImageCursor(new Image("images/logo.jpg")));

        //按钮点击事件
        button0.setOnAction(e ->{
           primaryStage.setScene(scene1);//切换场景

        });
        button1.setOnAction(e ->{
            primaryStage.setScene(scene);//切换场景

        });


        primaryStage.setScene(scene);//场景放到窗口里

        primaryStage.setTitle("窗口");//标题
        primaryStage.show();
    }

    @Override
    public void stop() throws Exception {
        super.stop();
        //做清理资源的操作
    }
}

点击跳转：

点击返回就返回到了原场景

（5）UI控件通用属性

所有控件都继承父类Node ，你想用node里面的方法，只能用它的子类Button、CheckBox等等

package org.example;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

/**
 * UI控件的通用属性
 *
 */
public class Node extends Application {
    public static void main(String[] args) {
        System.out.println("Hello world!");
        //入口函数调用lanch方法，launch会自动的调用start方法
        Application.launch(args);
    }


    @Override
    public void start(Stage primaryStage) throws Exception {//窗口Stage

        //窗口是否可以改变大小
        primaryStage.setResizable(true);

        Label label=new Label("Hello");//标签
        //设置坐标
        label.setLayoutX(200);
        label.setLayoutY(200);
        //设置样式
        label.setStyle("-fx-background-color: red;-fx-border-color: blue;-fx-border-width:3px");
        //设置宽度
        label.setPrefWidth(200);
        label.setPrefHeight(50);
        //设置内容居中
        label.setAlignment(Pos.CENTER);

        //设置这个控件是否显示
        //label.setVisible(false);

        //设置控件透明度，半透明
        label.setOpacity(0.5);

        //设置旋转，旋转90度
        label.setRotate(90);

        //设置平移 x轴平移
        label.setTranslateX(60);
        label.setTranslateY(100);

        //parent:父节点 scene：场景

        AnchorPane anchorPane=new AnchorPane();
        anchorPane.getChildren().add(label);

        //场景
        Scene scene=new Scene(anchorPane,500,500);//布局放到场景里面
        primaryStage.setScene(scene);//场景放到窗口里

        primaryStage.setTitle("窗口");//标题
        primaryStage.show();
    }

}

（6）UI控件属性绑定很属性监听

属性绑定使用的是Property这个接口，node里面使用的这个接口的一些子类实例

绑定解绑方法：第一个是单向绑定，第二个是双向绑定

package org.example;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 * UI控件的属性绑定和属性监听
 *
 */
public class Property extends Application {
    public static void main(String[] args) {
        System.out.println("Hello world!");
        //入口函数调用lanch方法，launch会自动的调用start方法
        Application.launch(args);
    }


    @Override
    public void start(Stage primaryStage) throws Exception {//窗口Stage

        //窗口是否可以改变大小
        primaryStage.setResizable(true);

        AnchorPane anchorPane=new AnchorPane();

        Scene scene=new Scene(anchorPane,500,500);

        Circle circle=new Circle();
        //圆的x轴Y轴中心点位置
        circle.setCenterX(250);
        circle.setCenterY(250);
        circle.setRadius(100);//半径
        circle.setFill(Color.WHITE);//填充颜色
        circle.setStroke(Color.BLACK);//边框

        //设置属性绑定：中心点绑定到场景的宽度和高度，让这个圆随着场景的变化而变化
        circle.centerXProperty().bind(scene.widthProperty().divide(2));//圆的中心点对应场景的宽度除以2
        circle.centerYProperty().bind(scene.heightProperty().divide(2));//圆的中心点对应场景的高度除以2

        //设置监听器：中心点监听
        circle.centerXProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                System.out.println("x轴中心点，原来是："+oldValue+" 现在是："+newValue);
            }
        });

        anchorPane.getChildren().add(circle);

        primaryStage.setScene(scene);//设置场景




        primaryStage.setTitle("窗口");//标题
        primaryStage.show();
    }

}

窗口大小变化，圆中心点也变化

属性也进行了监听

（7）事件驱动编程

事件源：产生事件的控件，如Button

事件处理者：各式各样的EventHandler

每个事件源都可以设置一个事件处理者对象，传一个事件对象，

事件对象：ActionEvent，包含很多对事件相关的一系列对象、参数

有很多事件

每个应用程序都应该对用户的操作进行反应，对用户的操作产生的事件进行处理

package org.example;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.input.*;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

import java.security.Key;

/**
 * 绑定事件
 *
 */
public class Event extends Application {
    public static void main(String[] args) {
        System.out.println("Hello world!");
        //入口函数调用lanch方法，launch会自动的调用start方法
        Application.launch(args);
    }


    @Override
    public void start(Stage primaryStage) throws Exception {//窗口Stage
        //窗口是否可以改变大小
        primaryStage.setResizable(true);
        //组件图，树形结构组件图
        AnchorPane anchorPane=new AnchorPane();
        //场景
        Scene scene=new Scene(anchorPane,500,500);//布局放到场景里面

        Label label=new Label("Hello");//标签
        label.setLayoutX(200);
        label.setLayoutY(200);

        Button button=new Button("向上移动");
        button.setLayoutX(300);
        button.setLayoutY(200);

        //设置事件:按钮点击标签向上移动5
        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                label.setLayoutY(label.getLayoutY()-5);
            }
        });
        //设置键盘按下事件，可以设置控件，也可以设置给场景
        scene.setOnKeyPressed(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {
                KeyCode keyCode=event.getCode();//获取键盘键
                if (keyCode.equals(KeyCode.DOWN)){//向下箭头
                    label.setLayoutY(label.getLayoutY()+5);
                }
            }
        });


        //拖拽事件：当拖拽文件到文本框上时，显示文件的相对路径
        TextField textField=new TextField();
        textField.setLayoutX(100);
        textField.setLayoutY(100);
        //拖拽到这上面是弹出
        textField.setOnDragOver(new EventHandler<DragEvent>() {
            @Override
            public void handle(DragEvent event) {
                event.acceptTransferModes(TransferMode.ANY);//设置显示一个箭头
            }
        });
        //松开手时弹出
        textField.setOnDragDropped(event -> {
            Dragboard dragboard=event.getDragboard();//获取托盘
            if (dragboard.hasFiles()){
                String path=dragboard.getFiles().get(0).getAbsolutePath();//获取绝对路径
                textField.setText(path);//设置到文本框里面
            }
        });

        anchorPane.getChildren().addAll(label,button,textField);


        primaryStage.setScene(scene);//场景放到窗口里

        primaryStage.setTitle("窗口");//标题
        primaryStage.show();
    }

}

点击按钮：

按键盘向下的箭头：

移动一个文件：获取地址

（8）Color、Font、Image

Color：有好多种使用方法

color的静态常量

package org.example;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;



/**
 * 字体、颜色、图片
 *
 */
public class ColorFontImage extends Application {
    public static void main(String[] args) {
        System.out.println("Hello world!");
        //入口函数调用lanch方法，launch会自动的调用start方法
        Application.launch(args);
    }


    @Override
    public void start(Stage primaryStage) throws Exception {//窗口Stage

        //窗口是否可以改变大小
        primaryStage.setResizable(true);

        //组件图，树形结构组件图
        AnchorPane anchorPane=new AnchorPane();

        Scene scene=new Scene(anchorPane,500,500);

        Circle circle=new Circle();
        //圆的x轴Y轴中心点位置
        circle.setCenterX(250);
        circle.setCenterY(250);
        circle.setRadius(100);//半径

        //设置填充色
        //circle.setFill(Color.rgb(255,0,0));
        circle.setFill(Color.web("#f66a08"));

        //设置边框
        circle.setStroke(Color.BLUE);
        circle.setStrokeWidth(10);//边框宽度

        //字体
        Label label=new Label("你好");
        label.setLayoutX(100);
        label.setLayoutY(100);
        //label.setFont(new Font(30));
        label.setFont(Font.font("今天想你到这里", FontWeight.BOLD,30));

        //图片
        ImageView imageView=new ImageView();//图片放到里面
        Image image=new Image("images/logo.jpg");
        imageView.setImage(image);

        anchorPane.getChildren().addAll(imageView,circle);

        primaryStage.setScene(scene);//设置场景




        primaryStage.setTitle("窗口");//标题
        primaryStage.show();
    }

}

（9）FXML布局文件

使用fxml文件代理在start里面控件和代码

package org.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;


/**
 * fxml的运用：现实视图、控制器、java代码就实现了分离，主进程里面的代码会非常简介
 *
 */
public class fxml extends Application {
    public static void main(String[] args) {
        System.out.println("Hello world!");
        //入口函数调用lanch方法，launch会自动的调用start方法
        Application.launch(args);
    }


    @Override
    public void start(Stage primaryStage) throws Exception {//窗口Stage

        //窗口是否可以改变大小
        primaryStage.setResizable(true);

       /* //字体
        Label label=new Label("你好");
        label.setLayoutX(150);
        label.setLayoutY(200);

        Button button=new Button("向上移动");
        button.setLayoutX(150);
        button.setLayoutY(260);

        //设置事件:按钮点击标签向上移动5
        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                label.setLayoutY(label.getLayoutY()-5);
            }
        });

        //组件图，树形结构组件图
        AnchorPane anchorPane=new AnchorPane();
        anchorPane.getChildren().addAll(label,button);*/

        //使用fxml的布局，进行引入fxml

        Pane anchorPane= FXMLLoader.load(getClass().getResource("/fxml/buttonLabel.fxml"));


        Scene scene=new Scene(anchorPane,500,500);

        primaryStage.setScene(scene);//设置场景


        primaryStage.setTitle("窗口");//标题
        primaryStage.show();
    }

}

控件实例：

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<?import javafx.scene.text.Font?>
<AnchorPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="org.example.controller.buttonLabelController"
            prefHeight="400.0" prefWidth="600.0">

    <!--children：变量是一个容器里面装了两个节点label、button-->
    <children>
        <!--label标签的类名作为标签名  如果想在controller中使用label需要设置一个id-->
        <Label fx:id="la" text="你好" layoutX="150" layoutY="200">
            <!--给label设置字体，设置的是font对象类型，必须设置子标签的形式-->
            <font>
                <Font size="30"></Font>
            </font>
        </Label>

        <!--设置点击事件 ：#onUp会调用controller中的方法-->
        <Button fx:id="bu" text="向上移动" layoutX="150" layoutY="260" onAction="#onUp"></Button>
    </children>

</AnchorPane>

创建视图的控制器，编写功能代码：

package org.example.controller;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;


public class buttonLabelController {
    @FXML
    Label la;

    @FXML
    Button bu;

    public void onUp(ActionEvent event){
        la.setLayoutY(la.getLayoutY() -5);
    }

}