1 JavaFX的用户界面控制
在JavaFX UI控制可通过API的使用在场景图中的节点。因此,该控件可以使用JavaFX平台丰富的视觉功能。因为JavaFX的API是完全用Java实现的,你可以轻松地集成到您现有的Java应用程序的JavaFX UI控件。
图1-1显示了典型的UI控件,你可以找到在乐团示例应用程序。试试这个应用程序,以评估的范围广泛的控制,他们的行为,并可用的样式。
图1-1的JavaFX UI控件
在JavaFX 2.0支持的UI控件
构建UI控件的类驻留在javafx.scene.control
的API包。
UI控件的列表,包括典型的UI组件,您可能认识你以前在Java客户端应用程序开发。然而,在JavaFX 2.0 SDK引入了新的Java UI控件,像TitledPane
和的TableView
。
图1-2显示了三个屏幕捕获与社交网络应用程序的设置列表TitledPane
元素。名单可以滑动(收回)和滑出(扩展)。
图1-2本名为窗格
UI控件的完整列表,请参见API文档。
UI控件类提供额外的变量和方法超出了控制
类,以直观的方式来支持典型用户交互。采用层叠样式表(CSS),您可以指定一个特定的风格,你的UI组件。对于一些不寻常的任务,你可能需要延长控制
类来创建一个自定义的UI组件,或使用现有的控制来定义一个新的皮肤的皮肤
界面。
特点及其影响
因为从UI控件javafx.scene.control
包的所有节点
扩展类,他们可以集成场景图形渲染,动画,转换,动画过渡。
考虑创建一个按钮,它采用了反射,并从最大值到最小值,通过改变其不透明度动画按钮的任务。
图1-3显示了三个国家通过按钮动画时间轴。左边的图像显示时,其不透明度设置按钮1.0
,中央图像显示的不透明度设置到0.8
,右边的图像显示不透明度设置为0.5
。
通过使用JavaFX的API,你可以实现这个任务,只有几行代码。
示例1-1创建和启动无限期时间轴,关键帧的600毫秒按钮的不透明度的变化,从它的默认值(1.0)0.0内。setAutoReverse
方法使相反的顺序。
Example 1-1 Creating an Animated Button
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.util.Duration;
import javafx.scene.control.Button;
import javafx.scene.text.Font;
import javafx.scene.effect.Reflection;
...
Button button = new Button();
button.setText("OK");
button.setFont(new Font("Tahoma", 24));
button.setEffect(new Reflection());
final Timeline timeline = new Timeline();
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.setAutoReverse(true);
final KeyValue kv = new KeyValue(button.opacityProperty(), 0);
final KeyFrame kf = new KeyFrame(Duration.millis(600), kv);
timeline.getKeyFrames().add(kf);
timeline.play();
...
你也可以适用于其他在视觉效果如阴影,照明,或运动模糊,javafx.scene.effect
包。
您可以自定义自己的级联样式 表(CSS)的内置UI控件的外观。JavaFX应用程序中使用CSS是在HTML中使用CSS相同,因为每一种情况下是基于相同的CSS规范。视觉状态的控制。css文件定义,示例1-2所示。
Example 1-2 Defining Styles for UI Controls in the CSS File
/*controlStyle.css */
.scene{
-fx-font: 14pt "Cambria Bold";
-fx-color: #e79423;
-fx-background: #67644e;
}
.button{
-fx-text-fill: #006464;
-fx-background-color: #e79423;
-fx-border-radius: 20;
-fx-background-radius: 20;
-fx-padding: 5;
}
可以在应用程序的风格,使通过的getStylesheets
场景
类的方法,示例1-3所示。
Example 1-3 Applying CSS
Scene scene = new Scene();
scene.getStylesheets().add("uicontrolssample/controlStyle.css");
此外,您在您的应用程序代码定义一个控制的风格直接使用SetStyle
方法。-FX-base的
属性定义为切换按钮示例1-4覆盖添加到场景中的所有控件。css文件中定义相应的属性。
Example 1-4 Defining the Style of a Toggle Button in the JavaFX Application
ToggleButton tb3 = new ToggleButton ("I don't know");
tb3.setStyle("-fx-base: #ed1c24;");
图1-4显示风格切换按钮看起来如何,当它被添加到应用程序。
图表
除了 用户界面的典型元素,JavaFX SDK中提供的预制图表javafx.scene.chart
包。目前支持以下类型的图表:面积图,条形图,气泡图,折线图,饼图,散点图图表。一个图表可以包含多个数据系列。
图1-5显示了对进口水果的饼图。
图1-5饼图
不同于其他Java与JavaFX SDK的客户端工具包,您可以建立这样一个只需添加几行代码,在您的应用程序的图表。您还可以定义各种颜色的计划和风格,适用于视觉效果,处理鼠标事件,并创建动画。
使用JavaFX图表有关图表的特性和功能的更多信息。
集成的JavaFX 2.0的UI控制在Swing
可以集成到现有的Java客户端的Swing工具包构建的应用程序的JavaFX UI控件。
JavaFX内容集成到一个Swing应用程序,使用以下步骤:
-
所有的JavaFX UI控件添加到一个的
javafx.scene.Scene
对象之一,布局容器内,或作为一个群体。 -
新增的
场景
对象的Swing应用程序的内容。
如果您需要一个单一的JavaFX 2.0控制放置在您现有的Swing代码,您必须执行前面的步骤。
即使它们集成到一个Swing应用程序,仍然呈现的JavaFX 2.0的UI控件使用棱镜图形库,并充分利用其先进的渲染能力。
看到Swing中的JavaFX教程更多关于JavaFX和Swing互操作性的信息。