【无标题】javafx =-05

该界面的布局是非常典型的网格布局,我们可以拆分如下
该元素的控件则比我们之前的控件稍微多一点
涉及控件 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:...\\name.png")));
Label category = new Label("商品类别", new ImageView(new Image("file:...\\category.png")));
Label price = new Label("商品价格", new ImageView(new Image("file:...\\price.png")));
Label desc = new Label("商品描述", new ImageView(new Image("file:...\\description.png")));
Label cover = new Label("商品封面", new ImageView(new Image("file:...\\cover.png")));
Label time = new Label("创建时间", new ImageView(new Image("file:...\\time.png")));
//商品名称
TextField nameCtl = new TextField();
ChoiceBox<Category> categoryCtl = new ChoiceBox();
Slider sliderCtl = new Slider(0, 100, 0);
Slider(最小值,最大值,当前值)
商品描述
也可以调整文本域的大小
商品封面 此处文件选择器需要按钮事件触发,所以我们选择了使用多个控件来拼接
商品创建事件
sliderCtl.setMajorTickUnit(8);//刻度间隙为9
sliderCtl.setMinorTickCount(2);//每次滑动为2
sliderCtl.setShowTickMarks(true);//出现刻度
sliderCtl.setShowTickLabels(true);//出现数字
TextArea areaCtl = new TextArea();
areaCtl.setMaxWidth(300);
areaCtl.setMaxHeight(100);
//文件选择
FileChooser fileChooser = new FileChooser();
Button choiseBtn = new Button("选择封面");
TextField fileCtl = new TextField();
HBox filePane = new HBox(choiseBtn, fileCtl);
//日期选择
DatePicker dateCtl = new DatePicker();
按钮
布局制作
完整代码
此处的【...】为 D:\\icons\\index
 
Button yes = new Button("确定", new ImageView(new Image("file:...\\yes.png")));
Button no = new Button("取消", new ImageView(new Image("file:...\\no.png")));
//网格居中
gridPane.setAlignment(Pos.CENTER);
gridPane.setHgap(10);
gridPane.setVgap(10);
//标签添加
gridPane.add(name, 0, 0);
gridPane.add(category, 0, 1);
gridPane.add(price, 0, 2);
gridPane.add(desc, 0, 3);
gridPane.add(cover, 0, 4);
gridPane.add(time, 0, 5);
//商品名称控件添加
gridPane.add(nameCtl, 1, 0);
//商品分类添加
gridPane.add(categoryCtl, 1, 1);
//商品价格 滑动条添加
gridPane.add(sliderCtl, 1, 2);
//商品描述 文本域设置
gridPane.add(areaCtl, 1, 3);
areaCtl.setMaxWidth(300);
areaCtl.setMaxHeight(100);
//文件选择设置
gridPane.add(filePane, 1, 4);
filePane.setSpacing(5); //设置HBox的间隙,稍微美观一点
最后不要忘记舞台Stage的设置
功能制作
类别下拉框绑定
编写 Dao 层方法用于获取数据库中的类别数据
这里进行分类绑定的方法与之前我们进行分类绑定的方法不太一致。
之前我们绑定到下拉框中都是文本框的值,但是这这里,我们在绑定完成还需要再选中后获得被选中的类别的编号,我们可以直接选
择将下拉框与 Category 类型绑定。
再看定义下拉框的时候的代码 ChoiceBox<Category> 一定要在这里指定清楚这个类型
同时,因为显示在下拉框中的值是 Category 的 name 属性,所以还需要定义转换器
我们再上面为 ChoiceBox 设置好了类型,所以此处可以进行数据添加了,可以直接使用 List 的 addAll() 方法直接添加数据库中
的数据集合
fileCtl.setEditable(false); //设置输入框禁用,该框的内容只能由文件选择器填入
//日期设置
gridPane.add(dateCtl, 1, 5);
//按钮设置
gridPane.add(yes, 0, 6);
gridPane.add(no, 1, 6);
primaryStage.setScene(new Scene(gridPane, 500, 400));
primaryStage.setTitle("商品新增");
primaryStage.show();
public List<Category> list() {
 ...
}
categoryCtl.setConverter(new StringConverter<Category>() {
  @Override
  public String toString(Category category) {
    return category.getName(); //此处表示显示的内容是Category对象的name属性
 }
  @Override
  public Category fromString(String s) {
    return null;
 }
});
categoryCtl.getItems().addAll(categoryDao.list());
文件选择功能
大致流程如下：
点击 选择封面 按钮,打开文件选择器
选择对应的封面图片
将图片的路径放入输入框中
给按钮添加点击事件,并打开文件选择器
因为用户可能存在没选中的情况,需要进行判断
为了程序安全,还可以选择加上文件类型过滤 常见图片的格式：.jpg .png
按钮功能设置
choiseBtn.setOnAction(a -> {
  //此处调用选择器的 showOpenDialog 打开对话框
  //方法会返回选中的文件
  File file = fileChooser.showOpenDialog(primaryStage);
});
if (file != null) {
  //当文件不为null 意味着用户选中了文件
  //将文件的路径放入输入框中
  fileCtl.setText(file.getAbsolutePath());
}
//定义文件后缀名过滤器
FileChooser.ExtensionFilter filter =
  new FileChooser.ExtensionFilter("image", new String[]{"*.jpg", "*.png"});
//为文件选择器添加下拉框
fileChooser.getExtensionFilters().add(filter);
退出按钮
确认按钮
获取数据,封装 Goods 对象
调用 Dao 层实现增加功能
获得商品名称
获得商品类别编号
因为是进行了对象绑定,通过获取下拉框中被选中的选项会直接拿到对应的 Category 对象,就可以获取对应的类别编号了
获取商品描述
获取商品价格
获取商品封面
文件选择器会将路径放到对应的输入框中,只需要获取输入框的值就是对应了文件的路径
获取商品创建时间
我们将会拿到一个 LocalDate 这是 Java8 中提供的时间类型之一,我们需要的是 java.sql.Date ,我们可以通过拿到对象的年月
日属性并将这些属性赋值给 Date 对象
no.setOnAction(a -> {
  primaryStage.close();
});
Goods goods = new Goods();
goods.setName(nameCtl.getText());
Category item = categoryCtl.getSelectionModel().getSelectedItem();
goods.setCategoryId(item.getId());
goods.setDescription(desc.getText());
goods.setPrice(sliderCtl.getValue());
goods.setCover(fileCtl.getText());
调用 Dao 层方法
完整代码
LocalDate date = dateCtl.getValue();
Date createTime = new Date(
  date.getYear() - 1900, //Date的年份从1900开始
  date.getMonthValue() - 1, //Date的月份从0开始
  date.getDayOfMonth()
);
goods.setCreateTime(createTime);
调用 Dao 层方法
完整代码
LocalDate date = dateCtl.getValue();
Date createTime = new Date(
  date.getYear() - 1900, //Date的年份从1900开始
  date.getMonthValue() - 1, //Date的月份从0开始
  date.getDayOfMonth()
);
goods.setCreateTime(createTime);
int i = goodsDao.insert(goods);
if(i>0){
 ... 省略一万行代码
}else{
 ... 省略一万行代码
}
这里需要同学们完成Alert提示🤶
yes.setOnAction(a -> {
  Goods goods = new Goods();
  goods.setName(nameCtl.getText());
  Category item = categoryCtl.getSelectionModel().getSelectedItem();
  if (item == null) return;
  goods.setCategoryId(item.getId());
  goods.setDescription(desc.getText());
  goods.setPrice(sliderCtl.getValue());
  goods.setCover(fileCtl.getText());
  LocalDate date = dateCtl.getValue();
  Date createTime = new Date(
    date.getYear() - 1900,
    date.getMonthValue() - 1,
    date.getDayOfMonth()
 );
  goods.setCreateTime(createTime);
  int i = goodsDao.insert(goods);
  System.out.println(i);