JavaFX官方教程(七)之使用FXML创建用户界面
翻译自 使用FXML创建用户界面
本教程展示了使用JavaFX FXML的好处,JavaFX FXML是一种基于XML的语言,它提供了构建与代码的应用程序逻辑分开的用户界面的结构。
如果您从一开始就开始使用本文档,那么您已经了解了如何使用JavaFX创建登录应用程序。在这里,您使用FXML创建相同的登录用户界面,将应用程序设计与应用程序逻辑分离,从而使代码更易于维护。您在本教程中构建的登录用户界面如图6-1所示。
本教程使用NetBeans IDE。确保您使用的NetBeans IDE版本支持JavaFX 8.有关详细信息,请参阅Java SE下载页面的“认证系统配置”部分。
1、设置项目
您的第一个任务是在NetBeans IDE中设置JavaFX FXML项目:
从“ 文件”菜单中,选择“ 新建项目”。
在JavaFX应用程序类别中,选择JavaFX FXML Application。单击下一步。
将项目命名为FXMLExample,然后单击Finish。
NetBeans IDE打开一个FXML项目,其中包含基本Hello World应用程序的代码。该应用程序包括三个文件:
FXMLExample.java.
该文件负责FXML应用程序所需的标准Java代码。FXMLDocument.fxml.
这是您在其中定义用户界面的FXML源文件。FXMLDocumentController.java.
这是用于处理鼠标和键盘输入的控制器文件。
重命名
FXMLDocumentController.java
为F,XMLExampleController.java
以使该名称对此应用程序更有意义。在“项目”窗口中,右键单击“ FXMLDocumentController.java”,然后选择“ 重构”,然后选择“ 重命名”。
输入FXMLExampleController,然后单击“ 重构”。
重命名
FXMLDocument.fxml
为fxml_example.fxml.
右键单击FXMLDocument.fxml并选择“ 重命名”。
输入fxml_example并单击“ 确定”。
2、加载FXML源文件
@Overridepublic void start(Stage stage) throws Exception {Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));Scene scene = new Scene(root, 300, 275);stage.setTitle("FXML Welcome");stage.setScene(scene);stage.show();}
一个好的做法是在创建场景时设置场景的高度和宽度,在本例中为300乘275; 否则场景默认为显示其内容所需的最小尺寸。
3、修改导入语句
接下来,编辑该fxml_example.fxml
文件。此文件指定应用程序启动时显示的用户界面。第一项任务是修改import语句,使代码如例6-2所示。
<?xml version="1.0" encoding="UTF-8"?><?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
与在Java中一样,类名可以是完全限定的(包括包名),也可以使用import语句导入它们,如例6-2所示。如果您愿意,可以使用引用类的特定import语句。
4、创建GridPane布局
NetBeans生成的Hello World应用程序使用AnchorPane
布局。对于登录表单,您将使用GridPane
布局,因为它使您能够创建灵活的行和列网格,以在其中布置控件。
删除AnchorPane
布局及其子项,并将其替换GridPane
为示例6-3中的布局。
<GridPane fx:controller="fxmlexample.FXMLExampleController" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding></GridPane>
代码的其余部分控制网格窗格的对齐和间距。alignment属性将网格的默认位置从场景的左上角更改为中心。在gap
性能管理行和列之间的间距,而padding
物业管理围绕网格窗格边缘的空间。
在调整窗口大小时,网格窗格中的节点将根据其布局约束进行调整大小。在此示例中,当您增大或缩小窗口时,网格将保留在中心。填充属性确保在使窗口变小时网格周围有填充。
5、添加文本和密码字段
回顾图6-1,您可以看到登录表单需要标题“欢迎”以及用于从用户收集信息的文本和密码字段。例6-4中的代码是GridPane
布局的一部分,必须放在</GridPane>
语句的上方。
<Text text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0"GridPane.columnSpan="2"/><Label text="User Name:"GridPane.columnIndex="0" GridPane.rowIndex="1"/><TextField GridPane.columnIndex="1" GridPane.rowIndex="1"/><Label text="Password:"GridPane.columnIndex="0" GridPane.rowIndex="2"/><PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
下一行创建一个Label
对象,其中第User Name
0列,第1行为文本,第1列为第1行TextField
,右侧为对象。另一行Label
和PasswordField
对象以类似方式创建并添加到网格中。
6、添加按钮和文本
应用程序所需的最后两个控件是Button
用于提交数据的Text
控件和用于在用户按下按钮时显示消息的控件。代码在例6-5中。之前添加此代码</GridPane>
。
<HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="4"><Button text="Sign In" onAction="#handleSubmitButtonAction"/>
</HBox><Text fx:id="actiontarget"GridPane.columnIndex="0" GridPane.columnSpan="2"GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>
分配一个fx:id
值到一个元素,如在对所述代码中所示Text
的控制,创建在文档的命名空间的变量,该变量可以参考从代码的其他地方。虽然不是必需的,但定义控制器字段有助于阐明控制器和标记的关联方式。
7、添加代码来处理事件
现在,Text
当用户按下按钮时,控件会显示一条消息。你在FXMLExampleController.java
文件中这样做。删除NetBeans IDE生成的代码,并将其替换为例6-6中的代码。
例6-6 FXMLExampleController.java
package fxmlexample;import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;public class FXMLExampleController {@FXML private Text actiontarget;@FXML protected void handleSubmitButtonAction(ActionEvent event) {actiontarget.setText("Sign in button pressed");}}
您现在可以运行该应用程序以查看完整的用户界面。图6-3显示了在两个字段中键入文本并单击“登录”按钮时的结果。如果您有任何问题,那么您可以将您的代码与FXMLLogin示例进行比较。
8、使用脚本语言处理事件
作为使用Java代码创建事件处理程序的替代方法,您可以使用提供与JSR 223兼容的脚本引擎的任何语言来创建处理程序。这些语言包括JavaScript,Groovy,Jython和Clojure。
在文件中
fxml_example.fxml
,在XML doctype声明之后添加JavaScript声明。<?language javascript?>
在
Button
标记中,更改函数的名称,以使调用如下所示:onAction="handleSubmitButtonAction(event);"
fx:controller
从GridPane
标记中删除属性,并将JavaScript函数<script>
直接添加到其下的标记中,如例6-7所示。例6-7 FXML中的JavaScript
<GridPane xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"><fx:script>function handleSubmitButtonAction() {actiontarget.setText("Calling the JavaScript");}</fx:script>
或者,您可以将JavaScript函数放在外部文件(例如
fxml_example.js
)中,并包含如下脚本:<fx:script source="fxml_example.js"/>
结果如图6-4所示。
如果您正在考虑使用FXML脚本语言,请注意IDE可能不支持在调试期间单步执行脚本代码。
9、使用CSS设置应用程序样式
最后的任务是通过添加层叠样式表(CSS)使登录应用程序看起来很有吸引力。
创建样式表。
在“项目”窗口中,右键单击“源包”下的fxmlexample文件夹,然后选择“ 新建”,再选择“ 其他”。
在“新建文件”对话框中,选择“ 其他”,然后选择“ 层叠样式表”,并单击“ 下一步”。
输入Login并单击Finish。
将
Login.css
文件的内容复制到CSS文件中。该Login.css
文件包含在可下载的LoginCSS.zip文件中。有关CSS文件中的类的说明,请参阅使用JavaFX CSS的花式表单。
通过右键单击background.jpg文件并将其保存到
fxmlexample
文件夹,下载背景的灰色亚麻图像。打开
fxml_example.fxml
文件并在GridPane
布局标记结束之前添加样式表元素,如例6-8所示。例6-8样式表
<stylesheets><URL value="@Login.css" /></stylesheets></GridPane>
URL中样式表名称前面的@符号表示样式表与FXML文件位于同一目录中。
要使用网格窗格的根样式,请将样式类添加到
GridPane
布局的标记中,如例6-9所示。示例6-9设置GridPane的样式
<GridPane fx:controller="fxmlexample.FXMLExampleController" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" styleClass="root">
welcome-text
为WelcomeText
对象创建一个ID,使其使用#welcome-text
CSS文件中定义的样式,如例6-10所示。示例6-10文本ID
<Text id="welcome-text" text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/>
运行该应用程序。图6-5显示了程式化的应用程序。如果遇到问题,请查看可下载的FXMLExample.zip文件中包含的代码
图6-5样式化登录应用程序
10、从这往哪儿走
既然您熟悉FXML,请查看FXML 简介,它提供了有关构成FXML语言的元素的更多信息。该文档包含在API文档的javafx.fxml
包中。
JavaFX官方教程(七)之使用FXML创建用户界面相关推荐
- JavaFX官方教程(五)之在JavaFX中创建表单
翻译自 在JavaFX中创建表单 在开发应用程序时,创建表单是一项常见活动.本教程将向您介绍屏幕布局的基础知识,如何将控件添加到布局窗格以及如何创建输入事件. 在本教程中,您将使用JavaFX构建如 ...
- JavaFX官方教程(八)之JavaFX中的动画和视觉效果
翻译自 JavaFX中的动画和视觉效果 您可以使用JavaFX快速开发具有丰富用户体验的应用程序.在本入门教程中,您将学习如何使用非常少的编码创建动画对象并获得复杂的效果. 图7-1显示了要创建的应 ...
- JavaFX官方教程(四)之Hello World,JavaFX样式
翻译自 Hello World,JavaFX Style 教你创建和构建JavaFX应用程序的最佳方法是使用"Hello World"应用程序.本教程的另一个好处是,它使您能够 ...
- JavaFX官方教程(三)之JavaFX示例应用程序入门
翻译自 JavaFX示例应用程序入门 此示例应用程序集旨在帮助您开始使用常见的JavaFX任务,包括使用布局,控件,样式表,FXML和视觉效果. Hello World,JavaFX Style ...
- JavaFX官方教程(六)之带有JavaFX CSS的花式表单
翻译自 带有JavaFX CSS的花式表单 本教程通过添加级联样式表(CSS)使您的JavaFX应用程序看起来很有吸引力.您开发设计,创建.css文件并应用新样式. 在本教程中,您将获取一个使用标签 ...
- JavaFX官方教程(一)之JavaFX概述
翻译自 JavaFX概述 本章概述了可以使用JavaFX API构建的应用程序类型,下载JavaFX库的位置以及有关正在交付的关键JavaFX功能的高级信息. JavaFX是一组图形和媒体包,使开发 ...
- JavaFX官方教程(十四)之转换,动画和视觉效果教程的源代码
翻译自 转换,动画和视觉效果教程的源代码 下表列出了本文档中的演示应用程序及其关联的源代码文件. 教程 源代码 NetBeans项目文件 转换概述 Xylophone.java transforma ...
- JavaFX官方教程(十三)之应用效果
翻译自 Applying Effects 创建视觉效果包含以下主题: 混合效果 绽放效果 模糊效果 投影效果 内阴影效果 反射 照明效果 透视效果 创建一系列效果 介绍如何使用视觉效果来增强Java ...
- JavaFX官方教程(十一)之动画基础
翻译自 动画基础 动画基础提供基本动画概念,包含以下部分: 转变 时间线动画 插值 JavaFX中的动画可以分为时间轴动画和过渡.本章提供了每种动画类型的示例. Timeline并且Transit ...
最新文章
- 2015 年 Git@OSC 新增热门开源软件项目 Top 50
- c++内存管理的一些资料
- 统计学习方法笔记(一)-k近邻算法原理及python实现
- p话少说,放码过来?
- 职场十个方法 让专业气质成为你的符号!
- python中__del__使用方法
- 使用sshpass同时更新一台ubuntu和一台CentOS
- 利用HTML+JS+CSS实现简单的网页计算器,附html所有源代码,可直接黏贴运行
- GIT安装与使用记录_已迁移
- mysql的英文字母_MYSQL中查询怎么判断一个字段包含英文?
- 通过3dmax将max文件导出为unity3d可用的带贴图的fbx文件
- JZOJ-senior-3502. 【NOIP2013模拟11.4B组】方格游戏
- 公众号多题库查题系统
- PPT实用功能——布尔运算
- 2021计组和微计-背下来就能拿分的知识总结
- Python算法之旅元组的风暴之最长上升子序列
- mysql索引的使用
- 智能感知与学习(九):非参数估计
- 计算机教师面试题模板,初中信息技术|《了解Word界面》教师资格证面试真题模板...
- Fiddler 基本使用及自动化测试
热门文章
- 452. 用最少数量的箭引爆气球(贪心算法+思路+详解)07
- 605. 种花问题003(贪心算法+思路+详解)
- java堆和栈 常量池_GitHub - han-guang-xue/difference-of-stack-heap-pool: Java中堆、栈和常量池的区别...
- [Java基础]比较器排序Comparator的使用
- random(随机函数生成)
- 算法-二分搜索-找出最大值和次大值
- The Last Non-zero Digit POJ - 1150(n!mod p)
- Seek the Name, Seek the Fame POJ - 2752 (理解KMP函数的失配)既是S的前缀又是S的后缀的子串
- 多项式除法,多项式取模
- E:Three Blocks Palindrome(hard and easy)(树状数组 ? 前缀和?)