文档章节

4使用FXML创建用户界面

诺岚
 诺岚
发布于 2017/06/20 18:39
字数 2888
阅读 89
收藏 0

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

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

 

图4-1登录用户界面

下面的说明如下
“图4-1登录用户界面”说明
 

本教程使用NetBeans IDE。确保您所使用的NetBeans IDE版本支持JavaFX 2.2。有关详细信息,请参阅系统要求

设立项目

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

  1. 从文件菜单中,选择新建项目。

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

  3. 将项目命名为FXMLExample,然后单击完成。

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

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

    • Sample.fxml。这是您定义用户界面的FXML源文件。

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

  4. 将SampleController.java重命名为FXMLExampleController.java,以便该名称对此应用程序更有意义。

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

    2. 输入FXMLExampleController,然后单击Refactor。

  5. 将Sample.fxml重命名为fxml_example.fxml。

    1. 右键单击Sample.fxml并选择重命名。

    2. 输入fxml_example,然后单击确定。

加载FXML源文件

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

示例4-1中,以粗体显示更改。

 

示例4-1 FXMLExample.java

Example 4-1 FXMLExample.java

    @Override
    public 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; 否则场景默认为显示其内容所需的最小大小。

修改导入语句

接下来,编辑fxml_example.fxml文件。该文件指定应用程序启动时显示的用户界面。第一个任务是修改import语句,这样你的代码就像例4-2一样

 

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

Example 4-2 XML Declaration and Import Statements

<?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语句导入,如例4-2所示。如果您愿意,可以使用引用类的特定导入语句。

创建一个GridPane布局

NetBeans生成的Hello World应用程序使用AnchorPane布局。对于登录表单,您将使用GridPane布局,因为它可以创建一个灵活的行和列格网,以便布置控件。

删除AnchorPane布局及其子代,并将其替换GridPane示例4-3中的布局。

 

示例4-3 GridPane布局

Example 4-3 GridPane Layout

<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命名空间。

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

当窗口调整大小时,网格窗格中的节点将根据其布局约束进行调整大小。在这个例子中,当您增长或缩小窗口时,网格保持在中心。当您缩小窗口时,填充属性确保网格周围有一个填充。

添加文本和密码字段

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

 

示例4-4文本,标签,文本框和密码字段控件

Example 4-4 Text, Label, TextField, and Password Field Controls

    <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.columnIndexGridPane.rowIndex属性对应于Text控件在网格中的位置。网格中的行和列的编号从零开始,Text控件的位置设置为(0,0),表示它位于第一行的第一列。该GridPane.columnSpan属性设置为2,制作欢迎标题跨网格中的两列。当您添加样式表以将文本的字体大小增加到32点时,教程中稍后将需要此宽度。

下一行创建Label与文本对象User Name在第0列,第1行和TextField第1栏目的是它的右侧,第1行的另一种LabelPasswordField对象被创建并添加到网格以类似的方式。

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

 

图4-2具有网格线的登录表单

以下是图4-2的说明
“图4-2带网格线的登录表”
 

添加按钮和文本

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

 

示例4-5 HBox,按钮和文本

Example 4-5 HBox, Button, and 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="1" GridPane.rowIndex="6"/>

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

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

fx:id为元素分配一个值,如Text控件的代码所示,在文档的命名空间中创建一个变量,您可以从代码中的其他地方引用该变量。虽然不需要,但定义控制器字段有助于说明控制器和标记如何相关联。

 

添加代码来处理事件

现在,Text当用户按下按钮时,控制显示消息。你在FXMLExampleController.java文件中这样做。删除NetBeans IDE生成的代码,并将其替换为示例4-6中的代码。

 

示例4-6 FXMLExampleController.java

Example 4-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用户按下按钮时。

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

 

图4-3 FXML登录窗口

以下说明图4-3
“图4-3 FXML登录窗口”说明
 

使用脚本语言来处理事件

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

或者,您可以尝试使用JavaScript。

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

    <?language javascript?>

  2. Button标记中,更改函数的名称,使得调用如下所示:

    onAction="handleSubmitButtonAction(event);"

  3. fx:controllerGridPane标记中删除属性,并将JavaScript函数添加到其<script>下的标签中,如示例4-7所示。

    示例4-7 FXML中的JavaScript

    Example 4-7 JavaScript in FXML
        <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"/>

结果如图4-4所示

 

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

以下说明图4-4
“图4-4使用JavaScript登录应用程序”的说明
 

如果您正在考虑使用FXML使用脚本语言,那么请注意,在调试期间,IDE可能不支持脚本代码。

使用CSS编写应用程序

最后的任务是通过添加级联样式表(CSS)来使登录应用程序看起来很有吸引力。

  1. 创建样式表。

    1. 在“项目”窗口中,右键单击“源代码包”下的“登录”文件夹,然后选择“ 新建”,然后选择“ 其他”。

    2. 在新建文件对话框中,选择其他,然后选择级联样式表,然后单击下一步。

    3. 输入登录并单击完成。

    4. Login.css附加到此文档的文件的内容复制到您的CSS文件中。有关CSS文件中的类的描述,请参阅带有JavaFX CSS的Fancy Forms

  2. 下载background.jpg文件中背景的灰色亚麻状图像,并将其添加到fxmlexample文件夹中。

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

    示例4-8样式表

    Example 4-8 Style Sheet
      <stylesheets>
        <URL value="@Login.css" />
      </stylesheets>
    
    </GridPane>

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

  4. 要使用网格窗格的根风格,请将样式类添加到GridPane布局的标记中,如示例4-9所示。

    示例4-9调整GridPane的格式

    Example 4-9 Style the 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文件中定义的样式,如例4-10所示。

    示例4-10文本ID

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

     

  6. 运行应用程序。图4-5显示了程式化的应用程序。

    图4-5风格化登录应用程序

    以下说明图4-5
    “图4-5风格化登录应用程序”的说明

© 著作权归作者所有

诺岚
粉丝 1
博文 109
码字总数 193210
作品 0
广州
程序员
私信 提问
(翻译)JavaFX高级教程:JavaFX2.0的FXML语言

原文地址http://download.oracle.com/javafx/2.0/fxmlgetstarted/jfxpub-fxmlgetstarted.htm FXML是JavaFX 2.0新引入的。你可能会问"What is FXML?" 和"Is FXML for me?" FXML 是基于XML的一......

davelet
2011/10/31
0
0
NetBeans 7.3 Beta 发布,全新的 HTML5 支持

NetBeans IDE 7.3 Beta 大大增强了开发者使用 HTML5、JavaScript 和 CSS 创建和调试富 Web 和移动应用的功能,开发者可通过全新的页面检查、CSS 样式编辑器和全新的 JavaScript 编辑器、调试...

oschina
2012/10/04
3.5K
8
JAVAFX-3 开发应用

理解布局 布局容器(Layoutcontainer)或面板(Pane)允许对JavaFX应用程序场景图中的UI控件进行灵活、动态的排布。JavaFX Layout API包括下列容器类: ● BorderPane类将其内容节点放到上、下、...

---dgw博客
2017/11/30
0
0
NetBeans IDE V8.1 官方中文完整版

注意:IDE 要求的最小屏幕分辨率为 1024x768 像素。 需要首先安装JDK:http://www.rsdown.cn/down/46662.html http://www.cr173.com/soft/10288.html#address NetBeans IDE 8.1 版本引入了完...

麦克风
2017/01/15
0
0
JAVAFX-1 开发应用

为什么用javafx? 写这个专题的目的,其实也是好玩,原来的熟悉的使用swing 来开发java中的gui程序,其实早就知道有javafx 这个东西的,一致没有时间的玩,最近有时间所以学习.这个专题会参考的其它...

---dgw博客
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker搭建Mysql集群、主从同步复制

1、创建数据挂载点: mkdir /opt/mysql-master/mysql、/opt/mysql-master/conf.d、/opt/mysql-slave/conf.d、/opt/mysql-slave/conf.d 2、分别在master、slave节点文件目录conf.d下创建touch......

WALK_MAN
23分钟前
2
0
手把手教你做中间件开发(分布式缓存篇)-借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo

本文档配合主要对如下demo进行配合说明: 借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo 0. 手把手教你做中间件、高性能服务器、分布式存储技术交流群 ...

y123456yz
24分钟前
1
0
阿里技术男的成长史:越想证明自己死得越快……

在上海工作8年后,身为部门经理的钱磊,管理着一家ERP公司的百十来号员工,“再往上爬就是老板和他儿子了……从这个领域的技术角度来讲算是做到了顶。”05年,钱磊就开始关注一家名字奇怪,做...

阿里云云栖社区
28分钟前
2
0
Spring-boot单元测试(私有方法测试)

Spring-boot的单元测试网上有了很多,当项目是可以使用spring-boot正常运行时,只要在测试类上添加如下配置就使用@Autowired的方式进行单元测试 @RunWith(SpringJUnit4ClassRunner.class)@...

琴兽
45分钟前
1
0
spring cloud(第一部)框架概述

关于微服务 近几年,'微服务'这个词越来越多的被身边的人所提及,到底什么是微服务,为什么微服务总是伴随着spring cloud被人们所提及,这里笔者结合多年的技术经历跟大家分享下自己的理解:...

白中墨
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部