FX 首页搭建

首先,分为两个角色

老师 Teacher

public class Teacher {

private Integer id;

private String name;

private String password;

private String gender;

}

学生：student

public class Student {

private Integer id;

private String name;

private String password;

private String gender;

private String address;

private String hobby;

}

新建 MyLogin.java ,完成登录界面排版

完整代码

@Override

public void start(Stage primaryStage) throws Exception {

//新建布局

GridPane gridPane = new GridPane();

//设置居中方式

gridPane.setAlignment(Pos.CENTER);

//调整间隙

gridPane.setHgap(10);

gridPane.setVgap(10);

//新建文本标签：用户名

Label l1 = new Label("老师名称");

//新建输入框

TextField name = new TextField();

//新建文本标签：用户密码

Label l2 = new Label("老师密码");

//新建密码框

PasswordField pwd = new PasswordField();

//登录按钮的创建

Button login = new Button("登录");

//前往注册按钮的创建

Button goRegister = new Button("前往注册");

//添加控件进行位置绑定

gridPane.add(l1, 0, 0);

gridPane.add(name, 1, 0);

gridPane.add(l2, 0, 1);

gridPane.add(pwd, 1, 1);

gridPane.add(login, 0, 2);

gridPane.add(goRegister, 1, 2);

//生成场景并完成布局绑定,同时设定场景大小

Scene scene = new Scene(gridPane, 300, 200);

//主容器标题设置

primaryStage.setTitle("登录页面");

//给主容器绑定场景（让场景显示出来）

primaryStage.setScene(scene);

//不要忘了这一行,让主容器显示

primaryStage.show();

登录按钮的事件设置

使用 setOnAction 完成事件设置

})

完成数据取值操作

String username = name.getText();

String password = pwd.getText();

Alert进阶

可以可以通过给构造函数中传入多个按钮来自定义弹框

Alert alert = new Alert(Alert.AlertType.ERROR, "登录失败,请重试",

ButtonType.OK,ButtonType.NO,ButtonType.CLOSE);

当调用了弹框的 showAndWait() 方法后,我们会接收到弹框被调用的按钮,

Optional type = alert.showAndWait();

我们只要做判断,就可以知道选择的按钮了,然后在执行相关的操作

if(type.get()==ButtonType.OK){

}

if(type.get()==ButtonType.NO){

}

if(type.get()==ButtonType.CLOSE){

}

注册页面搭建

使用网格布局搭建

以下完整代码

@Override public void start(Stage primaryStage) throws IOException {

//新建布局

GridPane gridPane = new GridPane();

//设置居中方式

gridPane.setAlignment(Pos.CENTER);

//调整间隙

gridPane.setHgap(20);

gridPane.setVgap(20);

//文本标签

Label l1 = new Label("老师名称");

Label l2 = new Label("老师密码");

Label l3 = new Label("老师性别");

//输入框

TextField f1 = new TextField();

PasswordField f2 = new PasswordField();

//性别

ToggleGroup group = new ToggleGroup();

RadioButton men = new RadioButton("🚹");

RadioButton miss = new RadioButton("🚺");

men.setToggleGroup(group);

miss.setToggleGroup(group);

men.setSelected(true);

HBox h1 = new HBox();

h1.getChildren().addAll(men, miss);

//登录按钮的创建

Button register = new Button("注册");

Button cancel = new Button("取消");

//用户名 gridPane.add(l1, 0, 0);

gridPane.add(f1, 1, 0);

//用户密码

gridPane.add(l2, 0, 1);

gridPane.add(f2, 1, 1);

//用户性别

gridPane.add(l3, 0, 2);

gridPane.add(h1, 1, 2);

//按钮

gridPane.add(register, 0, 3);

gridPane.add(cancel, 1, 3);

//生成场景并完成布局绑定,同时设定场景大小

Scene scene = new Scene(gridPane, 400, 300);

//主容器标题设置

primaryStage.setTitle("网格登录");

//给主容器绑定场景（让场景显示出来）

primaryStage.setScene(scene);

//不要忘了这一行,让主容器显示

primaryStage.show(); }

切换与新开
现在我们需要给前往登录按钮设置点击事件,目的是点击它能够打开注册界面,所以我们需要了解如何进行页面新开与跳转场景切换根据之前的介绍,FX的构成部分分为 Stage 舞台Scene 场景,可以理解为舞台上的节目,一个舞台可以呈现多个节目,对于场景的切换,就是将舞台的场景进行重新设置 setScene(Scene) 就可以完成了

FlowPane flow01=new FlowPane();

Label l1 = new Label("我是场景一");

flow01.getChildren().add(l1);

Scene s1 = new Scene(flow01);

FlowPane flow02=new FlowPane();

Label l2 = new Label("我是场景二");

flow02.getChildren().add(l2);

Scene s2 = new Scene(flow02);

给场景一放置一个按钮控件,当我们点击按钮的时候,将舞台场景切换为场景二

Button btn=new Button("切换场景二");

btn.setOnAction(a->{ primaryStage.setScene(s2);

});

flow01.getChildren().add(btn);

设置场景一为默认显示

primaryStage.setScene(s1);

下面是完整代码