第 1 课：JavaFX GUI 简介

 第 1 课：JavaFX GUI 简介

本课介绍 JavaFX API 中可用的基本功能的可视指导。其中包含图形对象、组件、效果、文本模式、颜色方案和布局模式的屏幕抓图。已为所有可视指导提供了源文件。

 

目录

 

-	用户界面元素
-	颜色
-	形状和填充样式
-	文本
-	效果
-	变换
-	布局
-	光标

 

用户界面元素

以下屏幕抓图显示了您可以使用 javafx.ext.swing 软件包创建的标准 UI 组件。

 

图 1：用户界面组件

 

 

可以在 components.fx 文件中找到此应用程序的完整代码。

颜色

在运行 colors.fx 文件中提供的应用程序代码后，会显示以下窗口。此 colors 应用程序对 javafx.scene.paint.Color 类的所有常量的颜色模式进行了图示说明。您需要将鼠标指针悬停在颜色模式上方才能查看对应的颜色常量，如 Color.FORESTGREEN、Color.YELLOW 和 Color.YELLOWGREEN。

 

图 2：颜色模式

 

 

形状和填充样式

此屏幕抓图显示了您可以使用 javafx.scene.shape 和 javafx.scene.paint 软件包创建的基本形状、填充这些形状的各种方法、线条样式和形状组合。

 

图 3：基本形状、填充方法、线条样式和组合

 

 

可以在 shapes.fx 文件中找到此应用程序的完整代码。注意，屏幕抓图上的文本标题不是示例代码的组成部分。

文本

在运行 text.fx 文件中提供的应用程序代码后，会显示以下窗口。此 text 应用程序显示应用于同一文本字符串的不同格式样式的样例。

 

图 4：文本样例

 

 

效果

在运行 effects.fx 文件中的已编译代码后，会显示以下窗口。此窗口显示可应用于 JavaFX UI 元素的效果。注意，屏幕抓图上的文本标题不是示例代码的组成部分。

 

图 5：视觉效果

 

 

变换

以下屏幕抓图演示了可对 JavaFX 应用程序中的图形、图像或文本执行的基本变换。

 

图 6：变换

 

 

在 transform.fx 文件中找到此示例的完整代码。

布局

以下屏幕抓图说明了使用 javafx.scene.layout 软件包排放 UI 元素的几种方法。

 

图 7：水平布局

 

 

 

图 8：垂直布局

 

 

 

图 9：水平布局和垂直布局的组合

 

 

可以在 hbox.fx、vbox.fx 和 lights.fx 文件中找到这些示例的完整代码。可以在排放 GUI 元素中找到布局方法的详细描述。

光标

以下示例介绍了可应用于 JavaFX 中任何 UI 元素的几种不同光标视图。编译并运行 cursor.fx 文件中的源代码，然后将鼠标光标从一个图形对象移动到另一个图形对象，以查看各种不同的光标视图。注意，屏幕抓图上的文本标题不是示例代码的组成部分。

 

图 10：光标样式

 

 

总结

本课简要介绍了 JavaFX SDK API 中可用的基本 GUI 功能。有关这些示例中使用的软件包和类的更多详细信息，请参阅 API 文档。继续学习本教程的下一课，以深入了解 JavaFX SDK 的功能。