(翻译)第六回 JavaFX2.0 UI 控件
2011-11-02 00:26
387 查看
原文地址http://download.oracle.com/javafx/2.0/ui_controls/overview.htm
JavaFX控件是通过API在场景图形中使用结点构建的,所以它们可以使用javaFX平台的富视觉特点。由于javaFX API是完全用Java语言实现的,所以可以轻松将javaFX UI 控件集成进已存在的Java应用中。
UI控件的构造类位于
控件列表包括了你可能很熟悉的用Java开发客户端应用的典型UI组件。不过,JavaFX 2.0 SDK引入了新的Java UI 控件,比如
Figure 1-1 是一副屏幕截图,有三个
(retract)和滑出 (extend).
Figure 1-1 Titled Panes
Description of "Figure 1-1 Titled Panes"
可以从 API文档查看全部UI控件。
UI 控件类比Control类提供了更多的变量和方法,这样就能以直观的方式支持典型的用户交互。你可以使用层叠样式表(CSS)为你的UI组件设计特殊样式。对于某些个别任务,还可能要继承
从样例中的Ensemble 应用试着了解下控件的范围、它们的行为、可以实现的样式。
由于
考虑创建一个按钮,为它添加倒影并通过时间线修改它的透明度来让它闪动。
Figure 1-2 展示了这个按钮的三个不同时间线上的状态。左边的图像是
Figure 1-2 Animated Button
Description of "Figure 1-2 Animated Button"
通过使用JavaFX API只用少量代码就能实现这个任务。
Example 1-1 创建了一个无限的时间线并开始了它,里面有一个600毫秒的关键帧设置按钮的不透明度从默认值(1.0)向 0.0变化。
Example 1-1 Creating an Animated Button
你也可以应用
通过定义自己的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
可以通过Scene类中的
1-3 .
Example 1-3 Applying CSS
另外,你可以通过使用
1-4 中的
Example 1-4 Defining the Style of a Toggle Button in the JavaFX Application
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在
Figure 1-4 是一个进口水果饼图。
Figure 1-4 Pie Chart
Description of "Figure 1-4 Pie Chart"
和其他Java客户端工具不同,使用JavaFX SDK 只需要在应用中添加几行代码就能构建这样的图表。你也可以定义一系列的颜色表和风格、应用视觉效果、处理鼠标事件、创建动画等。
来 Using JavaFX Charts 了解更多的图表特性和功能信息。
可以将 JavaFX UI 控件集成进已存在的用Swing构建的Java客户端应用。
要集成JavaFX内容和Swing,请安装以下步骤:
将JavaFX UI 控件一个一个地添加到
把
即使把一个单独的JavaFX 2.0 控件加入到已存在的Swing代码中也要做上面的两个步骤。
尽管它们被集成进了Swing程序,JavaFX 2.0 UI 控件也依然被菱镜图形库(Prism graphical library)渲染 ,并具有全部的高级渲染能力。
到第七回 了解更多二者的集成信息。
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,请安装以下步骤:
将JavaFX UI 控件一个一个地添加到
javafx.scene.Scene对象中的布局容器中,比如一个group.
把
Scene对象加入Swing 应用.
即使把一个单独的JavaFX 2.0 控件加入到已存在的Swing代码中也要做上面的两个步骤。
尽管它们被集成进了Swing程序,JavaFX 2.0 UI 控件也依然被菱镜图形库(Prism graphical library)渲染 ,并具有全部的高级渲染能力。
到第七回 了解更多二者的集成信息。
相关文章推荐
- 第六回 JavaFX2.0 UI 控件
- JavaFX2.0 UI控件教程 之 控件概览
- (翻译)第二十六回 JavaFX2.0 标题窗格TitledPane和手风琴控件Accordion
- JavaFX2.0 UI控件教程(全部控件)
- [翻译]Scott Mitchell 的ASP.NET 2.0数据教程之十三:在DetailsView控件中使用TemplateField
- operamasks-ui2.0 +MVC4.0+EF5.0实战之三 业务功能区域及标签页控件(tab)
- (翻译)第二十一回 JavaFX2.0 滑动条Slider
- JavaFX 2.0+ 官方文档翻译和技术资料整理计划
- 基本控件文档-UISegment属性----iOS-Apple苹果官方文档翻译
- [翻译]Scott Mitchell 的ASP.NET 2.0数据教程之四十七:使用SqlDataSource控件查询数据
- [翻译]使用ASP.NET 2.0中的ReportViewer控件
- (翻译)第五回 开始使用JavaFX2.0
- (翻译)第二十二回 JavaFX2.0 进度条和进度指示器
- operamasks-ui2.0 +MVC4.0+EF5.0实战之一 开篇及布局控件介绍
- (翻译)第七回 JavaFX2.0和Swing的集成
- (翻译)第二十三回 JavaFX2.0 超链接Hyperlink
- 使用JavaFX2.0的控件
- operamasks-ui2.0 +MVC4.0+EF5.0实战之二 功能菜单及树形控件(Tree)
- [翻译]asp.net 2.0中页的生存周期(Lifecycle)和动态控件
- (翻译)第八回 JavaFX2.0 标签Label