（翻译）第六回 JavaFX2.0 UI 控件-阿里云开发者社区

（翻译）第六回 JavaFX2.0 UI 控件

2011-10-13 1321

简介： 原文地址http://download.oracle.com/javafx/2.0/ui_controls/overview.htm JavaFX控件是通过API在场景图形中使用结点构建的，所以它们可以使用javaFX平台的富视觉特点。

+关注继续查看

原文地址http://download.oracle.com/javafx/2.0/ui_controls/overview.htm

JavaFX控件是通过API在场景图形中使用结点构建的，所以它们可以使用javaFX平台的富视觉特点。由于javaFX API是完全用Java语言实现的，所以可以轻松将javaFX UI 控件集成进已存在的Java应用中。

JavaFX 2.0中支持的UI控件

UI控件的构造类位于API的javafx.scene.control 包中。

控件列表包括了你可能很熟悉的用Java开发客户端应用的典型UI组件。不过，JavaFX 2.0 SDK引入了新的Java UI 控件，比如TitledPane 和TableView .

Figure 1-1 是一副屏幕截图，有三个TitledPane 元素和一个社交类型列表，并且列表可以滑入 (retract)和滑出 (extend).

Figure 1-1 Titled Panes

Description of "Figure 1-1 Titled Panes"

可以从 API文档查看全部UI控件。

UI 控件类比Control类提供了更多的变量和方法，这样就能以直观的方式支持典型的用户交互。你可以使用层叠样式表（CSS）为你的UI组件设计特殊样式。对于某些个别任务，还可能要继承Control 类来创建定制的UI 组件，或者使用Skin 接口为已存在的控件定义一个新皮肤。

从样例中的Ensemble 应用试着了解下控件的范围、它们的行为、可以实现的样式。

特性和效果

由于javafx.scene.control包中的 UI 控件都继承了 Node 类，所以它们可以和场景图形的渲染、动画、变换及动画过度进行整合。

考虑创建一个按钮，为它添加倒影并通过时间线修改它的透明度来让它闪动。

Figure 1-2 展示了这个按钮的三个不同时间线上的状态。左边的图像是不透明度设为1.0时 ，中间的图像是不透明度 0.8 ，最右边的不透明度是0.5 .

Figure 1-2 Animated Button

Description of "Figure 1-2 Animated Button"

通过使用JavaFX API只用少量代码就能实现这个任务。

Example 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 包中的其他效果，比如shadow, lighting, 或者 motion blur.

为UI控件添加CSS装饰

通过定义自己的Cascading Style Sheets (CSS)可以定制内建的UI控件。在JavaFX 应用中使用CSS很像在HTML中使用，因为都必须遵循相同的CSS 规范。控件的视觉效果由.css文件定义，见代码Example 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;
}

可以通过Scene类中的 getStylesheets 方法应用该效果，见Example 1-3 .

Example 1-3 Applying CSS

Scene scene = new Scene();
scene.getStylesheets().add("uicontrolssample/controlStyle.css");

//译者注：添加外部css文件时，即使文件和类在同意目录下，也要加上css所在的包名。

另外，你可以通过使用setStyle方法直接定义控件风格。 Example 1-4 中的 -fx-base 属性为场景中新增的双态按钮定义，它重写了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;");

Figure 1-3 展示了双态按钮的效果。

Figure 1-3 Applying CSS Style to a Toggle Button

Applying an alternative base color to a toggle button

Description of "Figure 1-3 Applying CSS Style to a Toggle Button"

图表

除了为用户接口提供典型元素外， JavaFX SDK在 javafx.scene.chart包中 提供了预置图表。以下类型图表已经可以支持了：area chart, bar chart, bubble chart, line chart, pie chart, and scatter chart。一个图表可以包含几个系类的数据。

Figure 1-4 是一个进口水果饼图。

Figure 1-4 Pie Chart