图形界面控件（UIcontrol，下文简称为UI控件）类基于Control类之上，以直观的方式提供了附加的变量和方法来支持典型的用户交互。你能通过应用CSS为你的UI组件指定样式。对于一些不常用的任务，可以自行扩展Control类创建定制的UI组件，或者使用Skin接口为存在的控件定义新的皮肤样式。

1.3 特性和效果

所有UI控件都在javafx.scene.control包中，并都扩展自Node类，因此控件可以被集成到场景图中渲染，实现动画、转换以及动画转变等。比如创建一个按钮，应用一个倒影效果，并通过改变透明度实现动画效果。图1-3展示了通过动画时间线改变按钮的3个状态。作图展示了按钮透明度为1.0效果，中间图展示了透明度为0.8效果，右边图展示了透明度为0.5的效果。

图1-3动画按钮

通过使用JavaFX APIs，用很少的代码行就能实现这样效果。

示例1-1创建并开始了不确定的时间线，在时间线内每帧600毫秒按钮透明度从缺省值1.0改变到0.0,。setAutoReverse方法使反转有序进行。

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(); ...

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();
...

示例1-1 创建动画按钮

你可以应用其它在javafx.scene.effect包中有效的可视效果，诸如阴影、亮化或动态模糊。

1.4 CSS风格化UI控件

通过定制自己的层叠式样表（Cascading Style Sheets -CSS），可以自行定制内建控件的外观。在JavaFX应用中使用CSS和在HTML中使用是非常一致的，因为它们都基于统一的CSS规范。控件的可视状态有.css文件定义。如示例1-2所示：

`/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;` `}`

/*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;

示例1-2 CSS文件中定义UI控件风格

在应用中，通过Scene类的getStylesheets方法使CSS起作用。如示例1-3所示

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

示例1-3 应用CSS

另外，通过使用控件的setStyle方法，可以在应用程序的代码中直接定义控件风格。在示例1-4中，-fx-base属性为toggle按钮定义样式，这会覆盖.css文件中为相应scene中所有控件的属性风格定义。

`ToggleButton tb3 = new ToggleButton ("I don't know");` `tb3.setStyle("-fx-base: #ed1c24;");`

示例1-4 代码定义式样

图-1-4展示了代码应用样式的外观情形

图1-4代码应用CSS

1.5 图表

除了典型的用户界面元素外，JavaFXSDK在javafx.scene.chart包中提供了预置的图表支持。支持的图表类型有区域图、条图、泡图、线图、饼图、散射图（area chart, bar chart, bubble chart, linechart, pie chart, and scatter chart.）。每一类图表可能包含好几个系列数据。图1-5展示了进口水果的饼图：

图1-5 饼图

不像其它java客户端工具包，用JavaFX SDK，通过增加几行代码就能构建这样的图表。也可以定义不同的颜色模式和样式，应用可视效果、处理鼠标事件和创建动画等。