JavaFX.主页制作

最新推荐文章于 2024-06-02 12:37:17 发布

笑否

最新推荐文章于 2024-06-02 12:37:17 发布

阅读量338

点赞数

文章标签： java eclipse

本文链接：https://blog.csdn.net/weixin_70773268/article/details/125431658

版权

目标

工具栏的使用

更多布局面板的使用

自定义复杂布局

完成商城的首页数据展示功能,效果图如下

舞台Stage设置

给舞台设置上图标

primaryStage.getIcons().add(new Image("file:D:\\icons\\index\\slogan.png"));

完整代码

primaryStage.setTitle("天天商城"); primaryStage.setResizable(false); primaryStage.setScene(new Scene(borderPane, 500, 350)); primaryStage.getIcons().add(new Image("file:D:\\icons\\index\\slogan.png")); primaryStage.show();

整体布局与工具栏

主体框架分析如上,我们可以采用 BorderPane

//主页设置

BorderPane borderPane = new BorderPane();

对于工具栏,FX也提供了对应的控件 ToolBar 工具栏 , MenuButton 菜单按钮

工具栏中可以直接放入组件也就是说 Button , ChoiseBox 等控件都可以直接放

这里我们选择使用菜单按钮是因为该按钮可以绑定菜单项从而实现下拉功能

//菜单栏

MenuButton b1 = new MenuButton("商品管理");

//菜单 b1 的菜单项

MenuItem t1 = new MenuItem("商品新增");

MenuItem t2 = new MenuItem("商品删除");

MenuButton b2 = new MenuButton("类别管理");

//菜单 b2 的菜单项

MenuItem t3 = new MenuItem("类别新增");

MenuItem t4 = new MenuItem("类别删除");

//创建工具栏并对菜单进行绑定

ToolBar barCtl = new ToolBar(b1, b2);

将菜单与菜单项进行绑定

b1.getItems().add(t1);

b1.getItems().add(t2);

b2.getItems().add(t3);

b2.getItems().add(t4);

将工具栏放入布局的上方

borderPane.setTop(barCtl);

主体框架设置

观察可以发现主体部分也可以采取边框布局设置,不过在此处,我们选择换一个布局来实现它 SplitPane 分割面板

与边框布局不同,这个布局的方向只能是水平的或者是垂直的,可以放入多个控件或者布局,会为每个控件生成一个分割条,我们可以通过拉动他来改变控件或者布局占据的空间大小

大致情况如下,此处为水平的分割面板

布局代码如下

//分割面板

SplitPane splitPane = new SplitPane();

我们使用分割面板将页面分为上下两块

上：商品搜索控件,且全部水平排列,可以使用 HBox

下：商品数据显示区域,因为商品数据比较多,页面存放不下这么多数据,需要该容器为滚动面板 ScrollPane ,在内容溢出的情况下会自动出现滚动条。其内部的商品条目都是垂直排列,可以使用 VBOX

布局代码

VBox vBox = new VBox();

ScrollPane scrollPane = new ScrollPane(vBox);

主体部分代码

//分割面板

SplitPane splitPane = new SplitPane();

//搜索部分

HBox hBox = new HBox();

//内容显示部分

VBox vBox = new VBox();

ScrollPane scrollPane = new ScrollPane(vBox);

主框架完整代码

//工具栏

borderPane.setTop(barCtl);

//分割面板

borderPane.setCenter(splitPane);

//设置搜索区域的间隙为5

hBox.setSpacing(5);

//设置搜索区域的整体控件居中

hBox.setAlignment(Pos.CENTER);

//分割面板设置

splitPane.getItems().addAll(hBox, scrollPane);

//此处是设置分割线的为值 (第几根分割线,占内容大小比例)

splitPane.setDividerPosition(0, 0.1);

//分割面板默认是水平分排列需要改为垂直排列 splitPane.setOrientation(Orientation.VERTICAL);

搜索区域

Label l1 = new Label("🔍");

ChoiceBox cateCtl = new ChoiceBox();

ChoiceBoxorderCtl = new ChoiceBox();

TextField nameCtl = new TextField();

第一个下拉框存放的是商品分类,所以我们绑定的类型是 Category ,并需要将数据库数据查询并进行绑定

注意：数据库中是没有全部这个分类数据的,该数据显示在这里是为了方便搜索,同时该数据是由手动添加的

//查询数据库分类数据

List cateList = categoryDao.list();

//手动添加分类,并设置id为-1,到时候只要判断id是否为-1就能知道用户是否选了全部 cateList.add(0, new Category(-1, "全部"));

//数据绑定

cateCtl.getItems().addAll(cateList);

//必须配置转换器否则数据无法识别

cateCtl.setConverter(new StringConverter<>() {

@Override

public String toString(Category category) {

return category.getName();

}

@Override

public Category fromString(String s) {

return null; }

});

//设置默认选中第0个选项

cateCtl.setValue(cateCtl.getItems().get(0));

对于排序下拉框而言,我们可以直接绑定 String 的值,但是取值的时候需要依次做判断,比较繁琐,我们九可以选择对象绑定的写法, 为该选项生成对应的对象类型,取值的操作就会简化很多

public class Option {

//这个值用于显示

private String property;

//这个值放的是列名+排序规则(升序,降序)

//如果做查询只要拿到该值然后做sql拼接就行了

private String value;

}

进行数据绑定该数据由我们手动定义,数据库中没有对应数据

orderCtl.getItems().addAll(

new Option("全部", ""),

new Option("时间升序", " create_time asc"),

new Option("时间降序", " create_time desc"),

new Option("价格升序", " price asc"),

new Option("价格降序", " price desc")

);

orderCtl.setConverter(new StringConverter<>() {

@Override

public String toString(Option option) {

return option.getProperty();

}

@Override

public Option fromString(String s) {

return null;

}

});

orderCtl.setValue(orderCtl.getItems().get(0));

商品显示区域

该区域的主要难点是自定义布局：

多种布局嵌套整个大区域是一个滚动面板,在滚动面板中存在一个 VBox 垂直面板,这个我们在上面分析了那么在这里,还需要完成的则是这一块的布局:

对于每个商品的显示,我选择使用了 TitledPane 标题面板 ,这个面板的特点：

1：面板具备对应的标题,可以用来放商品的名字

2：具备折叠功能,可以让页面看上去不是那么拥挤,点开折叠则可以查看商品内容与操作基本使用

//定义标题面板

TitledPane titlePane = new TitledPane();

//设置面板标题

titlePane.setText("xx");

//设置面板是否展开

titlePane.setExpanded(false);

//设置面板是否可以折叠

titlePane.setCollapsible(true);

对于每个标题面板,其中的商品内容也是采用了多个控件与布局衔接的方式做出来的

大致思路如下：

构建标题面板 TitledPane ,面板中放入一个边框布局 BorderPane

边框布局的左边放一个图片控件 ImageView ,右边放一个垂直布局 VBox

向 VBox 布局中依次放入多个标签 Label ,商品价格,商品描述,商品创建时间

向 VBox 布局放入 HBox 布局,并向 HBox 布局中放入两个按钮

完整代码

//生成商品展示内容

//获得数据库商品数据

goodsDao.list(name, sql).forEach(g -> {

//标题面板设置

TitledPane titlePane = new TitledPane();

titlePane.setText(g.getName());

titlePane.setExpanded(false);

titlePane.setCollapsible(true);

//此处需要设置为当前Stage的宽度稍小一点

//不然占不满一行

titlePane.setPrefWidth(500 - 20);

BorderPane borderPane = new BorderPane();

//设置标题面板的内容

titlePane.setContent(borderPane);

//生成图片控件

//根据商品的cover属性设置图片

//并设置空间大小

Image image = new Image("file:" + g.getCover());

ImageView imageView = new ImageView(image);

imageView.setFitWidth(80);

imageView.setFitHeight(80);

borderPane.setLeft(imageView);

//标签设置

Label l1 = new Label("商品价格: " + g.getPrice().toString());

Label l2 = new Label("商品描述: " + g.getDescription().toString());

Label l3 = new Label("商品创建时间: " + g.getCreateTime().toString());

//HBox区域

Button buy = new Button("购买");

Button car = new Button("添加购物车");

HBox h1 = new HBox(buy, car); h1.setSpacing(3);

VBox v1 = new VBox(l1, l2, l3, h1); v1.setSpacing(5);

borderPane.setCenter(v1);

//【这个地方注意了是使用getChildren()来获得控件集合】 vBox.getChildren().add(titlePane); });