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

原文地址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

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

Description of "Figure 1-4 Pie Chart" 

 

和其他Java客户端工具不同，使用JavaFX SDK 只需要在应用中添加几行代码就能构建这样的图表。你也可以定义一系列的颜色表和风格、应用视觉效果、处理鼠标事件、创建动画等。

来 Using JavaFX Charts 了解更多的图表特性和功能信息。

 

集成JavaFX 2.0 UI 控件和 Swing

可以将 JavaFX UI 控件集成进已存在的用Swing构建的Java客户端应用。

要集成JavaFX内容和Swing，请安装以下步骤：

1. 将JavaFX UI 控件一个一个地添加到javafx.scene.Scene 对象中的布局容器中，比如一个group.

2. 把Scene 对象加入Swing 应用.

即使把一个单独的JavaFX 2.0 控件加入到已存在的Swing代码中也要做上面的两个步骤。

尽管它们被集成进了Swing程序，JavaFX 2.0 UI 控件也依然被菱镜图形库(Prism graphical library）渲染 ，并具有全部的高级渲染能力。

到第七回 了解更多二者的集成信息。