当前位置: 代码迷 >> Web前端 >> (通译)第六回 JavaFX2.0 UI 控件
  详细解决方案

(通译)第六回 JavaFX2.0 UI 控件

热度:512   发布时间:2012-09-10 22:20:12.0
(翻译)第六回 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

TitledPanes
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

Screenshot of the 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

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)渲染 ,并具有全部的高级渲染能力。

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

?