Java开发桌面程序学习(二)————fxml布局与控件学习

JavaFx项目

新建完项目,我们的项目有三个文件
Java开发桌面程序学习(二)————fxml布局与控件学习_第1张图片

  • Main.java 程序入口类,载入界面并显示
  • Controller.java 事件处理,与fxml绑定
  • Sample.fxml 界面

sample.fxml需要通过标签fx:controller定义对应的controller



专业术语

舞台(Stage),场景(Scene),容器(Container),布局(Layout )和控件(Controls)之间的关系
Java开发桌面程序学习(二)————fxml布局与控件学习_第2张图片

常用容器(布局)Container

可以把容器和布局统一成一个概念

  • Vbox
    相当于垂直方向LinearLayout
  • Hbox
    相当于垂直方向的LinearLayout
  • FlowPanel
    相当于LinearLayout,方向可以定义水平或者垂直,设置水平方向,第一行排满之后,会自动换行排列,设置垂直方向,第一列排满之后,会自动换下一列
  • BorderPane
    上中下左右五个部分
  • AnchorPane
    相当于Android里面的约束布局,比如让某个控件离右边100px,离下边100px
  • ScrollPane 滑动的布局
  • GridPane 通常用于这样的布局:第一列上的只读标签的输入表单和第二列上的输入字段,也就是常用的用户名后面加一个输入框

    常用控件(Control)

    默认的为原生的,JFX前缀则是Jfoenix里面的

文本

  • label
  • JFXPasswordField 密码框
  • JFXTextField 单行输入框
  • JFXTextArea 多行输入框

按钮

  • JFXButton

选择框

  • JFXCheckbox
  • JFXRadioButton
  • MenuButton 下拉选择

图片

  • ImageView

进度条

  • JFXProcessbar
  • JFXSlider 水平调节,类似按下音量键出现横线
  • JFXSpinner 圆圈进度条

开关

  • JFXToggleButton

列表

  • JFXListView

菜单

  • MenuBar 自带有鼠标滑过变色,就像SceneBuilder的菜单栏
  • Menu
  • MenuItem
  • RadioMenuItem 点击之后前面会有√,一列菜单可以有多个,但是只能选择一个RadioMenuItem,RadioMenuItem之间是互斥的,需要使用toggleGroup分为同一组
  • CheckMenuItem 多选,一列菜单有多个,也可以选多个

    ToggleGroup toggleGroup = new ToggleGroup();
    
    RadioMenuItem radioItem1 = new RadioMenuItem("Option 1");
    radioItem.setOnAction(new EventHandler() {
        @Override public void handle(ActionEvent e) {
            System.out.println("radio toggled");
        }
    });
    radioItem1.setToggleGroup(toggleGroup);
    RadioMenuItem radioItem2 = new RadioMenuItem("Option 2");
    radioItem.setOnAction(new EventHandler() {
        @Override public void handle(ActionEvent e) {
            System.out.println("radio toggled");
        }
    });
    radioItem2.setToggleGroup(toggleGroup);
  • SeparatorMenuItem 分割线
    前面需要在添加到MenuBar里面才能使用
  • SpiltMenuButton 左边是某个按钮,右边是一个下拉箭头,点击左边,就会实现按钮操作,点击右边,在出现的列表中选择某一项,就可以改变左边按钮

使用SceneBuilder生成fxml布局

由于现有的工具不多,只有个界面化的工具,所以就不过多去研究fxml代码部分了。

我们还是弄个用户登录界面上手吧,使用SceneBuilder弄成以下布局
Java开发桌面程序学习(二)————fxml布局与控件学习_第3张图片

这是我做的界面大体框架,当然,也可以不一样,实现的方法有很多种
Java开发桌面程序学习(二)————fxml布局与控件学习_第4张图片

主界面里的控件居中显示,相当于Android的布局的gravity属性,设置子布局或者控件的显示
Java开发桌面程序学习(二)————fxml布局与控件学习_第5张图片

输入框设置提示文字,居中显示
Java开发桌面程序学习(二)————fxml布局与控件学习_第6张图片

输入框间距
Java开发桌面程序学习(二)————fxml布局与控件学习_第7张图片

下面的两个Button间距设置同上,设置左边那个注册按钮的右边距即可

获取控件实例和控件事件处理

这里,我们给我们需要的控件设置id即可通过id来找到该实例,从而调用实例对象的set方法设置内容或者是get方法获取内容

事件处理的话,我们只需要定义一个方法名,之后再去Controller.java文件实现相关的逻辑
Java开发桌面程序学习(二)————fxml布局与控件学习_第8张图片

之前我们使用了属性fx:controller已经让sample.fxml和controller进行绑定了,我们可以直接让SceneBuilder生成controller的代码

Java开发桌面程序学习(二)————fxml布局与控件学习_第9张图片

Java开发桌面程序学习(二)————fxml布局与控件学习_第10张图片

点击登录,提示一个对话框
封装JFXDialog代码,一行代码即可使用

//这里,Jfoenix开发团队没有考虑到对话框的创建是要点击之后生成的,demo直接是在Main.java文件里面写的
//我是在issue那里找到了一位外国开发者,直接在controller里面创建对话框显示
//我稍微折腾一下,准备弄个想Android那样,对话框可以由一行代码生成,这里就暂时使用外国开发者代码凑合凑合
//使用的话,如果Stage的宽度不长,对话框显示会不完全,得在Main.java中设置一下
final JFXAlert alert = new JFXAlert<>((Stage) tfPassword.getScene().getWindow());
alert.initModality(Modality.APPLICATION_MODAL);
alert.setOverlayClose(false);

// Create the content of the JFXAlert with JFXDialogLayout
JFXDialogLayout layout = new JFXDialogLayout();
layout.setHeading(new Label("Enter Username"));
layout.setBody(new VBox(new Label("Please enter the username of the person you would like to add.")));

// Buttons get added into the actions section of the layout.
JFXButton addButton = new JFXButton("ADD");
addButton.setButtonType(JFXButton.ButtonType.FLAT);
addButton.setOnAction(new EventHandler() {
    public void handle(ActionEvent addEvent) {
        // When the button is clicked, we set the result accordingly
        alert.setResult("hello");
        alert.hideWithAnimation();
    }
});

JFXButton cancelButton = new JFXButton("CANCEL");
cancelButton.setCancelButton(true);
cancelButton.setOnAction(new EventHandler() {
    public void handle(ActionEvent closeEvent) {
        alert.hideWithAnimation();
    }
});

layout.setActions(addButton, cancelButton);
alert.setContent(layout);

alert.showAndWait();

测试

Java开发桌面程序学习(二)————fxml布局与控件学习_第11张图片

你可能感兴趣的:(Java开发桌面程序学习(二)————fxml布局与控件学习)