Javafx Scene Builder使用教程

---

前言

Scene Builder作为一款Java拖拽式页面设计编码工具，具有强大的拖拽设计能力，对于一些入门以及需要快速响应页面编码的情况，该工具的效果绝对令人满意。同时该工具也存在着这类软件的通病，样式都不是怎么好看，自动生成的结构语言不够理想。因此大家不要过于依赖该工具，需要更加清晰理解fxml语言的魅力

一、使用方式

1.IDEA插件“Scene Builder”

首先，idea下载插件javaFx，安装完插件后fxml可以被识别为可识别文件，且支持fxml相关的语义操作。

同时，该插件还支持内嵌Scene Builder，实时查看fxml效果以及通过Scene Builder拖拽式自动生成fxml结构语言。
此时不能够调用controller控制器，因此只能看到页面布局，功能无效。

左侧“Text”展示fxml文件编辑页面，右侧“Scene Builder”预览页面。
注意：该插件与idea兼容性存在很大的问题，作者目前发现，在社区版idea中都会是乱码，目前没有找到解决方法。然而在正式版本中该插件的显示正常，无乱码。有解决方法的同学可以留言。目前只能归结于，电脑字体不全、idea字体不全两种情况。

2.Javafx Scene Builder桌面软件

第二种方式主要是通过下载avafx Scene Builder2.0安装在本地，通过软件打开fxml文件进行编辑。

下载地址：https://www.oracle.com/java/technologies/javafxscenebuilder-1x-archive-downloads.html
大家可以根据系统要求，选择要下载的版本类型。由于该软件的使用基于Java语言，因此优先检查一下本地是否有Java安装环境，然后安装该软件。

二、使用步骤

1.模块介绍

主要分为四个区域元素对象选择区（元素库）、预览展示区、控件属性区域、层次结构区。

元素库主要包含：容器、控件、菜单、混合组合、图形形状、图表。在日常使用过程中，容器、控件、菜单就能满足我们绝大部分的需求。其次是图形和图标，然而混合类别使用较少，在一些切换按钮、单选等组合控件中可能会使用到。

属性区域主要包含三部分：元素属性、元素布局、元素动作。

层次结构区域能够清晰的展示容器之间的关系，以及容器与控件之间的父子关系。能够让设计者清楚的找到某一控件的位置，以方便修改。

2.基本操作步骤

1.根据需求在容器中选择合适的面板，例如：GridPane,鼠标拖拽至预览区域，可以根据需要修改属性，是否显示网格线。

2.在其每个表格中拖拽入相应的控件

3.点击保存，自动生成fxml文件

<GridPane alignment="CENTER" gridLinesVisible="true" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="142.0" prefWidth="529.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" maxWidth="296.0" minWidth="10.0" prefWidth="57.0" />
    <ColumnConstraints hgrow="SOMETIMES" maxWidth="500.0" minWidth="10.0" prefWidth="468.0" />
  columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  rowConstraints>
   <children>
      <Label text="用户名:" textAlignment="CENTER" />
      <Label text="密    码:" textAlignment="CENTER" GridPane.rowIndex="1" />
      <TextField promptText="请输入您的姓名" GridPane.columnIndex="1" />
      <PasswordField promptText="请输入您的密码" GridPane.columnIndex="1" GridPane.rowIndex="1" />
      <Button mnemonicParsing="false" text="清除" GridPane.columnIndex="1" GridPane.rowIndex="2" />
      <Button contentDisplay="CENTER" mnemonicParsing="false" text="登录" textOverrun="CLIP" GridPane.columnIndex="1" GridPane.rowIndex="2">
         <GridPane.margin>
            <Insets left="100.0" right="50.0" />
         GridPane.margin>
      Button>
   children>
GridPane>

4.在软件中属性约束比较多，因此更多的属性可以直接在fxm文件中添加修改

---

总结

工具的使用比较简单，完成较为简单测试工具b比较轻松，但是如果要设计比较复杂且美观性这比较高的要求时，使用拖拽不能完美呈现效果，还得依赖css的支持。工具也只能完成基本控件层次结构的搭建。