Java开发笔记（一百四十三）FXML布局的基本格式

前面介绍了JavaFX的常见控件用法，虽然JavaFX控件比起AWT与Swing要好用些，但是一样通过代码编写控件界面，并没有提高什么开发效率。要想浏览界面的展示效果，都必须运行测试程序才能观看，即使只是微调控件的大小，也得重新运行程序查看效果，显然既费时又费力。为此JavaFX提供了另一种给界面排版的方式，不必使用Java代码堆砌控件，而是利用FXML文件开展界面布局，同时借助于idea的预览功能，无需运行程序即可直接观察FXML的布局效果。所谓“FXML”意思是JavaFX专用的XML格式，它基于XML标准并加以扩展，每个JavaFX控件均有对应的XML标签，把这些蕴含控件的标签组装起来，便形成了一个窗口界面专属的布局文件。
举个简单的例子，现在准备画登录界面，包含用户名输入框、密码输入框，以及登录按钮，这些控件自上往下分成三行排列。该界面预期的展示效果如下图所示。

倘若完全使用代码实现以上的登录界面，无疑要反复地调整代码并多次执行程序，才能达到满意的布局效果。那么采用FXML方式的话，可以把与界面相关的控件元素剥离出来，改为在FXML文件中书写XML标签结构。比如上述登录页对应的FXML文件名叫login.fxml，其内容示例如下：

<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.PasswordField?><FlowPane xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="5" vgap="5"><HBox fx:id="hbUser" prefWidth="400" prefHeight="40"><Label fx:id="labelUser" prefWidth="120" prefHeight="40" text="用户名：" /><TextField fx:id="fieldUser" prefWidth="280" prefHeight="40" /></HBox><HBox fx:id="hbPassword" prefWidth="400" prefHeight="40"><Label fx:id="labelPassword" prefWidth="120" prefHeight="40" text="密　码：" /><PasswordField fx:id="fieldPassword" prefWidth="280" prefHeight="40" /></HBox><Button fx:id="btnLogin" prefWidth="400" prefHeight="40" text="登　　录" />
</FlowPane>

在idea中打开login.fxml，注意到该文件界面的左下角有两个选项卡，一个叫“Text”，另一个叫“Scene Builder”。当前打开的login.fxml展示为文本内容，对应的正是“Text”选项，此时单击右边的“Scene Builder”选项，原先的文本内容迅速变为一组可视化页面，页面中央呈现着login.fxml的预览效果，正如下图所示。

原来fxml文件类似于html文件，尽管html文件内部充斥着各种文本标签，但使用浏览器打开html文件总能看到排版精美的网页；而idea自带的Scene Builder承担了fxml浏览器的角色，只要程序员修改了fxml文件的格式内容，切换至“Scene Builder”选项就能立刻看见修改后的界面效果，比起传统的运行程序看效果的方式，Scene Builder的渲染速度要快得多。
回头再看前述的login.fxml，它的文件内容分为两大块，前面一块形如“<?import ***?>”，其作用是导入指定包名路径的控件，与Java代码的import语句相似；后面一块包含各级控件的嵌套结构，其标签格式为“<控件名称属性列表></控件名称>”，如果当前控件不存在下级控件，则它的标签格式可简化为“<控件名称属性列表 />”。依据login.fxml的标签内容，可知该界面采取FlowPane流式窗格，且流式窗格拥有下列三类控件：
1、容纳用户名组件的水平箱子HBox，它的编号是hbUser。该箱子内部又有编号为labelUser的用户名标签，以及编号为fieldUser的用户名输入框；
2、容纳密码组件的水平箱子HBox，它的标识为hbPassword。该箱子内部又有编号为labelPassword的密码标签，以及编号为fieldPassword的密码输入框；
3、编号为btnLogin的登录按钮；
引入FXML布局之后，Java代码要改为从指定的fxml文件中加载界面，也就是将场景的创建过程改成如下两行代码：

     // 从FXML资源文件中加载程序的初始界面Parent root = FXMLLoader.load(getClass().getResource("login.fxml"));Scene scene = new Scene(root, 410, 240); // 创建一个场景

于是绘制界面的JavaFX代码缩小到了下面寥寥几行：

//登录窗口的程序入口（FXML布局控件）
public class LoginMain extends Application {@Overridepublic void start(Stage stage) throws Exception { // 应用程序开始运行stage.setTitle("登录窗口"); // 设置舞台的标题// 从FXML资源文件中加载程序的初始界面Parent root = FXMLLoader.load(getClass().getResource("login.fxml"));Scene scene = new Scene(root, 410, 240); // 创建一个场景stage.setScene(scene); // 设置舞台的场景stage.setResizable(true); // 设置舞台的尺寸是否允许变化stage.show(); // 显示舞台}public static void main(String[] args) {launch(args); // 启动JavaFX应用，接下来会跳到start方法}
}

接着运行上面的LoginMain程序，弹出的登录界面正如预期所示。

JavaFX的绝大多数静态控件，都能以单个标签的形式添加到fxml之中，除了前面例子提及的流式窗格FlowPane、水平箱子HBox、按钮Button、标签Label、文本输入框TextField、密码输入框PasswordField，还包括网格窗格GridPane、边界窗格BorderPane、垂直箱子VBox、多行输入框TextArea、复选框CheckBox、下拉框ComboBox等。然而单选按钮RadioButton的添加方式别具一格，缘由在于好几个单选按钮要构成一个按钮小组，这样才能让同组的单选按钮联动起来。因此fxml得先声明一个ToggleGroup标签，并给它分配标签编号，然后在RadioButton标签后面添加toggleGroup属性，指定加入前一步的ToggleGroup编号。操作单选按钮的具体fxml片段示例如下：

 <HBox fx:id="hbType" prefWidth="400" prefHeight="40"><Label fx:id="labelType" prefWidth="120" prefHeight="40" text="登录类型：" /><fx:define><ToggleGroup fx:id="tgType" /></fx:define><RadioButton fx:id="rbPassword" prefWidth="140" prefHeight="40" toggleGroup="$tgType"text="密码登录" selected="true" /><RadioButton fx:id="rbVerifycode" prefWidth="140" prefHeight="40" toggleGroup="$tgType"text="验证码登录" /></HBox>

当然，新来的RadioButton和ToggleGroup也要在fxml头部添加以下的导入语句：

<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?>

把与单选按钮有关的xml标签补充到login.fxml，再另存为新的fxml文件名叫login_with_flow.fxml，完整的文件内容如下所示：

<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?><FlowPane xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="5" vgap="5"><HBox fx:id="hbType" prefWidth="400" prefHeight="40"><Label fx:id="labelType" prefWidth="120" prefHeight="40" text="登录类型：" /><fx:define><ToggleGroup fx:id="tgType" /></fx:define><RadioButton fx:id="rbPassword" prefWidth="140" prefHeight="40" toggleGroup="$tgType"text="密码登录" selected="true" /><RadioButton fx:id="rbVerifycode" prefWidth="140" prefHeight="40" toggleGroup="$tgType"text="验证码登录" /></HBox><HBox fx:id="hbUser" prefWidth="400" prefHeight="40"><Label fx:id="labelUser" prefWidth="120" prefHeight="40" text="用户名：" /><TextField fx:id="fieldUser" prefWidth="280" prefHeight="40" /></HBox><HBox fx:id="hbPassword" prefWidth="400" prefHeight="40"><Label fx:id="labelPassword" prefWidth="120" prefHeight="40" text="密　码：" /><PasswordField fx:id="fieldPassword" prefWidth="280" prefHeight="40" /></HBox><Button fx:id="btnLogin" prefWidth="400" prefHeight="40" text="登　　录" /><Label fx:id="labelLoginResult" prefWidth="400" prefHeight="40" text="这里显示登录结果" />
</FlowPane>

然后利用Scene Builder观察login_with_flow.fxml的预览界面，由下图可见单选按钮组合已经添加至登录窗口的上方。

接着修改LoginMain.java，将创建场景时加载的资源文件名改为login_with_flow.fxml，再重新运行测试程序，此时弹出的登录界面如下图所示：

比较Scene Builder的预览界面，以及实际运行的窗口界面，总体而言两者大同小异，基本的布局排列是吻合的。

更多Java技术文章参见《Java开发笔记（序）章节目录》

转载于:https://www.cnblogs.com/pinlantu/p/11426828.html

Java开发笔记（一百四十三）FXML布局的基本格式相关推荐

Java开发笔记（三十三）字符包装类型
正如整型int有对应的包装整型Integer那样,字符型char也有对应的包装字符型Character.初始化字符包装变量也有三种方式,分别是:直接用等号赋值.调用包装类型的valueOf方法.使用关 ...
Java开发笔记（二十三）数组工具Arrays
数组作为一种组合形式的数据类型,必然要求提供一些处理数组的简便办法,包括数组比较.数组复制.数组排序等等.为此Java专门设计了Arrays工具,该工具包含了几个常用方法,方便程序员对数组进行加工操作 ...
Java开发笔记（一百一十三）HttpClient实现下载与上传
前面介绍了通过HttpClient实现HTTP接口的GET方式调用和POST方式调用,那么文件下载与文件上传又该如何操作呢?其实在HttpClient看来,文件下载属于特殊的GET调用,只不过应答报文 ...
Android开发笔记（六十三）HTTP访问的通信方式
InputStream和OutputStream 输入输出流在java中很常用,从文件读写到内存读写到网络通信都会用到.在之前的< Android开发笔记(三十三)文本文件和图片文件的读写> ...
Android开发笔记（四十三）点击事件
按钮点击常用按钮点击 1.单击事件,主要用于Button和ImageButton控件,布局视图与TextView.ImageView控件用的也比较多.相关类名与方法说明如下: 监听器类名 : Vie ...
微信公众号Java开发-笔记02【开发接入准备、开发接入】
学习视频网址:哔哩哔哩网站微信公众号开发-Java版 [P01-P02]微信公众号Java开发-笔记01[微信公众号介绍.开发环境搭建] [P03-P04]微信公众号Java开发-笔记02[开发接入 ...
微信公众号Java开发-笔记01【微信公众号介绍、开发环境搭建】
学习网址:哔哩哔哩网站微信公众号开发-Java版微信公众号Java开发-笔记01[微信公众号介绍.开发环境搭建] 微信公众号Java开发-笔记02[] 微信公众号Java开发-笔记03[] 微信公 ...
Java开发笔记（一百零三）线程间的通信方式
前面介绍了多线程并发之时的资源抢占情况,以及利用同步.加锁.信号量等机制解决资源冲突问题,不过这些机制只适合同一资源的共享分配,并未涉及到某件事由的前因后果.日常生活中,经常存在两个前后关联的事务,像 ...
Java开发笔记（五十六）利用枚举类型实现高级常量
前面介绍了联合利用final和static可实现常量的定义,该方式用于简单的常量倒还凑合,要是用于复杂的.安全性高的常量,那就力不从心了.例如以下几种情况,final结合static的方式便缺乏应对之 ...
Java开发笔记（八十六）通过缓冲区读写文件
前面介绍了利用文件写入器和文件读取器来读写文件,因为FileWriter与FileReader读写的数据以字符为单位,所以这种读写文件的方式被称作"字符流I/O",其中字母I代表输 ...

Java开发笔记（一百四十三）FXML布局的基本格式

Java开发笔记（一百四十三）FXML布局的基本格式相关推荐

最新文章

热门文章