JavaFX官方教程（七）之使用FXML创建用户界面

翻译自  使用FXML创建用户界面

本教程展示了使用JavaFX FXML的好处，JavaFX FXML是一种基于XML的语言，它提供了构建与代码的应用程序逻辑分开的用户界面的结构。

如果您从一开始就开始使用本文档，那么您已经了解了如何使用JavaFX创建登录应用程序。在这里，您使用FXML创建相同的登录用户界面，将应用程序设计与应用程序逻辑分离，从而使代码更易于维护。您在本教程中构建的登录用户界面如图6-1所示。

图6-1登录用户界面

本教程使用NetBeans IDE。确保您使用的NetBeans IDE版本支持JavaFX 8.有关详细信息，请参阅Java SE下载页面的“认证系统配置”部分。

 

1、设置项目

您的第一个任务是在NetBeans IDE中设置JavaFX FXML项目：

  1. 从“ 文件”菜单中，选择“ 新建项目”。

  2. 在JavaFX应用程序类别中，选择JavaFX FXML Application。单击下一步。

  3. 将项目命名为FXMLExample，然后单击Finish。

    NetBeans IDE打开一个FXML项目，其中包含基本Hello World应用程序的代码。该应用程序包括三个文件：

    • FXMLExample.java. 该文件负责FXML应用程序所需的标准Java代码。

    • FXMLDocument.fxml. 这是您在其中定义用户界面的FXML源文件。

    • FXMLDocumentController.java. 这是用于处理鼠标和键盘输入的控制器文件。

  4. 重命名FXMLDocumentController.java为F，XMLExampleController.java以使该名称对此应用程序更有意义。

    1. 在“项目”窗口中，右键单击“ FXMLDocumentController.java”，然后选择“ 重构”，然后选择“ 重命名”。

    2. 输入FXMLExampleController，然后单击“ 重构”。

  5. 重命名FXMLDocument.fxml为fxml_example.fxml.

    1. 右键单击FXMLDocument.fxml并选择“ 重命名”。

    2. 输入fxml_example并单击“ 确定”。

 

2、加载FXML源文件

您编辑的第一个文件是FXMLExample.java文件。此文件包含用于设置应用程序主类和定义舞台和场景的代码。更具体的FXML，该文件使用FXMLLoader该类，该类负责加载FXML源文件并返回结果对象图。

在例6-1中进行粗体显示的更改。

例6-1 FXMLExample.java

    @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所示。

示例6-2 XML声明和导入语句

<?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中的布局。

示例6-3 GridPane布局

<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>

在此应用程序中，GridPane布局是FXML文档的根元素，因此具有两个属性。fx:controller在标记中指定基于控制器的事件处理程序时，该属性是必需的。该xmlns:fx属性始终是必需的，并指定fx命名空间。

代码的其余部分控制网格窗格的对齐和间距。alignment属性将网格的默认位置从场景的左上角更改为中心。在gap性能管理行和列之间的间距，而padding物业管理围绕网格窗格边缘的空间。

在调整窗口大小时，网格窗格中的节点将根据其布局约束进行调整大小。在此示例中，当您增大或缩小窗口时，网格将保留在中心。填充属性确保在使窗口变小时网格周围有填充。

 

5、添加文本和密码字段

回顾图6-1，您可以看到登录表单需要标题“欢迎”以及用于从用户收集信息的文本和密码字段。例6-4中的代码是GridPane布局的一部分，必须放在</GridPane>语句的上方。

示例6-4文本，标签，TextField和密码字段控件

<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"/>

第一行创建一个Text对象并将其文本值设置为Welcome。的GridPane.columnIndex和GridPane.rowIndex属性对应的放置Text在网格控制。网格中行和列的编号从零开始，Text控件的位置设置为（0,0），这意味着它位于第一行的第一列中。该GridPane.columnSpan属性设置为2，使欢迎标题跨越网格中的两列。当您添加样式表以将文本的字体大小增加到32磅时，您将在本教程后面需要这个额外的宽度。

下一行创建一个Label对象，其中第User Name0列，第1行为文本，第1列为第1行TextField，右侧为对象。另一行Label和PasswordField对象以类似方式创建并添加到网格中。

使用网格布局时，可以显示网格线，这对于调试非常有用。在这种情况下，通过在语句后添加语句gridLinesVisible来将属性设置为。然后，当您运行应用程序时，您会看到网格列和行的行以及间隙属性，如图6-2所示。true<gridLinesVisible>true</gridLinesVisible><padding></padding>

图6-2带网格线的登录表单


6、添加按钮和文本

应用程序所需的最后两个控件是Button用于提交数据的Text控件和用于在用户按下按钮时显示消息的控件。代码在例6-5中。之前添加此代码</GridPane>。

例6-5 HBox，Button和Text

<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"/>

HBox需要一个窗格来设置按钮的对齐方式，该方框与应用于GridPane布局中其他控件的默认对齐方式不同。该alignment属性设置为bottom_right，将空间底部的节点垂直放置，并在空间的右边缘水平放置。该HBox窗格将添加到第1列第4行的网格中。

该HBox窗格有一个孩子，一个Button与text属性设置为Sign in和onAction设置属性handleSubmitButtonAction()。虽然FXML是定义应用程序用户界面结构的便捷方式，但它并未提供实现应用程序行为的方法。您可以handleSubmitButtonAction()在本教程的下一部分“ 添加代码来处理事件”中实现Java代码中的方法行为。

分配一个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");}}

该@FXML注释被用于标记非公共控制器成员字段和处理程序方法用于通过FXML标记使用。该handleSubmtButtonAction方法将actiontarget变量设置为Sign in button pressed用户按下按钮时。

您现在可以运行该应用程序以查看完整的用户界面。图6-3显示了在两个字段中键入文本并单击“登录”按钮时的结果。如果您有任何问题，那么您可以将您的代码与FXMLLogin示例进行比较。

图6-3 FXML登录窗口



8、使用脚本语言处理事件

作为使用Java代码创建事件处理程序的替代方法，您可以使用提供与JSR 223兼容的脚本引擎的任何语言来创建处理程序。这些语言包括JavaScript，Groovy，Jython和Clojure。

您可以选择立即尝试使用JavaScript。

  1. 在文件中fxml_example.fxml，在XML doctype声明之后添加JavaScript声明。

    <?language javascript?>

  2. 在Button标记中，更改函数的名称，以使调用如下所示：

    onAction="handleSubmitButtonAction(event);"

  3. 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所示。

图6-4使用JavaScript登录应用程序

如果您正在考虑使用FXML脚本语言，请注意IDE可能不支持在调试期间单步执行脚本代码。

 

9、使用CSS设置应用程序样式

最后的任务是通过添加层叠样式表（CSS）使登录应用程序看起来很有吸引力。

  1. 创建样式表。

    1. 在“项目”窗口中，右键单击“源包”下的fxmlexample文件夹，然后选择“ 新建”，再选择“ 其他”。

    2. 在“新建文件”对话框中，选择“ 其他”，然后选择“ 层叠样式表”，并单击“ 下一步”。

    3. 输入Login并单击Finish。

    4. 将Login.css文件的内容复制到CSS文件中。该Login.css文件包含在可下载的LoginCSS.zip文件中。有关CSS文件中的类的说明，请参阅使用JavaFX CSS的花式表单。

  2. 通过右键单击background.jpg文件并将其保存到fxmlexample文件夹，下载背景的灰色亚麻图像。

  3. 打开fxml_example.fxml文件并在GridPane布局标记结束之前添加样式表元素，如例6-8所示。

    例6-8样式表

    <stylesheets><URL value="@Login.css" /></stylesheets></GridPane>

    URL中样式表名称前面的@符号表示样式表与FXML文件位于同一目录中。

  4. 要使用网格窗格的根样式，请将样式类添加到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">

  5. welcome-text为Welcome Text对象创建一个ID，使其使用#welcome-textCSS文件中定义的样式，如例6-10所示。

    示例6-10文本ID

    <Text id="welcome-text" text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/>

  6. 运行该应用程序。图6-5显示了程式化的应用程序。如果遇到问题，请查看可下载的FXMLExample.zip文件中包含的代码

    图6-5样式化登录应用程序


     

10、从这往哪儿走

既然您熟悉FXML，请查看FXML 简介，它提供了有关构成FXML语言的元素的更多信息。该文档包含在API文档的javafx.fxml包中。

您还可以通过fxml_example.fxml在Scene Builder中打开文件并进行修改来试用JavaFX Scene Builder工具。此工具为JavaFX应用程序的UI设计提供了可视化布局环境，并自动为布局生成FXML代码。请注意，保存时可能会重新格式化FXML文件。有关此工具的更多信息，请参阅JavaFX Scene Builder入门。使用CSS进行Skinning和JavaFX Scene Builder用户指南的CSS Analyzer部分，还可以为您提供有关如何为FXML布局设置外观的信息。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/325189.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

块元素与行内元素转化（display属性）

块元素与行内元素转化（display属性）

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style>.div1{width: 200px;height: 200px;background-color: lightyellow;border: 1px solid lightcoral;margin: 0px auto;}.s1{/*行内元素设置宽和高…
阅读更多...
DllImport 自动选择x64或x86 dll

DllImport 自动选择x64或x86 dll

前言 标题不知道怎么确切地命名&#xff0c;在.net的托管世界里&#xff0c;有时不得不使用c的某个动态库&#xff0c;比如ocr、opencv等&#xff0c;如果幸运&#xff0c;有前人已经包装出.net版本&#xff0c;但有些不非常流行的库&#xff0c;只能自己使用pinvoke或c cli包…
阅读更多...
《金色梦乡》金句摘抄（八）

《金色梦乡》金句摘抄（八）

System.out.println("《金色梦乡》"); System.out.println("小说类型的书就是比散文类型的书好看"); System.out.println("通俗易懂"); System.out.println("这周能看完");他转身背对着安保探头&#xff0c;有种被看门人或看门狗盯上了…
阅读更多...
JavaFX官方教程（八）之JavaFX中的动画和视觉效果

JavaFX官方教程（八）之JavaFX中的动画和视觉效果

翻译自 JavaFX中的动画和视觉效果 您可以使用JavaFX快速开发具有丰富用户体验的应用程序。在本入门教程中&#xff0c;您将学习如何使用非常少的编码创建动画对象并获得复杂的效果。 图7-1显示了要创建的应用程序。 图7-1彩色圆圈应用 图7-2显示了该ColorfulCircles应用程序…
阅读更多...
递归-＞记忆化搜索-＞严格表

递归-＞记忆化搜索-＞严格表

阅读更多...
《金色梦乡》金句摘抄（九）

《金色梦乡》金句摘抄（九）

System.out.println("《金色梦乡》"); System.out.println("小说类型的书就是比散文类型的书好看"); System.out.println("通俗易懂"); System.out.println("这周能看完");他在观察&#xff0c;就像饲养员为了掌握动物的情况和习性而观…
阅读更多...
广搜（初见）

广搜（初见）

以下是广搜水题 题意&#xff1a;输入一个n*n的迷宫&#xff0c;输入从起点到终点的最短路 输入&#xff1a; 12 //迷宫大小 2 9 11 8 //起点和终点 1 1 1 1 1 1 1 1 1 1 1 1 //邻接矩阵&#xff0c;0表示通&#xff0c;1表示不通 1 0 0 0 0 0 0 1 0 1 1 1 1 0 1 0 1 1 0 …
阅读更多...
.Net Core 图片文件上传下载

.Net Core 图片文件上传下载

当下.Net Core项目可是如雨后春笋一般发展起来&#xff0c;作为.Net大军中的一员&#xff0c;我热忱地拥抱了.Net Core并且积极使用其进行业务的开发&#xff0c;我们先介绍下.Net Core项目下实现文件上传下载接口。 一、开发环境 毋庸置疑&#xff0c;宇宙第一IDE VisualStu…
阅读更多...
JavaFX官方教程（九）之转换

JavaFX官方教程（九）之转换

翻译自 Transformations Overview 本章介绍JavaFX中支持的转换。 所有转换都位于javafx.scene.transform包中&#xff0c;并且是类的子Transform类。 介绍转换 变换根据某些参数改变坐标系中图形对象的位置。JavaFX支持以下类型的转换&#xff1a; 翻译 回转 缩放 剪毛 …
阅读更多...
《金色梦乡》金句摘抄（十）

《金色梦乡》金句摘抄（十）

System.out.println("《金色梦乡》"); System.out.println("小说类型的书就是比散文类型的书好看"); System.out.println("通俗易懂"); System.out.println("这周能看完");“面对遭受迫害的人&#xff0c;有人选择拯救&#xff0c;有人…
阅读更多...
stream流把list转为map

stream流把list转为map

1.对象中的属性转map 通过Collectors.toMap list.stream().collect(Collectors.toMap(Person::getId,Person::getName)); 2.收集对象本身 list.stream().collect(Collectors.toMap(Person::getId,list->list)
阅读更多...
广搜（练习4题）

广搜（练习4题）

几道例题还比较简单&#xff0c;练习就卡了比较长的时间了(。_。) 所以我会写一下解题思路了(๑ŐдŐ) 还有博客抽风所以代码里会有一些奇奇怪怪的东西&#xff0c;无视就好了qwq。 这几道题我就按各人认为的难易程度来排序吧QAQ。 第一题. 题意&#xff1a;输入一个迷宫&…
阅读更多...
谈一下我们是怎么做数据库单元测试(Database Unit Test)的

谈一下我们是怎么做数据库单元测试(Database Unit Test)的

背景介绍 最近在团队在做release之前的regression,把各个feature分支merge回master之后发现DB的单元测试出现了20多个失败的test cases。之前没怎么做过DB的单元测试&#xff0c;正好借这个机会熟悉一下写DB单元测试的流程。 这篇博文中首先介绍一下在我们的特定项目场景中是…
阅读更多...
JavaFX官方教程（十）之转换类型和示例

JavaFX官方教程（十）之转换类型和示例

翻译自 Transformation Types and Examples 本文档描述了特定的转换并提供了代码示例。 转换 平移变换沿着相对于其初始位置的一个轴将节点从一个位置移动到另一个位置。木琴条的初始位置由x&#xff0c;y和z坐标定义。在实施例2-1中&#xff0c;初始位置值由指定的xStart&a…
阅读更多...
ssl2293-暗黑游戏【dp练习题】

ssl2293-暗黑游戏【dp练习题】

题目&#xff1a; 暗黑游戏中&#xff0c;装备直接决定玩家人物的能力。可以使用Pg和Rune购买需要的物品。暗黑市场中的装备&#xff0c;每件有不同的价格&#xff08;Pg和Rune&#xff09;、能力值、最大可购买件数。Kid作为暗黑战网的一个玩家&#xff0c;当然希望使用尽可能…
阅读更多...
java知识点整理

java知识点整理

1.char类型可以整型类型的值 2.变量的命名规则&#xff1a; (1)由字母、、$ 开头的 (2)后面部分可以拾字母、数字、下划线、$ (3)不能是java的关键词 (4)变量名要有意义 3.0是偶数 4.数据类型转换规则&#xff1a; int(源类型) a 1.0(目标类型); (1)源类型大于目标类型&#…
阅读更多...
比特(bit)和字节(byte)(1byte=8bit)

比特(bit)和字节(byte)(1byte=8bit)

一个0或者一个1存储为一个比特(bit)&#xff0c;是计算机中最小的存储单位。 计算机中是最基本的存储单元是字节(byte) 。每个字节由8个比特构成。
阅读更多...
定位

定位

绝对定位 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title><style>.div1{height: 200px;width: 200px;background-color: gray;/*绝对定位 基于父级标签原点移开以后会自动释放父级标签原点位置*/po…
阅读更多...
Web前端知识体系精简

Web前端知识体系精简

Web前端技术由html、css和javascript三大部分构成&#xff0c;是一个庞大而复杂的技术体系&#xff0c;其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入&#xff0c;然后不断地接触和学习新的知识点&#xff0c;因此对于初学者很难理清楚整个体…
阅读更多...
JavaFX官方教程（十一）之动画基础

JavaFX官方教程（十一）之动画基础

翻译自 动画基础 动画基础提供基本动画概念&#xff0c;包含以下部分&#xff1a; 转变 时间线动画 插值 JavaFX中的动画可以分为时间轴动画和过渡。本章提供了每种动画类型的示例。 Timeline并且Transition是javafx.animation.Animation该类的子类。有关特定类&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023