JavaFX2.0 UI控件教程 之 控件概览

JavaFX内建UI控件

 

 

本篇教程内容覆盖JavaFX内建的有效图形界面控件（UI控件），包括如下章节内容：

·        JavaFX UI Controls

·        Label

·        Button

·        Radio Button

·        Toggle Button

·        Checkbox

·        Choice Box

·        Text Field

·        Password Field

·        Scroll Bar

·        Scroll Pane

·        List View

·        Table View

·        Tree View

·        Separator

·        Slider

·        Progress Bar andProgress Indicator

·        Hyperlink

·        Tooltip

·        HTML Editor

·        Titled Pane andAccordion

·        Menu

每部分内容提供相应示例和应用代码，以描述控件的功能作用。并可在内容列表中找到应用的代码文件以及相应netbeans工程文件。

  

1      UI控件概览

1.1    用户见面控件（UI控件）

 

JavaFX UI的可用控件由使用中的节点经由API创建于场景图中。因此，这些控件可以使用可视化地丰富javaFX平台特性。由于JavaFX APIs完全由java实现，你可以很容易把JavaFX UI控件集成到已存在的Java应用中。

图1-1展示了一些典型的UI控件的应用情况

图1-1JavaFX UI控件

1.2    JavaFX2.0中支持的UI控件

 

构建UI控件的类所在的API包是javafx.scene.control。UI控件包含的典型界面组件可能与你以前的java应用客户端开发所见大差不离。但是JavaFX2.0 SDK介绍了些新的Java界面控件，如TitlePane和TableView。

图1-2展示了3个带有设置清单的TitlePane元素。这些列表清单可以滑进和滑出（收缩扩展）。

图1-2标题面板

详情可以查看UI控件的完整API描述文档。

图形界面控件（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(); ...

示例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; }

示例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，通过增加几行代码就能构建这样的图表。也可以定义不同的颜色模式和样式，应用可视效果、处理鼠标事件和创建动画等。

 

1.6    集成FX2.0控件到Swing

可以把JavaFX UI控件集成到由Swing工具包构建的java客户端应用中。

为了把JavaFX内容集成到Swing应用中，采取如下步骤：

1.             在一个布局容器或一个组中，一个一个的把所有UI控件添加到javafx.scene.Scene对象中；

2.             把Scene对象添加到Swing应用程序的内容中。

如果需要放置一个单一的javaFX控件到Swing应用中，必须采用前述两步。

当javaFX控件被集成到Swing应用中时，这些FX UI控件依然是由Prism图形库渲染，并能完全利用它的高级渲染能力。

 

 

下一节，将介绍Label控件。……