javafx 渲染顺序 javafx ui

转载

mob6454cc641ffd 2023-07-07 16:39:18

文章标签 javafx 渲染顺序 javafx ui swing css 文章分类 Java 后端开发

1 JavaFX的用户界面控制

在JavaFX UI控制可通过API的使用在场景图中的节点。因此，该控件可以使用JavaFX平台丰富的视觉功能。因为JavaFX的API是完全用Java实现的，你可以轻松地集成到您现有的Java应用程序的JavaFX UI控件。

图1-1 显示了典型的UI控件，你可以找到在乐团示例应用程序。试试这个应用程序，以评估的范围广泛的控制，他们的行为，并可用的样式。

图1-1的JavaFX UI控件

javafx 渲染顺序 javafx ui_javafx

“图1-1的JavaFX UI控件”的说明

在JavaFX 2.0支持的UI控件

构建UI控件的类驻留在javafx.scene.control的API包。UI控件的列表，包括典型的UI组件，您可能认识你以前在Java客户端应用程序开发。然而，在JavaFX 2.0 SDK引入了新的Java UI控件，像TitledPane和的TableView。图1-2显示了三个屏幕捕获与社交网络应用程序的设置列表TitledPane元素。名单可以滑动（收回）和滑出（扩展）。

图1-2本名为窗格

javafx 渲染顺序 javafx ui_swing_02

“图1-2本名为窗格”的说明

UI控件的完整列表，请参见API文档。

UI控件类提供额外的变量和方法超出了控制类，以直观的方式来支持典型用户交互。采用层叠样式表（CSS），您可以指定一个特定的风格，你的UI组件。对于一些不寻常的任务，你可能需要延长控制类来创建一个自定义的UI组件，或使用现有的控制来定义一个新的皮肤的皮肤界面。

特点及其影响

因为从UI控件javafx.scene.control包的所有节点扩展类，他们可以集成场景图形渲染，动画，转换，动画过渡。

考虑创建一个按钮，它采用了反射，并从最大值到最小值，通过改变其不透明度动画按钮的任务。

图1-3显示了三个国家通过按钮动画时间轴。左边的图像显示时，其不透明度设置按钮1.0，中央图像显示的不透明度设置到0.8，右边的图像显示不透明度设置为0.5。

图1-3动画按钮

javafx 渲染顺序 javafx ui_javafx 渲染顺序_03

“图1-3动画按钮”的说明

通过使用JavaFX的API，你可以实现这个任务，只有几行代码。

示例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包。

CSS样式的UI控件

您可以自定义自己的级联样式表（CSS）的内置UI控件的外观。JavaFX应用程序中使用CSS是在HTML中使用CSS相同，因为每一种情况下是基于相同的CSS规范。视觉状态的控制。css文件定义，示例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;
}

可以在应用程序的风格，使通过的getStylesheets 场景类的方法，示例1-3所示。

Example 1-3 Applying CSS

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

此外，您在您的应用程序代码定义一个控制的风格直接使用SetStyle方法。-FX-base的属性定义为切换按钮示例1-4覆盖添加到场景中的所有控件。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;");

图1-4显示风格切换按钮看起来如何，当它被添加到应用程序。

图1-4应用CSS样式切换按钮

javafx 渲染顺序 javafx ui_swing_04