JavaFX快速入门中文版
本文档代码使用NetBeans IDE 8.2运行
官方的文档很简单，只适合了解，入门，具体深入学习请百度，如果发现好的资源请告诉我************************共同学习
制作于：2017/1/7 Saturday
目录
1 JavaFX概述 ................................................................................................................. 5
JavaFX应用程序 .................................................................................................... 5 可用性.................................................................................................................... 6 主要特征................................................................................................................ 6 我可以使用JavaFX构建什么？ ........................................................................... 8 如何运行示例应用程序？.................................................................................... 9 如何在IDE中运行示例？ .................................................................................. 10 如何创建JavaFX应用程序？ ............................................................................. 10 资源...................................................................................................................... 11 2了解JavaFX体系结构 .............................................................................................. 11
场景图.................................................................................................................. 12 Java公共API的JavaFX特性 .............................................................................. 13 图形系统.............................................................................................................. 14 Glass窗口工具包 ................................................................................................ 14 线程...................................................................................................................... 15 脉冲...................................................................................................................... 15 媒体和图像.......................................................................................................... 16 Web组件 ............................................................................................................. 16 CSS ........................................................................................................................ 17 UI控件 ................................................................................................................. 18 布局...................................................................................................................... 19 2-D和3-D变换 ................................................................................................... 19 视觉效果.............................................................................................................. 20 JavaFX示例应用程序入门 .................................................................................. 21
3 Hello World，JavaFX Style ........................................................................................ 21
构建应用程序...................................................................................................... 22 运行应用程序...................................................................................................... 24 下一步去哪里...................................................................................................... 25 4在JavaFX中创建表单 .............................................................................................. 25
创建项目.............................................................................................................. 26 创建GridPane布局 ............................................................................................. 27 添加文本，标签和文本字段.............................................................................. 28 添加按钮和文本.................................................................................................. 32 添加代码以处理事件.......................................................................................... 34 运行应用程序...................................................................................................... 35 下一步去哪里...................................................................................................... 38 5使用JavaFX CSS的花式表单 ................................................................................... 38
创建项目.............................................................................................................. 39 创建CSS文件 ...................................................................................................... 39 添加背景图片...................................................................................................... 40 设置标签样式...................................................................................................... 41 样式文本.............................................................................................................. 42 按钮样式.............................................................................................................. 44 下一步去哪里...................................................................................................... 46 6使用FXML创建用户界面........................................................................................ 46
设置项目.............................................................................................................. 47 加载FXML源文件 ............................................................................................... 48 修改导入语句...................................................................................................... 48 创建GridPane布局 ............................................................................................. 49
添加文本和密码字段.......................................................................................... 50 添加按钮和文本.................................................................................................. 51 添加代码以处理事件.......................................................................................... 52 使用脚本语言处理事件...................................................................................... 53 使用CSS设计应用程序样式 .............................................................................. 55 从这到哪里去...................................................................................................... 57 7在JavaFX中的动画和视觉效果 .............................................................................. 57
设置应用程序...................................................................................................... 59 设置项目.............................................................................................................. 59 添加图形.............................................................................................................. 60 添加视觉效果...................................................................................................... 61 创建背景渐变...................................................................................................... 62 应用混合模式...................................................................................................... 添加动画.............................................................................................................. 65 从这到哪里去...................................................................................................... 67 A background.jpg ......................................................................................................... 67
1 JavaFX概述
本章概述了您可以使用JavaFX API构建的应用程序类型，下载JavaFX库以及关于所交付的主要JavaFX功能的高级信息。
JavaFX是一组图形和媒体包，使开发人员能够设计，创建，测试，调试和部署在不同平台间一致运行的富客户端应用程序。 JavaFX应用程序 可用性 主要特征
我可以用JavaFX构建什么？ 如何运行样本应用程序？ 如何在IDE中运行示例？ 如何创建JavaFX应用程序？ 资源
请参阅了解JavaFX体系结构一章，了解JavaFX平台体系结构，并简要介绍用于媒体流，Web呈现和用户界面样式的JavaFX API。
JavaFX应用程序
由于JavaFX库被编写为Java API，JavaFX应用程序代码可以引用任何Java库中的API。 例如，JavaFX应用程序可以使用Java API库访问本机系统功能并连接到基于服务器的中间件应用程序。
JavaFX应用程序的外观和感觉可以定制。 级联样式表（CSS）将外观和样式与实现分离，以便开发人员可以专注于编码。 平面设计师可以通过CSS轻松地定制应用程序的外观和样式。 如果您有Web设计背景，或者您想分离用户界面（UI）和后端逻辑，那么您可以使用FXML脚本语言开发UI的演示方面，并为应用程序使用Java代码逻辑。 如果你更喜欢设计UI而不编写代码，那么使用JavaFX Scene Builder。 在设计UI时，Scene Builder创建可以移植到集成开发环境（IDE）的FXML标记，以便开发人员可以添加业务逻辑。
可用性
JavaFX API作为Java SE运行时环境（JRE）和Java开发工具包（JDK）的完全集成功能提供。 由于JDK适用于所有主要的桌面平台（Windows，Mac OS X和Linux），因此编译为JDK 7及更高版本的JavaFX应用程序也可在所有主要的桌面平台上运行。 JavaFX 8也支持ARM平台.JDK for ARM包括JavaFX的基础，图形和控件组件。
跨平台兼容性为JavaFX应用程序开发人员和用户提供了一致的运行时体验。 Oracle确保在所有平台上同步发布和更新，并为运行关键任务应用程序的公司提供广泛的支持计划 。
在JDK下载页面上 ，您可以获取JavaFX示例应用程序的zip文件。 示例应用程序提供了许多代码示例和片段，通过示例演示如何编写JavaFX应用程序。 请参见“如何运行示例应用程序？ 了解更多信息。
主要特征
JavaFX 8和更高版本中包含以下功能。 相应地指示在JavaFX 8版本中引入的项目：
•
Java API 。 JavaFX是一个Java库，包括用Java代码编写的类和接口。 这些API被设计为对Java虚拟机（Java VM）语言的友好替代，例如JRuby和Scala。
•
FXML和场景构建器 。 FXML是一种基于XML的声明性标记语言，用于构建JavaFX应用程序用户界面。 设计人员可以在FXML中编写代码或使用JavaFX Scene Builder交互式设计图形用户界面（GUI）。 Scene Builder生成可以移植到IDE的FXML标记，开发人员可以添加业务逻辑。
•
WebView 。 使用WebKitHTML技术的Web组件，可以在JavaFX应用程序中嵌入网页。 在WebView中运行的JavaScript可以调用Java API，Java API可以调用在WebView中运行的JavaScript。 JavaFX 8中添加了对其他HTML5功能（包括Web套接字，Web Worker和Web字体）和打印功能的支持。请参阅将Java内容添加到JavaFX应用程序 。
•
Swing互操作性 。 现有的Swing应用程序可以使用JavaFX功能进行更新，例如丰富的图形媒体播放和嵌入式Web内容。 SwingNode类，它允许您将Swing内容嵌入到JavaFX应用程序中，已添加到JavaFX 8中。有
关详细信息，请参阅JavaFX 应用程序中的SwingNode API javadoc和嵌入Swing内容 。
•
内置UI控件 和CSS 。 JavaFX提供开发全功能应用程序所需的所有主要UI控件。 组件可以使用标准Web技术（如CSS）进行外观化。 DatePicker和TreeTableView UI控件现在可用于JavaFX 8版本。 有关更多信息，请参阅使用JavaFX UI控件 。 此外，CSS Styleable *类已成为公共API，允许对象通过CSS样式化。
•
Modena主题 。 Modena主题将Caspian主题替换为JavaFX 8应用程序的默认值。 通过在应用程序start（）方法中添加
setUserAgentStylesheet(STYLESHEET_CASPIAN)行，Caspian主题仍可供您使用。 有关更多信息，请参阅位于 fxexperience.com的Modena博客
•
3D图形功能 。 对于新的API类Shape3D （ Box, Cylinder, MeshView, and Sphere子类）， SubScene, Material, PickResult, LightBase (AmbientLight和PointLight子类），以及SceneAntialiasing已添加到3D图形库中的JavaFX 8. Camera API类也已在此版本中更新。 有关更多信息，请参阅JavaFX 3D图形入门文档和
javafx.scene.shape.Shape3D ， javafx.scene.SubScene,
javafx.scene.paint.Material, javafx.scene.input.PickResult的相应API javadoc和javafx.scene.SceneAntialiasing 。
•
Canvas API 。 Canvas API支持直接在由一个图形元素（节点）组成的JavaFX场景区域内绘制。
打印API。 javafx.print包已经在Java SE 8版本中添加，并为JavaFX Printing API提供了公共类。
富文本支持 。 JavaFX 8为JavaFX带来增强的文本支持，包括双向文本和复杂文本脚本，例如控件中的Thai和Hindu，以及文本节点中的多行多样式文本。
•
•
•
多点触控支持 。 JavaFX基于底层平台的功能提供对多点触摸操作的支持。
Hi-DPI支持。 JavaFX 8现在支持Hi-DPI显示器。
硬件加速图形管道 。 JavaFX图形基于图形渲染管线（Prism）。 当使用支持的图形卡或图形处理单元（GPU）时，JavaFX提供平滑的图形，通过Prism快速渲染。 如果系统不具有JavaFX支持的推荐GPU之一，则Prism默认为软件渲染堆栈。
• •
•
高性能媒体引擎 。 媒体管道支持web多媒体内容的回放。 它提供了一个基于GStreamer多媒体框架的稳定，低延迟的媒体框架。
•
自包含应用程序部署 模型。 自包含应用程序包具有所有应用程序资源和Java和JavaFX运行时的私有副本。 它们作为本机可安装包分发，并提供与该操作系统的本机应用程序相同的安装和启动体验。
我可以使用JavaFX构建什么？
使用JavaFX，您可以构建许多类型的应用程序。 通常，它们是网络感知应用程序，它们部署在多个平台上，并在具有音频，视频，图形和动画的高性能现代用户界面中显示信息。
表1-1显示了JavaFX 8.n版本中包含的一些示例JavaFX应用程序的映像。 表1-1示例JavaFX应用程序
示例应用程序 描述 JavaFX合奏 8 Ensemble8是一个演示各种JavaFX功能（包括动画，图表和控件）的示例应用程序的库。 您可以在所有平台上查看和交互每个运行的样本，并阅读其说明。 在桌面平台上，您可以复制每个示例的源代码，调整在几个示例中使 用的示例组件的属性，并在连接到Internet时链接到相 关的API文档.Ensemble8也使用JavaFX for ARM运行。 Modena Modena是一个示例应用程序，演示使用Modena主题的UI组件的外观和感觉。 它给你选择对比Modena和Caspian的主题，并探索这些主题的各个方面。
示例应用程序 描述 3D查看器 3DViewer是一个示例应用程序，允许您使用鼠标或触控板导航和检查3D场景。 3DViewer具有用于OBJ和Maya文件中的一部分功能的导入器。 还为Maya文件提供了导入动画的功能。 （请注意，在Maya文件的情况下，保存为 Maya文件时，应删除所有对象的构造历史记录。） 3DViewer还能够将场景的内容导出为Java或FXML文件。
如何运行示例应用程序？
本节中的步骤说明如何下载和运行可作为单独下载与Java Platform（JDK 8）一起使用的示例应用程序。 注意：
在运行示例JavaFX应用程序之前，您需要在计算机上具有JavaFX运行时库。 在继续执行这些步骤之前，请安装最新版本的JDK 8或最新版本的JRE 。 下载并运行示例应用程序： 1. 转到Java SE下载页面，网址为
http://www.oracle.com/technetwork/java/javase/downloads/ 。 2. 向下滚动以找到JDK 8和JavaFX演示和示例部分。 3. 单击演示和示例下载按钮转到下载页面。
4. 在Java SE Development Kit 8下载页面上，向下滚动到JavaFX演示和示例下载部分。
5. 为正确的操作系统下载zip文件并解压缩文件。
将创建javafx-samples-8.x目录，并包含可用样本的文件。 样本的NetBeans项目位于javafx-samples-8.x\\src目录中。 6. 双击样本的可执行文件。
例如，要运行Ensemble8预构建的示例应用程序，请双击Ensemble8.jar文件。
如何在IDE中运行示例？
您可以使用多个Java开发IDE来开发JavaFX应用程序。 以下步骤说明如何在NetBeans IDE中查看和运行源代码。
要在NetBeans IDE中查看和运行示例源代码，请执行以下操作： 1. 下载样本，如上所述，并提取文件。
2. 从NetBeans 7.4或更高版本的IDE中，加载要查看的样本的项目。
1. 从文件菜单中，选择打开项目 。
2. 在“ 打开项目 ”对话框中，导航到列出样本的目录。 导航路径看起来像这样：
3. . \\javafx_samples-8.x- 3. 在“项目”窗口中，右键单击刚刚打开的项目，然后选择“ 运行” 。 请注意，更新“输出”窗口，并运行和部署样本项目。 如何创建JavaFX应用程序？ 由于JavaFX应用程序是用Java语言编写的，因此您可以使用您最喜欢的编辑器或任何支持Java语言的集成开发环境（IDE）（例如NetBeans，Eclipse或IntelliJ IDEA）来创建JavaFX应用程序。 创建JavaFX应用程序： 1. 转到Java SE下载页面 http://www.oracle.com/technetwork/java/javase/downloads/以使用JavaFX 8. n下载 http://www.oracle.com/technetwork/java/javase/downloads/ 8。 此页面上还提供了获得认证的系统配置和发行说明的链接。 2. 使用JavaFX示例应用程序入门创建简单的应用程序，演示如何使用布局，样式表和视觉效果。 3. 使用JavaFX Scene Builder为JavaFX应用程序设计UI，而无需编码。 您可以将UI组件拖放到工作区，修改其属性，应用样式表，并将生成的代码与其应用程序逻辑集成。 1. 从JavaFX下载页面 http://www.oracle.com/technetwork/java/javase/downloads/下载JavaFX Scene Builder。 2. 按照“JavaFX Scene Builder入门”教程了解详情。 资源 使用以下资源了解有关JavaFX技术的更多信息。 • 从Java SE下载页面下载最新的JDK 8版本和JavaFX示例： http://www.oracle.com/technetwork/java/javase/downloads/ 。 阅读了解JavaFX体系结构 。 浏览JavaFX教程和文章的开发人员。 • • 2了解JavaFX体系结构 本章给出了JavaFX架构和生态系统的高级描述。 图2-1说明了JavaFX平台的架构组件。 图中的部分描述了每个组件以及部件如何互连。 在JavaFX公共API下面是运行JavaFX代码的引擎。 它由包括JavaFX高性能图形引擎（称为Prism）的子组件组成; 一个小而高效的窗口系统，称为Glass; 媒体引擎和web引擎。 虽然这些组件未公开公开，但它们的描述可以帮助您更好地了解运行JavaFX应用程序的方法。 • • 场景图 Java公共API的JavaFX特性 • • • • • • • • • 图形系统 Glass窗口工具包 媒体和图像 Web组件 CSS UI控件 布局 2-D和3-D变换 视觉效果 图2-1 JavaFX架构图 “图2-1 JavaFX体系结构图” 场景图 JavaFX场景图，作为图2-1中顶层的一部分显示，是构建JavaFX应用程序的起点。 它是表示应用程序的用户界面的所有可视元素的节点的分层树。 它可以处理输入并可以渲染。 场景图中的单个元素称为节点。 每个节点都有ID，样式类和边界卷。 除了场景图的根节点之外，场景图中的每个节点具有单个父节点和零个或多个子节点。 它还可以具有以下： • • • • • 效果，如模糊和阴影 不透明度 转换 事件处理程序（如鼠标，键和输入法） 应用程序特定状态 与Swing和抽象窗口工具包（AWT）不同，除了具有控件，布局容器，图像和媒体之外，JavaFX场景图形还包括图形基元，例如矩形和文本。 对于大多数用途，场景图简化了使用UI，尤其是在使用丰富的UI时。 使用javafx.animation API可以快速完成对场景图中的各种图形的动画制作，而声明性方法（如XML doc）也可以很好地工作。 javafx.scene API允许创建和规范几种类型的内容，例如： • 节点 ：形状（2-D和3-D），图像，媒体，嵌入式Web浏览器，文本，UI控件，图表，组和容器 状态 ：转换（节点的定位和方向），视觉效果和内容的其他视觉状态 效果 ：改变场景图形节点外观的简单对象，例如模糊，阴影和颜色调整 • • 有关更多信息，请参阅使用JavaFX场景图文档。 Java公共API的JavaFX特性 图2-1所示的JavaFX体系结构的顶层提供了一组完整的Java公共API，支持丰富的客户端应用程序开发。 这些API为构建丰富的客户端应用程序提供了无与伦比的自由和灵活性。 JavaFX平台将Java平台的最佳功能与全面的沉浸式媒体功能结合到一个直观，全面的一站式开发环境中。 这些Java API的JavaFX功能： • 允许使用强大的Java功能，例如泛型，注释，多线程和Lamda表达式（在Java SE 8中引入）。 使Web开发人员更容易从其他基于JVM的动态语言（如Groovy和JavaScript）使用JavaFX。 允许Java开发人员使用其他系统语言（如Groovy）来编写大型或复杂的JavaFX应用程序。 允许使用绑定，包括支持高性能惰性绑定，绑定表达式，绑定序列表达式和部分绑定重新评估。 替代语言（如Groovy）可以使用此绑定库来引入类似于JavaFX Script的绑定语法。 • • • • 扩展Java集合库以包括可观察列表和映射，这允许应用程序将用户界面连接到数据模型，观察这些数据模型中的更改，并相应地更新相应的UI控件。 JavaFX API和编程模型是JavaFX 1.x产品线的延续。 大多数JavaFX API已直接移植到Java。 一些API（例如布局和媒体）以及许多其他细节已根据从JavaFX 1.x版本的用户收到的反馈得到改进和简化。 JavaFX更多地依赖于Web标准，例如用于样式控制的CSS和用于辅助功能规范的ARIA。 还正在审查使用额外的网络标准。 图形系统 JavaFX图形系统（如图2-1中蓝色所示 ）是JavaFX场景图形层下面的实现细节。 它支持2-D和3-D场景图形。 当系统上的图形硬件不足以支持硬件加速渲染时，它提供软件渲染。 在JavaFX平台上实现两个图形加速管道： • Prism进程渲染作业。 它可以在硬件和软件渲染器上运行，包括3-D。 它负责JavaFX场景的光栅化和渲染。 基于正在使用的设备，以下多个渲染路径是可能的： o o o o Windows XP和Windows Vista上的DirectX 9 Windows 7上的DirectX 11 Mac，Linux，Embedded上的OpenGL 当硬件加速不可能时的软件渲染 在可能时使用完全硬件加速路径，但是当不可用时，使用软件渲染路径，因为软件渲染路径已经在所有Java运行时环境（JRE）中分布。 这在处理3-D场景时特别重要。 然而，当使用硬件渲染路径时，性能更好。 • Quantum Toolkit将 Prism和Glass Windowing Toolkit捆绑在一起，并使它们可用于堆栈中上面的JavaFX层。 它还管理与渲染和事件处理相关的线程规则。 Glass窗口工具包 Glass窗口工具包，如图2-1中间部分所示 ，是JavaFX图形堆栈中的最底层。 它的主要职责是提供本地操作服务，例如管理窗口，计时器和曲面。 它用作将JavaFX平台连接到本机操作系统的平台相关层。 Glass工具包还负责管理事件队列。 与管理自己的事件队列的抽象窗口工具包（AWT）不同，Glass工具包使用本机操作系统的事件队列功能来调度线程使用。 与AWT不同，Glass工具包与JavaFX应用程序在同一个线程上运行。 在AWT中，AWT的本机一半在一个线程上运行，Java级别在另一个线程上运行。 这引入了很多问题，其中许多在JavaFX中通过使用单个JavaFX应用程序线程方法来解决。 线程 系统在任何给定时间运行以下线程中的两个或多个。 • JavaFX应用程序线程 ：这是JavaFX应用程序开发人员使用的主线程。 任何“活”场景，它是一个窗口的一部分的场景，必须从这个线程访问。 场景图可以在后台线程中创建和操作，但是当其根节点附加到场景中的任何活动对象时，必须从JavaFX应用程序线程访问该场景图。 这使开发人员能够在背景线程上创建复杂的场景图形，同时保持“现场”场景的动画平滑和快速。 JavaFX应用程序线程是与Swing和AWT事件分派线程（EDT）不同的线程，因此在将JavaFX代码嵌入到Swing应用程序时必须小心。 • Prism render thread ：这个线程处理与事件分派器分开的渲染。 它允许在处理帧N + 1时渲染帧N. 这种执行并发处理的能力是一个很大的优势，尤其是在具有多个处理器的现代系统上。 Prism渲染线程还可以具有多个光栅化线程，以帮助卸载需要在渲染中完成的工作。 • 媒体线程 ：此线程在后台运行，并通过使用JavaFX应用程序线程通过场景图形同步最新的帧。 脉冲 脉冲是向JavaFX场景图表指示是时候使场景图上的元素的状态与Prism同步的事件。 脉冲以每秒60帧（fps）的最大速度被节流，并且每当动画在场景图上运行时被触发。 即使当动画未运行时，也会在场景图中的某些内容发生更改时安排脉冲。 例如，如果改变按钮的位置，则调度脉冲。 当触发脉冲时，场景图上的元素的状态向下同步到渲染层。 脉冲使应用程序开发人员能够异步处理事件。 这个重要特性允许系统批量和执行脉冲上的事件。 布局和CSS也与脉冲事件相关。 场景图中的许多更改可能导致多个布局或CSS更新，这可能会严重降低性能。 系统每个脉冲自动执行一次CSS和布局传递一 次，以避免性能下降。 应用程序开发人员还可以根据需要手动触发布局传递，以在脉冲之前进行测量。 Glass窗口工具包负责执行脉冲事件。 它使用高分辨率本机定时器来执行。 媒体和图像 可以通过javafx.scene.media API获得JavaFX媒体功能。 JavaFX支持视觉和音频媒体。 支持MP3，AIFF和WAV音频文件和FLV视频文件。 JavaFX媒体功能是作为三个的组件提供的：Media对象表示媒体文件，MediaPlayer播放媒体文件，MediaView是显示媒体的节点。 图2-1中绿色所示的媒体引擎组件的设计考虑了性能和稳定性，并提供跨平台的一致行为。 有关更多信息，请参阅将媒体资产合并到JavaFX应用程序文档。 Web组件 Web组件是基于Webkit的JavaFX UI控件，它通过其API提供Web查看器和完整的浏览功能。 此Web Engine组件（如图2-1中橙色所示）基于WebKit，它是一个支持HTML5，CSS，JavaScript，DOM和SVG的开放源代码Web浏览器引擎。 它使开发人员能够在其Java应用程序中实现以下功能： • • • • • • • 从本地或远程URL呈现HTML内容 支持历史记录并提供后退和前进导航 重新加载内容 将效果应用于Web组件 编辑HTML内容 执行JavaScript命令 处理事件 此嵌入式浏览器组件由以下类组成： • • WebEngine提供基本的网页浏览功能。 WebView封装了一个WebEngine对象，将HTML内容合并到应用程序的场景中，并提供了应用效果和转换的字段和方法。 它是Node类的扩展。 此外，Java调用可以通过JavaScript控制，反之亦然，以允许开发人员充分利用两种环境。 有关JavaFX嵌入式浏览器的更详细的概述，请参阅将HTML内容添加到JavaFX应用程序文档。 CSS JavaFX级联样式表（CSS）提供了将定制样式应用于JavaFX应用程序的用户界面，而无需更改任何应用程序的源代码。 CSS可以应用于JavaFX场景图中的任何节点，并以异步方式应用于节点。 JavaFX CSS样式也可以在运行时轻松地分配给场景，从而允许应用程序的外观动态更改。 图2-2演示了将两种不同的CSS样式应用于同一组UI控件。 图2-2 CSS样式表示例 “图2-2 CSS样式表示例” JavaFX CSS基于W3C CSS版本2.1规范，从版本3的当前工作的一些补充。JavaFX CSS支持和扩展被设计为允许JavaFX CSS样式表被任何兼容的CSS解析器干净地解析，甚至不支持JavaFX扩展。 这使得能够将用于JavaFX的CSS样式和用于其他目的（例如用于HTML页面）的CSS样式混合到单个样式表中。 所有JavaFX属性名称都以“ -fx- ”的供应商扩展名开头，包括似乎与标准HTML CSS兼容的扩展名，因为一些JavaFX值具有略微不同的语义。 有关JavaFX CSS的更多详细信息，请参阅使用CSS抽象JavaFX应用程序文档。 UI控件 通过使用场景图中的节点构建通过JavaFX API可用的JavaFX UI控件。 他们可以充分利用JavaFX平台的视觉丰富的功能，并可跨不同平台移植。 JavaFX CSS允许UI控件的主题和外观。 图2-3显示了当前支持的一些UI控件。 这些控件驻留在javafx.scene.control包中。 图2-3 JavaFX UI控件示例 “图2-3 JavaFX UI控件示例” 有关所有可用的JavaFX UI控件的更多详细信息，请参阅javafx.scene.control包中的使用JavaFX UI控件和API文档 。 布局 布局容器或窗格可以用于允许在JavaFX应用的场景图内的UI控件的灵活和动态布置。 JavaFX布局API包括自动化常见布局模型的以下容器类： • BorderPane类在顶部，底部，右侧，左侧或中心区域中BorderPane其内容节点。 HBox类将它的内容节点水平地布置在单个行中。 VBox类在单个列中VBox布置其内容节点。 StackPane类将其内容节点放置在从后到前的单个堆栈中。 GridPane类使开发人员能够创建一个灵活的行和列的网格，以布置内容节点。 FlowPane类将其内容节点布置在水平或垂直“流”中，以指定宽度（对于水平）或高度（对于垂直）边界进行包装。 TilePane类将其内容节点放置在统一大小的布局单元格或图块中 AnchorPane类使开发人员能够创建到布局的顶部，底部，左侧或中心的锚节点。 • • • • • • • 为了实现期望的布局结构，不同的容器可以嵌套在JavaFX应用程序中。 要了解有关如何使用布局的更多信息，请参阅在JavaFX中使用布局文章。 有关JavaFX布局API的更多信息，请参阅javafx.scene.layout包的API文档。 2-D和3-D变换 可以使用以下javafx.scene.tranform类在JavaFX场景图中的每个节点在xy坐标中进行转换： • translate - 将节点从一个地方沿着x，y，z平面相对于其初始位置移动到另一个地方。 scale - 调整节点大小以在x，y，z平面中显示更大或更小，具体取决于缩放因子。 shear - 旋转一个轴，使x轴和y轴不再垂直。 节点的坐标被移位指定的乘数。 rotate - 围绕场景的指定枢轴点旋转节点。 • • • • affine - 执行从2-D / 3-D坐标到其他2-D / 3-D坐标的线性映射，同时保留线的“直线”和“平行”属性。 此类应与Translate ， Scale ， Rotate或Shear变换类一起使用，而不是直接使用。 要了解有关使用转换的详细信息，请参阅在JavaFX文档中应用转换 。 有关javafx.scene.transform API类的更多信息，请参阅API文档 。 视觉效果 在JavaFX场景图形中丰富的客户端接口的开发涉及使用视觉效果或效果来实时增强JavaFX应用程序的外观。 JavaFX效果主要是基于图像像素的，因此，它们采用场景图中的一组节点，将其渲染为图像，并将指定的效果应用于它。 在JavaFX中可用的一些视觉效果包括使用以下类： • • • Drop Shadow - 在应用效果的内容后面呈现给定内容的阴影。 Reflection - 在实际内容下面呈现反映的内容版本。 Lighting - 模拟发出给定内容的光源，并且可以为平面对象提供更逼真，三维的外观。 有关如何使用一些可用视觉效果的示例，请参阅创建可视化效果文档。 有关所有可用的视觉效果类的更多信息，请参阅javafx.scene.effect软件包的API文档 。 JavaFX示例应用程序入门 这个示例应用程序集合旨在帮助您开始使用常见的JavaFX任务，包括使用布局，控件，样式表，FXML和视觉效果。 Hello World，JavaFX Style JavaFX中的表单设计 CSS的花式设计 用FXML的用户界面设计 动画形状和视觉效果 3 Hello World，JavaFX Style 教你如何创建和构建JavaFX应用程序的最好方法是使用“Hello World”应用程序。 本教程的另一个好处是，它使您能够测试您的JavaFX技术是否已正确安装。 本教程中使用的工具是NetBeans IDE 7.4。 在开始之前，请确保您使用的NetBeans IDE的版本支持JavaFX 8.有关详细信息，请参阅Java SE 8下载页面的“ 认证的系统配置”部分。 构建应用程序 1. 从文件菜单中，选择新建项目 。 2. 在JavaFX应用程序类别中，选择JavaFX应用程序 。 单击下一步 。 3. 将项目命名为HelloWorld ，然后单击完成 。 NetBeans打开HelloWorld.java文件，并使用基本Hello World应用程序的代码填充它，如示例3-1所示 。 示例3-1 Hello World package helloworld; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class HelloWorld extends Application { public void start（Stage primaryStage）{ Button btn = new Button（）; btn.setText（“Say'Hello World'”）; btn.setOnAction（new EventHandler public void handle（ActionEvent event）{ System.out.println（“Hello World！”）; }} }）; StackPane root = new StackPane（）; root.getChildren（）。add（btn）; Scene scene = new Scene(root, 300, 250); primaryStage.setTitle（“Hello World！”）; primaryStage.setScene（scene）; primaryStage.show（）; }} public static void main（String [] args）{ launch（args）; }} }} 下面是关于JavaFX应用程序的基本结构的重要事项： • JavaFX应用程序的主类扩展了javafx.application.Application类。 start()方法是所有JavaFX应用程序的主要入口点。 JavaFX应用程序通过阶段和场景来定义用户界面容器。 JavaFX Stage类是顶级JavaFX容器。 JavaFX Scene类是所有内容的容器。 示例3-1创建舞台和场景，并使场景在给定像素大小中可见。 • • 在JavaFX中，场景的内容被表示为节点的分层场景图。 在本示例中，根节点是StackPane对象，它是可调整大小的布局节点。 这意味着根节点的大小跟踪场景的大小，并在用户调整阶段大小时更改。 • 根节点包含一个子节点，带文本的按钮控件，以及当按下按钮时打印消息的事件处理程序。 • 当使用JavaFX Packager工具创建应用程序的JAR文件时，JavaFX应用程序不需要main()方法，JavaFX Packager工具将JavaFX Launcher嵌入到JAR文件中。 但是，包含main()方法是有用的，因此您可以运行在没有JavaFX Launcher的情况下创建的JAR文件，例如在使用其中未完全集成JavaFX工具的IDE时。 此外，嵌入JavaFX代码的Swing应用程序需要main()方法。 图3-1显示了Hello World应用程序的场景图。 有关场景图的更多信息，请参阅使用JavaFX场景图 。 图3-1 Hello World Scene Graph “图3-1 Hello World Scene Graph”的描述 运行应用程序 1. 在“项目”窗口中，右键单击HelloWorld项目节点，然后选择“ 运行” 。 2. 点击问好世界按钮。 3. 验证文本“Hello World！”是否打印到NetBeans输出窗口。 图3-2显示了Hello World应用程序，JavaFX风格。 图3-2 Hello World，JavaFX风格 “图3-2 Hello World，JavaFX风格”的描述 下一步去哪里 以下是基本的Hello World教程，但继续阅读有关开发JavaFX应用程序的更多课程： • 在JavaFX中创建表单教授了屏幕布局的基本知识，如何向布局添加控件以及如何创建输入事件。 使用JavaFX CSS的花式表单提供了简单的样式技巧来增强您的应用程序，包括添加背景图像和样式按钮和文本。 使用FXML创建用户界面显示了创建登录用户界面的备用方法。 FXML是一种基于XML的语言，它提供了用于构建与代码的应用程序逻辑分开的用户界面的结构。 • • • JavaFX中的动画和视觉效果展示了如何通过添加时间轴动画和混合效果使应用程序生命。 4在JavaFX中创建表单 创建表单是开发应用程序时的常见活动。 本教程将向您介绍屏幕布局的基础知识，如何向布局窗格添加控件以及如何创建输入事件。 在本教程中，您将使用JavaFX构建如图4-1所示的登录表单。 图4-1登录窗体 “图4-1登录表单” 本“入门”教程中使用的工具是NetBeans IDE。 开始之前，请确保您使用的NetBeans IDE的版本支持JavaFX 8.有关详细信息，请参阅Java SE下载页面的“认证的系统配置”页面。 创建项目 您的第一个任务是在NetBeans IDE中创建一个JavaFX项目并将其命名为Login： 1. 从文件菜单中，选择新建项目 。 2. 在JavaFX应用程序类别中，选择JavaFX应用程序 。 单击下一步 。 3. 命名项目登录并单击完成 。 当您创建JavaFX项目时，NetBeans IDE提供了一个Hello World应用程序作为起点，如果您遵循Hello World教程，您已经看到了它。 4. 删除NetBeans IDE生成的start()方法，并将其替换为示例4-1中的代码。 例4-1应用阶段 public void start（Stage primaryStage）{ primaryStage.setTitle（“JavaFX Welcome”）; primaryStage.show（）; }} 替换后 package helloworld; import javafx.application.Application; import javafx.stage.Stage; public class HelloWorld extends Application { @Override public void start(Stage primaryStage) { primaryStage.setTitle(\"JavaFX Welcome\"); primaryStage.show(); } public static void main(String[] args) { launch(args); } } 提示：将示例代码添加到NetBeans项目中后，请按Ctrl（或Cmd）+ Shift + I导入所需的软件包。 当有可选择的import语句时，选择以javafx开头的语句。 创建GridPane布局 对于登录表单，使用GridPane布局，因为它使您能够创建在其中布置控件的行和列的灵活网格。 您可以将控件放在网格中的任何单元格中，并且可以根据需要使控件跨单元格。 创建GridPane布局的代码在示例4-2中 。在代码primaryStage.show(); 前添加 示例4-2具有间隙和填充属性的网格面板 GridPane grid = new GridPane(); grid.setAlignment(Pos.CENTER); grid.setHgap(10); grid.setVgap(10); grid.setPadding(new Insets(25, 25, 25, 25)); Scene scene = new Scene(grid, 300, 275); primaryStage.setScene(scene); 运行结果： 示例4-2创建一个GridPane对象并将其分配给名为grid的变量。 alignment属性将网格的默认位置从场景的左上角更改为中心。 gap属性管理行和列之间的间距，而padding属性管理网格窗格边缘周围的空间。 插入顺序为顶部，右侧，底部和左侧。 在这个例子中，每边有25个像素的填充。 场景是使用网格窗格作为根节点创建的，这是使用布局容器时的常见做法。 因此，当窗口被调整大小时，网格窗格内的节点根据其布局约束来调整大小。 在此示例中，当您增加或缩小窗口时，网格窗格保持在中心。 填充属性确保在使窗口变小时在网格窗格周围有填充。 此代码将场景宽度和高度设置为300乘275.如果不设置场景尺寸，则场景默认为显示其内容所需的最小大小。 添加文本，标签和文本字段 看图4-1 ，您可以看到表单需要标题“欢迎”以及用于从用户收集信息的文本和密码字段。 创建这些控件的代码在示例4-3中 。 将此代码添加到设置网格填充属性的行后面。 例4-3控件 Text scenetitle = new Text(\"Welcome\"); scenetitle.setFont(Font.font(\"Tahoma\ grid.add(scenetitle, 0, 0, 2, 1); Label userName = new Label(\"User Name:\"); grid.add(userName, 0, 1); TextField userTextField = new TextField(); grid.add(userTextField, 1, 1); Label pw = new Label(\"Password:\"); grid.add(pw, 0, 2); PasswordField pwBox = new PasswordField(); grid.add(pwBox, 1, 2); 插入后代码： package helloworld; import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.PasswordField; import javafx.scene.control.TextField; import javafx.scene.layout.GridPane; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.scene.text.Text; import javafx.stage.Stage; public class HelloWorld extends Application { @Override public void start(Stage primaryStage) { primaryStage.setTitle(\"JavaFX Welcome\"); GridPane grid = new GridPane(); grid.setAlignment(Pos.CENTER); grid.setHgap(10); grid.setVgap(10); grid.setPadding(new Insets(25, 25, 25, 25)); Text scenetitle = new Text(\"Welcome\"); scenetitle.setFont(Font.font(\"Tahoma\ grid.add(scenetitle, 0, 0, 2, 1); Label userName = new Label(\"User Name:\"); grid.add(userName, 0, 1); TextField userTextField = new TextField(); grid.add(userTextField, 1, 1); Label pw = new Label(\"Password:\"); grid.add(pw, 0, 2); PasswordField pwBox = new PasswordField(); grid.add(pwBox, 1, 2); Scene scene = new Scene(grid, 300, 275); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } 运行结果： （Name 没有显示出来，右下角拖动放大，就会显示出来） 第一行创建一个无法编辑的Text对象，将文本设置为Welcome ，并将其分配给名为scenetitle的变量。 下一行使用setFont()方法设置scenetitle变量的字体系列，权重和大小。 在样式绑定到变量时，使用内联样式是合适的，但是使用样式表对样式化用户界面元素的更好技术。 在下一个教程中， 使用JavaFX CSS的Fancy Forms ，您将使用样式表替换内联样式。 grid.add（）方法将场景标题变量添加到布局网格。 网格中的列和行的编号从零开始，并且在第0列，第0行中添加scenetitle。grid.add（）方法的最后两个参数将列跨度设置为2，将行跨度设置为1。 下一行创建一个Label对象，在第0列，第1行创建一个文本User Name ，并且可以编辑一个Text Field对象。 文本字段将添加到网格窗格的第1列第1行。将创建密码字段和标签，并以类似方式将其添加到网格窗格。 使用网格窗格时，可以显示网格线，这对于调试目的很有用。 在这种情况下，您可以在添加密码字段的行之后添加grid.setGridLinesVisible(true) 。 然后，当运行应用程序时，您将看到网格列和行的行以及间隙属性， 如图4-2所示。 图4-2带网格线的登录表单 “图4-2带网格线的登录表单” 添加按钮和文本 应用程序所需的最后两个控件是用于提交数据的Button控件和用于在用户按下按钮时显示消息的Text控件。 首先，创建按钮并将其放置在右下角，这是执行影响整个表单的操作的按钮的常见位置。 代码在示例4-4中 。 在场景的代码之前添加此代码。 示例4-4按钮 Button btn = new Button(\"Sign in\"); HBox hbBtn = new HBox(10); hbBtn.setAlignment(Pos.BOTTOM_RIGHT); hbBtn.getChildren().add(btn); grid.add(hbBtn, 1, 4); 运行结果： 第一行创建一个名为btn标签为Sign In的按钮，第二行创建一个名为hbBtn的HBox布局窗格，其间距为10像素。 HBox窗格为按钮设置不同于应用于网格窗格中其他控件的对齐方式。 alignment属性具有Pos.BOTTOM_RIGHT的值，该值将节点垂直放置在空间的底部，并在水平空间的右边缘。 该按钮作为HBox窗格的子级添加，HBox窗格添加到第1列第4行的网格中。 现在，添加一个Text控件来显示消息，如例4-5所示。 在场景的代码之前添加此代码。 示例4-5文本 final Text actiontarget = new Text(); grid.add(actiontarget, 1, 6); 现在的形式如图4-3所示。 在您完成本教程的下一部分（ 处理事件的添加代码）之前，您将看不到文本消息。 图4-3使用按钮登录窗体 “图4-3带有按钮的登录表单” 添加代码以处理事件 最后，当用户按下按钮时，使按钮显示文本消息。 添加示例4-6中的代码到场景的代码之前。 示例4-6按钮事件 btn.setOnAction(new EventHandler public void handle(ActionEvent e) { actiontarget.setFill(Color.FIREBRICK); actiontarget.setText(\"Sign in button pressed\"); } }); setOnAction()方法用于注册一个事件处理程序，将用户按下Sign in 按钮的actiontarget对象设置为“ Sign in button pressed ”按钮。 actiontarget对象的颜色设置为firebrick red。 运行应用程序 完整代码： package helloworld; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.PasswordField; import javafx.scene.control.TextField; import javafx.scene.layout.GridPane; import javafx.scene.layout.HBox; import javafx.scene.paint.Color; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.scene.text.Text; import javafx.stage.Stage; //当有可选择的import语句时，选择以javafx开头的语句 public class HelloWorld extends Application { @Override public void start(Stage primaryStage) {//start()方法是所有JavaFX应用程序的主要入口点 primaryStage.setTitle(\"JavaFX Welcome\");//JavaFX Stage类是顶级JavaFX容器。 JavaFX Scene类是所有内容的容器 GridPane grid = new GridPane();//创建一个GridPane对象并将其分配给名为grid的变量 grid.setAlignment(Pos.CENTER);//alignment属性将网格的默认位置从场 景的左上角更改为中心 grid.setHgap(10);//gap属性管理行和列之间的间距 grid.setVgap(10); grid.setPadding(new Insets(25, 25, 25, 25));//padding属性管理网格窗格边缘周围的空间 Text scenetitle = new Text(\"Welcome\");//创建一个无法编辑的Text对象，将文本设置为Welcome ，并将其分配给名为scenetitle的变量 scenetitle.setFont(Font.font(\"Tahoma\FontWeight.NORMAL, 20));//使用setFont()方法设置scenetitle变量的字体系列，权重和大小 grid.add(scenetitle, 0, 0, 2, 1);//grid.add（）方法将场景标题变量添加到布局网格。 网格中的列和行的编号从零开始，并且在第0列，第0行中添加scenetitle。grid.add（）方法的最后两个参数将列跨度设置为2，将行跨度设置为1。 Label userName = new Label(\"User Name:\");//创建一个Label对象， grid.add(userName, 0, 1);//在第0列，第1行创建一个文本User Name TextField userTextField = new TextField();//并且可以编辑一个Text Field对象 grid.add(userTextField, 1, 1);//文本字段将添加到网格窗格的第1列第1行 Label pw = new Label(\"Password:\");//将创建密码字段和标签,并以类似方式将其添加到网格窗格 grid.add(pw, 0, 2); PasswordField pwBox = new PasswordField(); grid.add(pwBox, 1, 2); //grid.setGridLinesVisible(true);//使用网格窗格时，可以显示网格线，这对于调试目的很有用 Button btn = new Button(\"Sign in\");//创建一个名为btn标签为Sign In的按钮 HBox hbBtn = new HBox(10);//创建一个名为hbBtn的HBox布局窗格，其间距为10像素,HBox窗格为按钮设置不同于应用于网格窗格中其他控件的对齐方式 hbBtn.setAlignment(Pos.BOTTOM_RIGHT);//alignment属性具有Pos.BOTTOM_RIGHT的值，该值将节点垂直放置在空间的底部，并在水平空间的右边缘 hbBtn.getChildren().add(btn);//该按钮作为HBox窗格的子级添加 grid.add(hbBtn, 1, 4);//HBox窗格添加到第1列第4行的网格中 final Text actiontarget = new Text(); grid.add(actiontarget, 1, 6); btn.setOnAction(new EventHandler //setOnAction()方法用于注册一个事件处理程序，将用户按下Sign in 按钮的actiontarget对象设置为“ Sign in button pressed ”按钮。 actiontarget对象的颜色设置为firebrick red。 @Override public void handle(ActionEvent e) { actiontarget.setFill(Color.FIREBRICK); actiontarget.setText(\"Sign in button pressed\"); } }); Scene scene = new Scene(grid, 300, 275); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } 右键单击“项目”窗口中的“ 登录”项目节点，选择“ 运行” ，然后单击“登录”按钮。 结果如图4-4所示。 如果遇到问题，请查看Login.java文件中包含在可下载的Login.zip文件中的代码。 图4-4最终登录表单 “图4-4最终登录表单” 下一步去哪里 基本形式教程到此结束，但您可以继续阅读有关开发JavaFX应用程序的以下教程。 • 使用JavaFX CSS的花式表单提供了有关如何添加背景图像并从根本上更改登录表单中文本，标签和按钮的样式的提示。 使用FXML创建用户界面显示了创建登录用户界面的备用方法。 FXML是一种基于XML的语言，它提供了用于构建与代码的应用程序逻辑分开的用户界面的结构。 • • 在JavaFX中使用布局解释了内置的JavaFX布局窗格，以及使用它们的提示和技巧。 还可以尝试JavaFX示例，您可以从Java SE下载页面的JDK演示和示例部分下载，网址为http://www.oracle.com/technetwork/java/javase/downloads/ 。 Ensemble示例包含布局及其源代码的示例。 5使用JavaFX CSS的花式表单 本教程通过添加级联样式表（CSS）来使您的JavaFX应用程序看起来具有吸引力。 您开发设计，创建.css文件，并应用新样式。 在本教程中，您将使用一个使用默认样式的标签，按钮和背景颜色的登录表单，并且通过一些简单的CSS修改，将其转换为一个风格化的应用程序， 如图5-1所示 。 图5-1带和不带CSS的登录窗口 “图5-1带有和不带CSS的登录窗口” 本“入门”教程中使用的工具是NetBeans IDE。 开始之前，请确保您使用的NetBeans IDE的版本支持JavaFX 8.有关详细信息，请参阅Java SE下载页面的“认证的系统配置”页面。 创建项目 如果从一开始就遵循入门指南，那么您已经创建了本教程所需的登录项目。 如果没有，请通过右键单击Login.zip并将其保存到文件系统下载Login项目。 从zip文件解压缩文件，然后在NetBeans IDE中打开项目。 创建CSS文件 您的第一个任务是创建一个新的CSS文件，并将其保存在与应用程序的主类相同的目录中。之后，必须使JavaFX应用程序了解新添加的级联样式表。 1. 在NetBeans IDE项目窗口中，展开Login（自己的项目也行，比如：HelloWord，请把Login替换为HelloWord Login.class.getResource(\"Login.css\").toExternalForm()替换为：HelloWord.class.getResource(\"Login.css\").toExternalForm()）项目节点，然后展开源包目录节点。 2. 右键单击源包Login目录下的文件夹，然后选择新建 ，然后选择其他 。 3. 在“新建文件”对话框中，选择“ 其他” ，然后选择“ 级联样式表” ，然后单击“ 下一步” 。 4. 输入文件名Login ，并确保文件夹文本字段值为src\\login 。 5. 单击“完成” 。 6. 在Login.java文件中，初始化Scene类的style sheets变量以指向级联样式表，方法是包括下面粗体显示的代码行，如示例5-1所示 。 示例5-1初始化样式表变量 Scene scene = new Scene(grid, 300, 275); primaryStage.setScene(scene); scene.getStylesheets().add(Login.class.getResource(\"Login.css\").toExternalForm()); primaryStage.show(); 此代码在NetBeans项目的src\\login目录中查找样式表。 添加背景图片 背景图片有助于使您的形式更具吸引力。 在本教程中，您将添加带亚麻样纹理的灰色背景。 首先，右键单击background.jpg图像并将其保存到Login NetBeans项目的src\\login文件夹中，以下载背景图像。 现在，将background-image属性的代码添加到CSS文件。 记住路径是相对于样式表的。 因此，在示例5-2的代码中， background.jpg图像与Login.css文件在同一Login.css中。 示例5-2背景图像 .root { -fx-background-image: url(\"background.jpg\"); } 背景图像应用于.root样式，这意味着它应用于Scene实例的根节点。 样式定义包括属性名称（ -fx-background-image ）和属性值（ url(”background.jpg”) ）。 图5-2显示了具有新灰色背景的登录表单。 图5-2灰色亚麻背景 “图5-2灰色亚麻背景” 设置标签样式 要增强的下一个控件是标签。 您将使用.label样式类，这意味着样式将影响表单中的所有标签。 代码在示例5-3中 。 示例5-3字体大小，填充，重量和对标签的影响 .label { -fx-font-size: 12px; -fx-font-weight: bold; -fx-text-fill: #333333; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } 此示例增加字体大小和重量，并应用灰色的阴影（＃333333）。 阴影的目的是添加深灰色文本和浅灰色背景之间的对比度。 有关drop shadow属性的参数的详细信息，请参阅“ JavaFX CSS参考指南”中有关效果的部分。 增强的用户名和密码标签如图5-3所示 。 图5-3带阴影的更大，更粗的标签 “图5-3带阴影的更大，更粗的标签” 样式文本 现在，以下面的形式在两个Text对象上创建一些特殊效果： scenetitle ，其中包括Welcome文本和actiontarget ，这是用户按“登录”按钮时返回的文本。 您可以对以不同方式使用的Text对象应用不同的样式。 1. 在Login.java文件中，删除以下代码行，定义当前为文本对象设置的内联样式： scenetitle.setFont(Font.font(”Tahoma”, FontWeight.NORMAL, 20)); actiontarget.setFill(Color.FIREBRICK); 通过切换到CSS内联样式，您将设计与内容分离。 这种方法使得设计者更容易控制风格而不必修改内容。 2. 通过使用Node类的setID()方法为每个文本节点创建一个ID：以粗体形式添加以下行，以使它们显示如示例5-4所示。 例5-4创建文本节点的ID text scenetitle = new Text（“Welcome”）; scenetitle.setId（“welcome-text”）; ... ... grid.add（actiontarget，1,6）; actiontarget.setId（“actiontarget”）; 3. 在Login.css文件中，定义welcome-text和actiontarget IDs的样式属性。 对于样式名称，请使用前面带有数字符号（＃）的ID，如示例5-5所示 。 示例5-5文本效果 ＃welcome-text { -fx-font-size：32px; -fx-font-family：“Arial Black”; -fx-fill：＃818181; -fx-effect：innershadow（three-pass-box，rgba（0,0,0,0.7），6，0.0，0，2）; }} #actiontarget { -fx-fill：FIREBRICK; -fx-font-weight：bold; -fx-effect：dropshadow（gaussian，rgba（255,255,255,0.5），0,0,0,1）; }} 欢迎文本的大小增加到32点，字体更改为Arial Black。 文本填充颜色设置为深灰色（＃818181），并应用内部阴影效果，创建压纹效果。 您可以通过将文本填充颜色更改为背景的较暗版本，将内阴影应用于任何颜色。 有关内部阴影属性的参数的详细信息，请参阅“ JavaFX CSS参考指南”中有关效果的部分。 对于样式定义actiontarget类似于你以前见过的东西。 图5-4显示了两个Text对象的字体更改和阴影效果。 图5-4带阴影效果的文本 “图5-4带阴影效果的文本” 按钮样式 下一步是设置按钮的样式，当用户将鼠标悬停在其上时，可以更改样式。 此更改将向用户指示该按钮是交互式的，这是一种标准设计实践。 首先，通过添加示例5-6中的代码来创建按钮的初始状态的样式。 此代码使用.button样式类选择器，以便如果您以后在表单中添加一个按钮，则新按钮也将使用此样式。 示例5-6按钮的阴影 .button { -fx-text-fill: white; -fx-font-family: \"Arial Narrow\"; -fx-font-weight: bold; -fx-background-color: linear-gradient(#61a2b1, #2A5058); -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 ); } 现在，当用户将鼠标悬停在按钮上时，创建略有不同的外观。 你使用悬浮伪类来做到这一点。 伪类包括类的选择器和由冒号（:)分隔的状态的名称，如例5-7所示。 示例5-7按钮悬停样式 .button：hover { -fx-background-color：linear-gradient（＃2A5058，＃61a2b1）; }} 图5-5显示了具有新的蓝灰色背景和白色粗体文本的按钮的初始和悬停状态。 图5-5初始和悬停按钮状态 “图5-5初始和悬停按钮状态” 图5-6显示了最终的应用。 图5-6最终样式化应用程序 “图5-6最终样式化应用程序” 下一步去哪里 这里有一些事情，你可以尝试下一个： • 看看你可以使用CSS创建。 一些文档可以帮助你使用CSS Skinting JavaFX应用程序，使用CSS的 样式图表和JavaFX CSS参考指南。 “JavaFX Scene Builder用户指南”的“Skinning with CSS”和“CSS Analyzer”部分还提供了有关如何使用JavaFX Scene Builder工具来实现JavaFX FXML布局的信息。 • 有关如何使用CSS创建常用按钮样式的示例，请参阅使用CSS样式FX按钮 。 6使用FXML创建用户界面 本教程介绍了使用JavaFX FXML的优点，这是一种基于XML的语言，它提供了构建与代码的应用程序逻辑分开的用户界面的结构。 如果您从头开始创建此文档，那么您已经了解了如何使用JavaFX创建登录应用程序。 在这里，您使用FXML创建相同的登录用户界面，将应用程序设计与应用程序逻辑分开，从而使代码更易于维护。 您在本教程中构建的登录用户界面如图6-1所示 。 图6-1登录用户界面 “图6-1登录用户界面” 本教程使用NetBeans IDE。 确保您使用的NetBeans IDE的版本支持JavaFX 8.有关详细信息，请参阅Java SE下载页面的“认证的系统配置”部分。 设置项目 您的第一个任务是在NetBeans IDE中设置JavaFX FXML项目： 1. 从文件菜单中，选择新建项目 。 2. 在JavaFX应用程序类别中，选择JavaFX FXML应用程序 。 单击下一步 。 3. 将项目命名为FXMLExample ，然后单击完成 。 NetBeans IDE将打开一个包含基本Hello World应用程序代码的FXML项目。 该应用程序包括三个文件： o FXMLExample.java. 此文件处理FXML应用程序所需的标准Java代码。 FXMLDocument.fxml. 这是您定义用户界面的FXML源文件。 FXMLDocumentController.java. 这是用于处理鼠标和键盘输入的控制器文件。 o o 4. 将FXMLDocumentController.java重命名为F XMLExampleController.java ，以便名称对此应用程序更有意义。 1. 在项目窗口中，右键单击FXMLDocumentController.java并选择重构，然后重命名 。 2. 输入FXMLExampleController ，然后单击重构 。 5. 将FXMLDocument.fxml重命名为fxml_example.fxml. 0. 右键单击FXMLDocument.fxml并选择重命名 。 1. 输入fxml_example并单击“确定” 。 加载FXML源文件 您编辑的第一个文件是FXMLExample.java文件。 此文件包括用于设置应用程序主类和用于定义舞台和场景的代码。 更具体到FXML，该文件使用FXMLLoader类，它负责加载FXML源文件并返回结果对象图。 在示例6-1中以粗体显示更改。 例6-1 FXMLExample.java 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语句，使您的代码看起来像示例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语句。 创建GridPane布局 由NetBeans生成的Hello World应用程序使用AnchorPane布局。 对于登录表单，您将使用GridPane布局，因为它可以创建用于布置控件的行和列的灵活网格。 删除AnchorPane布局及其子代，并将其替换为示例6-3中的GridPane布局。 示例6-3 GridPane布局 在本应用程序中， GridPane布局是FXML文档的根元素，因此具有两个属性。 在标记中指定基于控制器的事件处理程序时，需要fx:controller属性。 xmlns:fx属性始终是必需的，并指定fx命名空间。 代码的其余部分控制网格窗格的对齐和间距。 alignment属性将网格的默认位置从场景的左上角更改为中心。 gap属性管理行和列之间的间距，而padding属性管理网格窗格边缘周围的空间。 当窗口被调整大小时，网格窗格内的节点根据其布局约束来调整大小。 在此示例中，当您增加或缩小窗口时，网格保持在中心。 填充属性确保在窗口变小时在网格周围有填充。 添加文本和密码字段 回顾图6-1 ，您可以看到登录表单需要标题“Welcome”以及用于从用户收集信息的文本和密码字段。 示例6-4中的代码是GridPane布局的一部分，必须放在语句之上。 示例6-4文本，标签，文本字段和密码字段控件
Copyright © 2019- baoaiwan.cn 版权所有 赣ICP备2024042794号-3
违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务