2021-09-13

使用工具

1. IDEA
2. SceneBuilder

具体步骤

新建项目

文件–>新建–>项目

项目类型选Java FX，点击下一步，

在弹出的窗口中填写项目名称，点击完成

各文件的作用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8yfBqnDs-1631541981993)(https://z3.ax1x.com/2021/04/21/cbX4rq.png)]

Conttroller.class 控制器

Main.class 主类

sample.fxml UI界面

设计图形界面

用SceneBuilder打开文件

在sample.fxml文件上右击、选择”在SceneBuilder中打开“

拖动组件设计界面

此时运行主类便可以看到弹窗啦

小Tip:Main类中给定的窗口若太小，可以删除给定大小

primaryStage.setScene(new Scene(root),100,200);
//改为
primaryStage.setScene(new Scene(root));

给组件添加id

依次给所需要的组件添加id

给定Controller

回到IDEA，打开sample.fxml文件，并在TabPane标签内添加如下代码

fx:controller="sample.Controller"

在控制器类中添加组件

    @FXML
    private TextField id;
    @FXML
    private Button btn;
    @FXML
    private PasswordField pwd;

添加事件

添加On Action事件

在SceneBuilder中选择对应的组件 在On Action中添加一个事件

写出具体方法

Controller类中写出同名的函数并测试

    public void Login(ActionEvent actionEvent) {
        if(this.id.getText().toString().equals("123")&& this.pwd.getText().toString().equals("123")){
            //如果输入的id和密码都为"123"
            Alert alert=new Alert(Alert.AlertType.CONFIRMATION);//新建一个弹窗
            alert.setTitle("TemuulenJ");
            alert.setHeaderText("登录成功！");
            alert.show();//显示弹窗
        }
        else{
            Alert alert=new Alert(Alert.AlertType.ERROR);
            alert.setTitle("TemuulenJ");
            alert.setHeaderText("登录失败");
            alert.setContentText("用户名与密码不匹配");
            alert.show();
        }
    }

运行结果

主窗口

账号密码正确

账号密码错误

源代码

sample/Controller.class

package sample;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;

import java.awt.*;

public class Controller {
    @FXML
    private TextField id;
    @FXML
    private Button btn;
    @FXML
    private PasswordField pwd;

    public void Login(ActionEvent actionEvent) {
        if(this.id.getText().toString().equals("123")&& this.pwd.getText().toString().equals("123")){
            Alert alert=new Alert(Alert.AlertType.CONFIRMATION);
            alert.setTitle("TemuulenJ");
            alert.setHeaderText("登录成功！");
            alert.show();
        }
        else{
            Alert alert=new Alert(Alert.AlertType.ERROR);
            alert.setTitle("TemuulenJ");
            alert.setHeaderText("登录失败");
            alert.setContentText("用户名与密码不匹配");
            alert.show();
        }
    }
}

sample/Main.class

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("TemuulenJ");
        primaryStage.setScene(new Scene(root));
        primaryStage.getIcons().add(new Image("img/profile.png"));
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

sample/sample.fxml

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

<?import javafx.scene.shape.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>

<TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
  <tabs>
    <Tab text="登录">
      <content>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
               <children>
                  <ImageView fitHeight="104.0" fitWidth="118.0" layoutX="257.0" layoutY="58.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../img/profile.png" />
                     </image>
                  </ImageView>
                  <ImageView fitHeight="31.0" fitWidth="31.0" layoutX="183.0" layoutY="177.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../img/id_logo.png" />
                     </image>
                  </ImageView>
                  <ImageView fitHeight="50.0" fitWidth="50.0" layoutX="172.0" layoutY="214.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../img/pwd_logo.png" />
                     </image>
                  </ImageView>
                  <TextField fx:id="id" layoutX="224.0" layoutY="177.0" style="-fx-background-color: rgba(0,0,0,0); -fx-border-color: #1296db; -fx-border-radius: 50;" />
                  <PasswordField id="pwd" fx:id="pwd" layoutX="224.0" layoutY="224.0" onAction="#Login" style="-fx-background-color: rgba(0,0,0,0); -fx-border-color: #1296db; -fx-border-radius: 50;" />
                  <Button id="btn" fx:id="btn" layoutX="243.0" layoutY="273.0" mnemonicParsing="false" onAction="#Login" prefHeight="30.0" prefWidth="166.0" style="-fx-background-color: #1296db; -fx-background-radius: 50; -fx-border-radius: 50;" text="登    录" textFill="WHITE" wrapText="true" />
               </children></AnchorPane>
      </content>
    </Tab>
  </tabs>
</TabPane>