• JavaFX入门和网格布局面板的使用，Dao层交互，舞台与场景切换以及其他控件的使用

    网格布局
    将整个面板划分为若干个格子 , 每个格子的大小是一样的 , 每个格子中可以放置一个控件（布局） , 类似于表格的方式。在网格布局
    中放入控件的时候 , 还需要指定位置。 
    GridPane gridPane = new GridPane();
    我们将要排出这个布局 , 也就是登陆页面的优化版本
    位置原理讲解
    以网格布局的思维来拆分该布局 , 可以分出一个 2*3 的网格

     

    我们可以给格子从上到下,从左到右依次编号,分别是：

     

    得出结论：
    位置 a,b 其中 a 向右移动需要变大 , 向下移动则 b 需要变大
    且 a,b 都从 0 开始增长
    代码讲解 
    1. //新建文本标签：用户名
    2. Label l1 = new Label("用户名");
    3. //新建输入框
    4. TextField name = new TextField("请输入用户名");
    5. //新建文本标签：用户密码
    6. Label l2 = new Label("用户密码");
    7. //新建密码框
    8. PasswordField pwd = new PasswordField();
    9. //登录按钮的创建
    10. Button login = new Button("登录");
    11. //指定位置：按照之前的位置图进行对比并完成位置推理
    12. gridPane.add(l1, 0, 0);
    13. gridPane.add(name, 1, 0);
    14. gridPane.add(l2, 0, 1);
    15. gridPane.add(pwd, 1, 1);
    16. gridPane.add(login, 0, 2);

     网格布局中的网格是默认居左上的

    可以通过代码调整其网格位置

    1. //设置居中方式
    2. gridPane.setAlignment(Pos.CENTER);

     Pos类中定义了一些居中方式

    1. public enum Pos {
    2. TOP_LEFT 左上
    3. TOP_CENTER 居上
    4. TOP_RIGHT 右上
    5. CENTER_LEFT 居左
    6. CENTER 居中
    7. CENTER_RIGHT 居右
    8. BOTTOM_LEFT 左下
    9. BOTTOM_CENTER 居下
    10. BOTTOM_RIGHT 右下
    11. }

    可以观察到每个控件之间挨得太近了,可以使用代码将距离调整开

     

    1. gridPane.setHgap(10);//两个格子之间的水平距离
    2. gridPane.setVgap(10);//两个各自之间的垂直距离

     

     

     完整代码

    1. @Override
    2. public void start(Stage primaryStage) throws IOException {
    3. //新建布局
    4. GridPane gridPane = new GridPane();
    5. //设置居中方式
    6. gridPane.setAlignment(Pos.CENTER);
    7. //调整间隙
    8. gridPane.setHgap(10);
    9. gridPane.setVgap(10);
    10. //新建文本标签：用户名
    11. Label l1 = new Label("用户名");
    12. //新建输入框
    13. TextField name = new TextField("请输入用户名");
    14. //新建文本标签：用户密码
    15. Label l2 = new Label("用户密码");
    16. //新建密码框
    17. PasswordField pwd = new PasswordField();
    18. //登录按钮的创建
    19. Button login = new Button("登录");
    20. //添加控件进行位置绑定
    21. gridPane.add(l1, 0, 0);
    22. 注册页面案例制作
    23. 分析布局
    24. 分析控件
    25. 用户名 输入框 TextField
    26. 用户密码 密码框 PasswordField
    27. 用户性别 单选框 RadioButton
    28. 用户地址 下拉框 ChoiceBox
    29. 用户爱好 复选框 CheckBox
    30. 注册,取消 按钮 Button
    31. 控件讲解
    32. 单选框的使用
    33. 构建单选框
    34. 这样的单选框是无法实现单选功能的,只有当单选按钮在一组的时候才能完成单选功能
    35. gridPane.add(name, 1, 0);
    36. gridPane.add(l2, 0, 1);
    37. gridPane.add(pwd, 1, 1);
    38. gridPane.add(login, 0, 2);
    39. //生成场景并完成布局绑定,同时设定场景大小
    40. Scene scene = new Scene(gridPane, 300, 200);
    41. //主容器标题设置
    42. primaryStage.setTitle("网格登录");
    43. //给主容器绑定场景（让场景显示出来）
    44. primaryStage.setScene(scene);
    45. //不要忘了这一行,让主容器显示
    46. primaryStage.show();
    47. }
    注册页面案例制作
    分析布局
    分析控件
    用户名 输入框 TextField
    用户密码 密码框 PasswordField
    用户性别 单选框 RadioButton
    用户地址 下拉框 ChoiceBox
    用户爱好 复选框 CheckBox
    注册 , 取消 按钮 Button
    控件讲解
    单选框的使用
    构建单选框 
    1. RadioButton men = new RadioButton("图标");
    2. RadioButton miss = new RadioButton("图标");
    这样的单选框是无法实现单选功能的 , 只有当单选按钮在一组的时候才能完成单选功能 
    ToggleGroup group = new ToggleGroup();//构建单选按钮组
    设置两个按钮为一组 
    1. RadioButton men = new RadioButton("图标");
    2. RadioButton miss = new RadioButton("图标");
    3. ToggleGroup group = new ToggleGroup();
    4. //实现单选功能
    5. men.setToggleGroup(group);
    6. miss.setToggleGroup(group);

     完整代码 

    1. @Override
    2. public void start(Stage primaryStage) throws Exception {
    3. FlowPane flowPane = new FlowPane();
    4. ToggleGroup group = new ToggleGroup();
    5. RadioButton men = new RadioButton("图标");
    6. RadioButton miss = new RadioButton("图标");
    7. men.setToggleGroup(group);
    8. miss.setToggleGroup(group);
    9. flowPane.getChildren().addAll(men, miss);
    10. Scene scene = new Scene(flowPane, 300, 100);
    11. primaryStage.setScene(scene);
    12. primaryStage.show();
    13. }
    下拉框的使用 
    ChoiceBox choiceBox = new ChoiceBox();
    下拉框的选项是一个 ObservableList , 所以我们是无法直接向其中添加文本作为下拉框选项 , 需要进行代码改造
    1. 将文本内容放到 List 集合中
    2. 将 List 集合转换成一个 ObservableList
    3. 通过构造方法或者是 setItems 方法给下拉框设置选项 
    1. //定义下拉框内容集合
    2. List<String> items = Arrays.asList("湖南省", "四川省", "湖北省");
    3. //转换成下拉框需要的数据集合
    4. ObservableList<String> items = FXCollections.observableList(list);
    5. //通过构造方法设置选项
    6. ChoiceBox choiceBox = new ChoiceBox(items);

    因为 ObservableList 也是一个List集合,我们也可以直接调用 add 方法为其添加选项 

    1. ChoiceBox choiceBox = new ChoiceBox();
    2. choiceBox.getItems().add("湖南省");
    3. choiceBox.getItems().add("四川省");
    4. choiceBox.getItems().add("湖北省");

     重点：我们还可以给下拉框对象设置泛型，从而可以实现超简易写法

    ChoiceBox<String> choiceBox = new ChoiceBox<String>();
    注意， getItems() 方法得到的是一个 ObservableList ，我们讲解过的 List 方法它也都能使用 
    choiceBox.getItems().addAll("湖南省","四川省","湖北省")
    运行之后可以观察到下拉框中默认是没有选中值的 , 可以通过方法设置其下拉框默认选中 
    choiceBox.setValue("湖南省");

    也可容易通过方法来获得下拉框中被选中的选项与选项下标

    1. //被选中选项的下标
    2. int selectedIndex = choiceBox.getSelectionModel().getSelectedIndex();
    3. //被选中的选项
    4. String selectedItem = choiceBox.getSelectionModel().getSelectedItem()

     还可以通过 getValue() 来获得下拉框选中的值

    String value = choiceBox.getValue();
    完整代码 
    1. @Override
    2. public void start(Stage primaryStage) throws Exception {
    3. FlowPane flowPane = new FlowPane();
    4. ChoiceBox<String> choiceBox = new ChoiceBox<String>();
    5. choiceBox.getItems().addAll("湖南省","四川省","湖北省");
    6. choiceBox.setValue("湖南省");
    7. flowPane.getChildren().add(choiceBox);
    8. Scene scene = new Scene(flowPane, 300, 100);
    9. primaryStage.setScene(scene);
    10. primaryStage.show();
    11. }
    复选框的使用 
    CheckBox checkBox = new CheckBox("打篮球");
    对于复选框和单选框,都可以通过 setSelected(boolean) 来设置选中状态,通过 isSelected() 来获取选中状态 
    1. CheckBox c1 = new CheckBox("打篮球");
    2. CheckBox c2 = new CheckBox("打游戏");
    3. CheckBox c3 = new CheckBox("打豆豆");

    完整代码

    1. @Override
    2. public void start(Stage primaryStage) throws Exception {
    3. FlowPane flowPane = new FlowPane();
    4. CheckBox c1 = new CheckBox("打篮球");
    5. CheckBox c2 = new CheckBox("打游戏");
    6. CheckBox c3 = new CheckBox("打豆豆");
    7. flowPane.getChildren().addAll(c1, c2, c3);
    8. Scene scene = new Scene(flowPane, 300, 100);
    9. primaryStage.setScene(scene);
    10. primaryStage.show();
    11. }

    页面制作
    布局设置 
    1. //新建布局
    2. GridPane gridPane = new GridPane();
    3. //设置居中方式
    4. gridPane.setAlignment(Pos.CENTER);
    5. //调整间隙
    6. gridPane.setHgap(10);
    7. gridPane.setVgap(10);
    文本控件设置 
    1. //文本标签
    2. Label l1 = new Label("用户名");
    3. Label l2 = new Label("用户密码");
    4. Label l3 = new Label("用户性别");
    5. Label l4 = new Label("用户地址");
    6. Label l5 = new Label("用户爱好");
    输入框控件设置 
    1. TextField f1 = new TextField();//用户名
    2. PasswordField f2 = new PasswordField();//用户密码
    单选框设置 
    1. ToggleGroup group = new ToggleGroup();//按钮组
    2. RadioButton men = new RadioButton("图标");//男
    3. RadioButton miss = new RadioButton("图标");//女
    4. men.setToggleGroup(group);//添加到按钮组,实现单选
    5. miss.setToggleGroup(group);//添加到按钮组,实现单选
    6. men.setSelected(true);//设置默认选中男,防止用户不选的情况
    因为按钮的个数不一致 , 导致使用网格布局的时候会出现计算位置比较麻烦的情况 , 我们可以这么做：将多个控件放到一个布局中 ,
    再把布局对象当成组件放到对应的网格中
    这里我们可以采用 流式布局 , 也可以采用 HBox 布局： 在这个布局中 , 控件都显示为 一行 
    1. HBox h1 = new HBox();
    2. h1.getChildren().addAll(men, miss);
    下拉框设置 
    1. //构建选项集合
    2. List<String> list = Arrays.asList("湖南省", "四川省", "湖北省");
    3. //生成并设置下拉框选项
    4. ChoiceBox<String> choiceBox = new ChoiceBox<String>(items);
    5. //这里替换成数据库的集合便可以完成数据库值的显示
    6. choiceBox.addAll(list);
    7. //设置下拉框默认值
    8. choiceBox.setValue(list.get(0))
    复选框设置 
    1. CheckBox c1 = new CheckBox("打篮球");
    2. CheckBox c2 = new CheckBox("打游戏");
    3. CheckBox c3 = new CheckBox("打豆豆");
    可以选择和单选框一样的做法 
    1. HBoxh2=newHBox();
    2. h2.getChildren().addAll(c1,c2,c3);
    按钮设置 
    1. Buttonregister=newButton("注册");
    2. Buttoncancel=newButton("取消");
    控件与网格绑定 
    1. //用户名
    2. gridPane.add(l1,0,0);
    3. gridPane.add(f1,1,0);
    4. //用户密码
    5. gridPane.add(l2,0,1);
    6. gridPane.add(f2,1,1);
    7. //用户性别
    8. gridPane.add(l3,0,2);
    9. gridPane.add(h1,1,2);
    10. //用户地址
    11. gridPane.add(l4,0,3);
    12. gridPane.add(choiceBox,1,3);//用户爱好
    13. gridPane.add(l5,0,4);
    14. gridPane.add(h2,1,4);
    15. //按钮
    16. gridPane.add(register,0,5);
    17. gridPane.add(cancel,1,5);

    一定要注意上面的单选框和复选框是放的HBox布局对象,这两个布局对象中已经放了相应的控件了

     完整代码

    1. @Override
    2. publicvoidstart(StageprimaryStage)throwsIOException{
    3.   //新建布局
    4.   GridPanegridPane=newGridPane();  //设置居中方式
    5.   gridPane.setAlignment(Pos.CENTER);  //调整间隙
    6.   gridPane.setHgap(10);
    7.   gridPane.setVgap(10);
    8.  
    9.  
    10.   //文本标签
    11.   Labell1=newLabel("用户名");
    12.   Labell2=newLabel("用户密码");  
    13.   Labell3=newLabel("用户性别");  
    14.   Labell4=newLabel("用户地址");  
    15.   Labell5=newLabel("用户爱好");
    16.  
    17.   //输入框
    18.   TextFieldf1=newTextField();
    19.   PasswordFieldf2=newPasswordField();
    20.  
    21.   //性别
    22.   ToggleGroupgroup=newToggleGroup();
    23.   RadioButtonmen=newRadioButton("图标");
    24.   RadioButtonmiss=newRadioButton("图标");  men.setToggleGroup(group);
    25.   miss.setToggleGroup(group);
    26.   men.setSelected(true);
    27.   HBoxh1=newHBox();
    28.   h1.getChildren().addAll(men,miss);
    29.  
    30.   //构建选项集合
    31.   List<String>list=Arrays.asList("湖南省","四川省","湖北省");  //生成并设置下拉框选项
    32.   ChoiceBox<String>choiceBox=newChoiceBox<String>(items);
    33.   //这里替换成数据库的集合便可以完成数据库值的显示
    34.   choiceBox.addAll(list);
    35.   //设置下拉框默认值
    36.   choiceBox.setValue(list.get(0));
    37.  
    38.   //复选框
    39.   CheckBoxc1=newCheckBox("打篮球");
    40.   CheckBoxc2=newCheckBox("打游戏");  
    41.   CheckBoxc3=newCheckBox("打豆豆");  
    42.   HBoxh2=newHBox();
    43.   h2.getChildren().addAll(c1,c2,c3);
    44.  
    45.   //登录按钮的创建
    46.   Buttonregister=newButton("注册"); 
    47.   Buttoncancel=newButton("取消");
    48.  
    49.   //用户名
    50.   gridPane.add(l1,0,0);
    51.   gridPane.add(f1,1,0);
    52.   //用户密码
    53.   gridPane.add(l2,0,1);
    54.   gridPane.add(f2,1,1);
    55.   //用户性别
    56.   gridPane.add(l3,0,2);
    57.   gridPane.add(h1,1,2);
    58.   //用户地址
    59.   gridPane.add(l4,0,3);
    60.   gridPane.add(choiceBox,1,3);  //用户爱好
    61.   gridPane.add(l5,0,4);
    62.   gridPane.add(h2,1,4);
    63.   //按钮
    64.   gridPane.add(register,0,5);
    65.   gridPane.add(cancel,1,5);
    66.  
    67.   //生成场景并完成布局绑定,同时设定场景大小
    68.   Scenescene=newScene(gridPane,300,200);  //主容器标题设置
    69.   primaryStage.setTitle("网格登录");
    70.   //给主容器绑定场景（让场景显示出来）
    71.   primaryStage.setScene(scene);
    72.   //不要忘了这一行,让主容器显示
    73.   primaryStage.show();
    74. }
    按钮事件制作
    取消按钮 
    1. cancel.setOnAction(e->{
    2.   Platform.exit();//退出程序});
    注册按钮
    需要在这里获取到对应的值 , 然后带入数据库执行插入操作 , 对于绝大部门控件 , 都可以通过
    框则需要使用 getValue() 方法 , 而对于单选框与多选框 , 则需要对选中状态进行判断 
    1. //获得用户名
    2. Stringusername=f1.getText();//获得密码
    3. Stringpassword=f2.getText();
    1. //获得性别 men男单选框 miss女单选框
    2. Stringgender="男";//默认是选中了男,可以查看上面的代码
    3. if(miss.isSelected()){
    4.   gender="女";}
    5.  
    6. //通过拼接的方式获得所有的爱好每个爱好以,隔开
    7. StringJoinerjoiner=newStringJoiner(",");//对于复选框而言,如果该复选框被选中,则记录该值
    8. if(c1.isSelected()){
    9.   joiner.add(c1.getText())
    10. ;}
    11. if(c2.isSelected()){
    12.   joiner.add(c1.getText())
    13. ;}
    14. if(c3.isSelected()){
    15.   joiner.add(c1.getText());
    16. }
    17. Stringhobby=joiner.toString();
    可以使用正常的拼接 , 但是后面会多一个逗号,所以推荐使用StringJoiner该类会帮我们加上自定义的分隔符 
    1. //下拉框选中的值
    2. Stringaddress=choiceBox.getValue().toString();
    这里拿到的如果是 Object, 我们需要的地址是 String, 所以请记得调用 toString() 方法
    下面就可以去数据库访问了
  • 相关阅读:
    Python网络爬虫详细解读
    umi首屏加载速度优化
    springboot：时间格式化的5种方法（解决后端传给前端的时间格式转换问题）推荐使用第4和第5种！
    【Vite】development、mock和production不同环境下的配置
    JavaScript的使用
    【LeetCode】217. 存在重复元素
    数据结构-b树
    机器学习实战(01)-人工智能概要
    每天一个知识点-如何保证缓存一致性
    【教3妹学算法-每日1题】使数组中所有元素都等于零
  • 原文地址：https://blog.csdn.net/qq_73126462/article/details/134296945