java fx 首页搭建

本次会通过学生管理系统介绍

分为两个角色

老师

f39e80eaf91e4ce4a88e23497fc20a05.png

 学生

c0373b78a82549a49b9620636975624e.png

 在该系统中,主要完成老师管理学生的功能,主要完成以下操作

4251bf40459e46bca4c3abbcaf7f33a6.png

 登陆页面搭建

3175bec6848341c894afeb844f20de7d.png

eac1a53e5f15444f9bcafccd89514d20.png 

18ecbd698b6f44489dcdbc605f256842.png 

 登陆按钮设置

使用setOnAction 完成事件设置

3ef920087d3d41b1ad73ac9e40deedde.png

 完成数据取值操作

5b7c07e1ec8b403ca0ca8d4d7a144bc9.png

 实现数据库证逻辑

ca047a90310f413e88f4fdd1396cd4b5.png

 Alert进阶

7edd814626824391bb9e878f9fc38e6a.png

 第一个参数,弹框的类型,第一次课程中有分析,主要是图标的3f2551f662e54f118823f1e54740c8aa.png

 第二个参数,弹框的提示信息

2d60d56fb2104c0ea955e4e6d8904925.png

 第三个参数,一个按钮可变数组,用于弹框下方显示的按钮4b721d49f3184b19b5862d27af5ec991.png

 c4d78780a81c4290b1d40f4c9c1d22dc.png

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

f2045ec2c38f4b8694ccc10e78784792.png

 注册页面搭建

使用网格布局搭建页面

0ffecfe6e5f941bc8aba7f65bef01dd4.png

 完整代码

0efef06eb3e7441ab33930a8d97107a6.png

5fbfeff136464cd49b66ceb956e86330.png 

16bd937b7cdb4b2cbed6bef588713018.png 

e95ccf30824342a49a9d670d01f840cf.png 

 切换与新开

现在我们需要给 前往登录 按钮设置点击事件,目的是点击它能够打开注册界面,所以我们需要了解如何进行页面新开与跳转场景切换根据之前的介绍,FX的构成部分分为Stage

构建两个场景,分别放置不同的内容

4abb242fe9474efeaa7e538cb426f97f.png

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

775f2a1fe28243e7842560458b0cabbd.png

 设置场景一为默认显示

511e91b3fdfe4705bd556ce7a2d682bf.png

 默认视图

764268dbee8d4ee18b45c00894ac897c.png

 点击按钮后

6e1d7f8e903f4fc6a0feaf6f4bd3ec53.png

 完整代码

798df4559f6148848a34bee52680ce67.png

 新开窗口进行到这里,同学们应该对于这个 Stage 和 Scene 大概明白的差不多了一个 Stage 就是一个窗口, Scene 就是该窗口中显示的内容,如果需要新开一个窗口,那就意味存在多个舞台 Stage完成功能:点击按钮新开注册页面删除注册页面的 main 方法或者是里面的 launch() 方法,因为该方法是 JavaFX 程序的入口,项目必须有且只需要

1bf0001eb35e4d3fa97dd27f7e96b1ed.png

 编写登录页面 前往注册 点击事件

1c075b4d68d14f4e8463fed611169b40.png

9685b5c02abd4e51a88b63fec03531b1.png 

 此处会出来两个界面 ,如果需要关闭登录界面,可以调用 对应舞台的 close() 方法

a0beab5871ee4c698fb2c11e78e16380.png

 完整代码

bbf9be1eab5148aabd27de1f7b105073.png

 首页搭建

c0ebee0a811943bba783b71aa5c5284f.png

 结构对比

9df15e6a651c454eac60e1652cf84e9c.png

 搭建整体布局

2fc106ed63024578b389f058d0f705e1.png

 顶部

需要放入多个控件,且位于一行,可以选择 FlowPane 或者 HB

1c415f44b46f4c26bc86f553b20a2ca9.png

 底部

与顶部类似

b336054438b8403589fc798870376d84.png

 中部

b35aae5563f4497a847aed06db196bee.png

 这个部位是表格控件 TableView

be9eefc76b7c4e70bb99a8f5c20c5e50.png

8bf08417cd9a45bfb1da6fcb4376360c.png 

我们需要为表格设置列 TableColumn

a9bb2634fc1b4ab1877d31f0ff9b6b90.png

 将列绑定到表格控件中

791e8b3ebb104f4d975ae0b2687868b2.png

 我们从 Dao 层拿到学生集合之后,需要将该集合中的数据绑定到表格控件中,所以我们需要给该控件的列进行代码

c5bfe5fffb8244e891f7d1e23782247a.png

 其中, new PropertyValueFactory(xx) 这行代码会自动帮助我们从学生对象中取值对应的属性,我们只需要改变列的名称与对

应的属性值 xx 即可完成数据显示

 

数据绑定

3681550e45d84a78b2945f9e6c551780.png

 需要注意的点: 绑定数据的方式

未指定泛型时候,必须使用 FXCollections.observableList(list) 对普通的List进行转换才能被表格所识别

指定了泛型后,可以直接使用 addAll() 方法合并集合

899532d3977746e9b744f04c64e6e6e7.png

 完整代码

d2adbc98e96b4627bcfd64a3e64b09f1.png

3351439ea406473ca7057d9f37a2c56c.png 

2e2f51b618ec4b859a41b2fc3bd24035.png 

 强烈要求:在 TableView 后面指定遍历数据的类型,如 TableView<Student>

自定义列值处理器

此处定义在这里是为了进行拓展,可自行选择是否需要了解

自定义列

c7bbb25a1d3944a4bc20185e0315c29d.png

 自定义列处理器

75d91d192bf9413f90995f720600c3a9.png

f0f05434de0a485c9cba35afdf757fc5.png 

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值