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

javafx项目

新建完项目，我们的项目有三个文件

• main.java 程序入口类，载入界面并显示
• controller.java 事件处理,与fxml绑定
• sample.fxml 界面

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

<!-- 最外层的那个布局使用fx:controller属性即可 -->
<flowpane fx:controller="sample.controller" ..>
</flowpane>

专业术语

舞台(stage)，场景(scene)，容器(container)，布局(layout )和控件(controls)之间的关系

常用容器（布局）container

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

• vbox
  相当于垂直方向linearlayout
• hbox
  相当于垂直方向的linearlayout
• flowpanel
  相当于linearlayout，方向可以定义水平或者垂直，设置水平方向，第一行排满之后，会自动换行排列，设置垂直方向，第一列排满之后，会自动换下一列
• borderpane
  上中下左右五个部分
• anchorpane
  相当于android里面的约束布局，比如让某个控件离右边100px，离下边100px
• scrollpane 滑动的布局

常用控件（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<actionevent>() {
      @override public void handle(actionevent e) {
          system.out.println("radio toggled");
      }
  });
  radioitem1.settogglegroup(togglegroup);
  radiomenuitem radioitem2 = new radiomenuitem("option 2");
  radioitem.setonaction(new eventhandler<actionevent>() {
      @override public void handle(actionevent e) {
          system.out.println("radio toggled");
      }
  });
  radioitem2.settogglegroup(togglegroup);

• separatormenuitem 分割线
  前面需要在添加到menubar里面才能使用

• spiltmenubutton 左边是某个按钮，右边是一个下拉箭头，点击左边，就会实现按钮操作，点击右边，在出现的列表中选择某一项，就可以改变左边按钮

使用scenebuilder生成fxml布局

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

我们还是弄个用户登录界面上手吧，使用scenebuilder弄成以下布局

这是我做的界面大体框架，当然，也可以不一样，实现的方法有很多种

主界面里的控件居中显示，相当于android的布局的gravity属性，设置子布局或者控件的显示

输入框设置提示文字，居中显示

输入框间距

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

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

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

事件处理的话，我们只需要定义一个方法名，之后再去controller.java文件实现相关的逻辑

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

点击登录，提示一个对话框

//这里，jfoenix开发团队没有考虑到对话框的创建是要点击之后生成的，demo直接是在main.java文件里面写的
//我是在issue那里找到了一位外国开发者，直接在controller里面创建对话框显示
//我稍微折腾一下，准备弄个想android那样，对话框可以由一行代码生成，这里就暂时使用外国开发者代码凑合凑合
//使用的话，如果stage的宽度不长，对话框显示会不完全，得在main.java中设置一下
final jfxalert<string> 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<actionevent>() {
    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<actionevent>() {
    public void handle(actionevent closeevent) {
        alert.hidewithanimation();
    }
});

layout.setactions(addbutton, cancelbutton);
alert.setcontent(layout);

alert.showandwait();

测试