JavaFX布局以及控件的运用

目标
丰富页面设计
更多控件与使用
文件上传的实现
概述
从本节课开始,我们来制作一个 商城管理 系统,在本系统中,我们将会学习到 多元化的控件 , 多元化的布局 以及 多元化的事件应用
这节课我们的任务便是 新增窗口 界面
数据库搭建
数据库脚本已经提供👧
类别表
商品表
关系图
实体类
页面解析
public class Category {
  private Integer id;
  private String name;
}
public class Goods {
  private Integer id;
  private String name;
  private Integer categoryId;
  private Double price;
  private String description;
  private String cover;
  private Date createTime;
}
该界面的布局是非常典型的网格布局,我们可以拆分如下
该元素的控件则比我们之前的控件稍微多一点
涉及控件 Label 文本标签 , TextField 输入框 , ChoiceBox 下拉框 , Slider 滑动条 , TextArea 文本域 , FileChooser 文件选择
器 , Button 按钮 , DatePicker 日期选择器
布局定义
标签定义
还可以进行自定义,例如设置 Label 的图标
//主体布局
GridPane gridPane = new GridPane();
Label name = new Label("商品名称");
Label 类的构造可以在设置文本值的时候在设置一个 Node 类型,我们如果设置图标可以选择放入一个 ImageView
图标都在放在素材中,请放在 D: 下,或者修改一下代码中的盘符与位置
构建 ImageView 并设置图标
结合 Label 使用
定义需要的所有标签
控件定义
商品名称
商品类别 这点区别于之前的下拉框使用,此处需要在这里指定类型,便于后续的取值👼
商品价格 类似拼多多的小商城,我们可以使用滑动条规范价格,不至于让价格太高
也可以让滑动条出现刻度
public Label(String, Node) {}
new ImageView(new Image("file:D:\\icons\\goods_insert\\name.png"));
此处前面的 file: 指的是读取当前磁盘中的文件所对应的协议
Label name = new Label("商品名称", new ImageView(new Image("file:...")));
//标签搭建【为了便于理解 此处省略的路径为 D:\\icons\\goods_insert 】
Label name = new Label("商品名称", new ImageView(new Image("file:...