数据库搭建

编辑页面解析

控件定义

布局制作

功能制作

类别下拉框绑定

文件选择功能

按钮功能设置

目标丰富页面设计更多控件与使用文件上传的实现

多元化的控件 , 多元化的布局以及多元化的事件应用这里的任务便是新增窗口界面

数据库搭建

类别表

商品表

实体类

页面解析

该界面的布局是非常典型的网格布局,我们可以拆分如下

该元素的控件则比我们之前的控件稍微多一点

涉及控件 Label 文本标签 , TextField 输入框 , ChoiceBox 下拉框 , Slider 滑动条 , TextArea 文本域 , FileChooser 文件选择器 , Button 按钮 , DatePicker 日期选择器

布局定义

//主体布局

GridPane gridPane = new GridPane();

标签定义

Label name = new Label("商品名称");

还可以进行自定义,例如设置 Label 的图标

public Label(String, Node) {}

Label 类的构造可以在设置文本值的时候在设置一个 Node 类型,我们如果设置图标可以选择放入一个 ImageView

图标没有到百度阿里icon里面下载

构建 ImageView 并设置图标

new ImageView(new Image("file:D:\\icons\\goods_insert\\name.png"));

此处前面的 file: 指的是读取当前磁盘中的文件所对应的协议

后面是文件所在的位置和name名字.png

结合 Label 使用

Label name = new Label("商品名称", new ImageView(new Image("file:...")));

定义需要的所有标签

控件定义

商品名称

//商品名称

TextField nameCtl = new TextField();

商品类别这点区别于之前的下拉框使用,此处需要在这里指定类型,便于后续的取值

ChoiceBox 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的间隙,稍微美观一点

fileCtl.setEditable(false);

//设置输入框禁用,该框的内容只能由文件选择器填入 //日期设置

gridPane.add(dateCtl, 1, 5);

//按钮设置

gridPane.add(yes, 0, 6);

gridPane.add(no, 1, 6);

舞台Stage的设置

primaryStage.setScene(new Scene(gridPane, 500, 400));

primaryStage.setTitle("商品新增");

primaryStage.show();

功能制作

类别下拉框绑定

编写 Dao 层方法用于获取数据库中的类别数据

这里进行分类绑定的方法与之前我们进行分类绑定的方法不太一致。

之前我们绑定到下拉框中都是文本框的值,但是这这里,我们在绑定完成还需要再选中后获得被选中的类别的编号,我们可以直接选择将下拉框与 Category 类型绑定。

再看定义下拉框的时候的代码 ChoiceBox 一定要在这里指定清楚这个类型同时,因为显示在下拉框中的值是 Category 的 name 属性,所以还需要定义转换器

我们再上面为 ChoiceBox 设置好了类型,所以此处可以进行数据添加了,可以直接使用 List 的 addAll() 方法直接添加数据库中的数据集合

categoryCtl.getItems().addAll(categoryDao.list());

文件选择功能

大致流程如下：

点击选择封面按钮,打开文件选择器

选择对应的封面图片将图片的路径放入输入框中

给按钮添加点击事件,并打开文件选择器

choiseBtn.setOnAction(a -> {

//此处调用选择器的 showOpenDialog 打开对话框

//方法会返回选中的文件

File file = fileChooser.showOpenDialog(primaryStage);

});

因为用户可能存在没选中的情况,需要进行判断

if (file != null) {

//当文件不为null 意味着用户选中了文件

//将文件的路径放入输入框中

fileCtl.setText(file.getAbsolutePath());

}

为了程序安全,还可以选择加上文件类型过滤常见图片的格式：.jpg .png

按钮功能设置

退出按钮

no.setOnAction(a -> {

primaryStage.close();

});

确认按钮

获取数据,封装 Goods 对象调用 Dao 层实现增加功能

Goods goods = new Goods();

获得商品名称

goods.setName(nameCtl.getText());

获得商品类别编号

因为是进行了对象绑定,通过获取下拉框中被选中的选项会直接拿到对应的 Category 对象,就可以获取对应的类别编号了

Category item = categoryCtl.getSelectionModel().getSelectedItem(); goods.setCategoryId(item.getId());

获取商品描述

goods.setDescription(desc.getText());

获取商品价格

goods.setPrice(sliderCtl.getValue());

获取商品封面

文件选择器会将路径放到对应的输入框中,只需要获取输入框的值就是对应了文件的路径

goods.setCover(fileCtl.getText());

获取商品创建时间

我们将会拿到一个 LocalDate 这是 Java8 中提供的时间类型之一,我们需要的是 java.sql.Date ,我们可以通过拿到对象的年月日属性并将这些属性赋值给 Date 对象

调用 Dao 层方法

int i = goodsDao.insert(goods);

if(i>0){

... 省略一万行代码

}else{

... 省略一万行代码

}

完整代码

JavaFX.控件讲解相关推荐

使用JavaFX控件
使用JavaFX2.0的控件 (李佳明译自 www.JavaFX.com,原文:Alla Redko/甲骨文高级技术专家) 关于本教程本教程覆盖了JavaFX API中内置的JavaFX UI控件. ...
javafx控件Button
Button是Control的一个子类,属于控件的一种基本使用方法创建一个按钮,传入一个字符串,即为按钮的标签 Button b=new Button ("name"); 也可 ...
【LabVIEW懒人系列教程-小白入门】1.2LabVIEW前面板控件讲解
上次课程作业编写:d=a+b+c 前面板创建4个控件:数值型输入控件:a,b,c:数值型显示控件d ctrl+e 切换到程序框图界面,添加2个 "+"算法,然后连线,a,b,c,d ...
Windows窗体学这一篇就够了(C#控件讲解)
目录一.Form窗体 1.1窗体的创建和删除 1.添加窗体 2.删除窗体 3.多窗体的使用 1.2.窗体属性 1.2.1更换窗体图标 1.2.2隐藏窗体的标题栏(FormBorderStyle属性) ...
JavaFX控件ID：设置Label文本内容代码示例
最终效果点击按钮后label文本会发生变化: 场景编辑设置label的ID:fx:id: 自动生成属性: 代码 pom <build><finalName>HelloJav ...
JAVAFX控件——TableView数据的导入和插入（数据库）
在JavaFx应用中对创建表格最重要的TableView, TableColumnh和TableCell这三个类. 你可以通过实现数据模型(data model) 和实现单元格工厂(cell fa ...
JavaFX 控件 ImageView
ImageView 支持格式: BMP GIF JPEG PNG //加载图片 //如果设置了 requestedXXX 尺寸, ImageView中设置 FitXXX 尺寸是基于requested ...
JavaFX入门（五）：使用CSS样式美化你的UI控件
CSS(层叠样式表,Cascading Style Sheets)原来是被用来在网页开发中表现HTML元素样式的一种文本标记语言.HTML用来展现内容,CSS被用来设计内容的样式,这样做的好处就是内容 ...
Android 图片控件ImageView
前言: 这篇博客聊一聊在Android下ImageView的使用,在此篇博客中, 会讲解到ImageView的一些属性的使用,以及ImageView展示图片的放大.缩小.旋转等操作. 最后再讲解一下A ...
使用JavaFX2.0的控件
关于本教程本教程覆盖了JavaFX API中内置的JavaFX UI控件. 本文包含以下章节: JavaFX的UI控件标签按钮单选按钮切换按钮复选框选择框文本框密码框滚动条滚动窗 ...

JavaFX.控件讲解

数据库搭建

页面解析

控件定义

布局制作

功能制作

类别下拉框绑定

文件选择功能

按钮功能设置

JavaFX.控件讲解相关推荐

最新文章

热门文章