6. javafx2.0 UI control

Original address http://download.oracle.com/javafx/2.0/ui_controls/overview.htm

 

 

Javafx controls are built using nodes in scene graphics through APIS, so they can use the rich visual features of the javafx platform. Because javafx APIs are fully implemented in Java, you can easily integrate javafx UI controls into existing Java applications.

Ui controls supported in javafx 2.0

The constructor class of the UI control is located inJavafx. Scene. Control of the APIPackage.

The control list includes the typical UI components that you may be familiar with when developing client applications using Java. However, the javafx 2.0 SDK introduces new Java UI controls, suchTitledPane And tableview.

Figure 1-1 is a screen with threeTitledPaneElement and a list of social media types, and the list can be slide
(Retract) and slip out (extend ).

Figure 1-1 titled panes

Description of "Figure 1-1 titled panes"

You can view all the UI controls in the API documentation.

Compared with the control class, the UI control provides more variables and methods to support typical user interactions in an intuitive way. You can use Cascading Style Sheets (CSS) to design special styles for your UI components. For some individual tasks, it is also possible to inheritControlClass to create custom UI components, or useSkinInterface defines a new skin for an existing control.

From the ensemble application in the example, try to understand the control scope, their behaviors, and the patterns that can be implemented.

Features and Effects

BecauseIn the javafx. Scene. Control packageAll the UI controls inheritNodeSo they can be over-integrated with scene graphics rendering, animation, transformation, and animation.

Consider creating a button, adding a reflection for it, and flashing it by modifying its transparency through the timeline.

Figure 1-2 shows the status of the three different time lines of the button. The image on the left isWhen the opacity is set to 1.0The middle image is opacity.0.8The rightmost Opacity is 0.5..

Figure 1-2 animated button

Description of "Figure 1-2 animated button"

This task can be implemented by using the javafx API with only a small amount of code.

Example 1-1 creates an infinite timeline and starts it. The opacity of a 600 millisecond key frame setting button changes from the default value (1.0) to 0.0.setAutoReverseSo that the timeline can be reversed automatically.

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

You can also applyjavafx.scene.effectOther effects in the package, such as shadow, lighting, or motion blur.

Add CSS decoration for the UI control

You can customize built-in UI controls by defining your own Cascading Style Sheets (CSS. Using CSS in javafx applications is similar to using CSS in HTML, because they must all follow the same CSS specifications. The visual effect of the control is defined by the .css file. For details, see the code 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;}

You can usegetStylesheetsFor more information, see example.
1-3.

Example 1-3 applying CSS

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

// Translator's note: when adding an external CSS file, the package name of CSS must be added even if the file and class are under the agreed directory.

In addition, you can useThe setstyle method directly defines the control style.Example
In 1-4-fx-baseThe attribute is the newly added double-state button definition in the scenario. it overwrites the corresponding attribute in the CSS file.

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 shows the effect of the two-State button.

 

Figure 1-3 applying CSS style to a toggle button

Description of "Figure 1-3 applying CSS style to a toggle button"

 

Chart

In addition to providing typical elements for user interfaces, the javafx SDKJavafx. Scene. Chart packageProvides preset charts. The following types of charts are supported: Area Chart, bar chart, bubble chart, line chart, pie chart, and scatter chart. A chart can contain several series of data.

Figure 1-4 is an imported fruit pie chart.

 

Figure 1-4 pie chart

Description of "Figure 1-4 pie chart"

 

Unlike other Java client tools, to use the javafx SDK, you only need to add several lines of code to the application to build such a chart. You can also define a series of colors and styles, apply visual effects, process mouse events, and create animations.

Use Using javafx charts to learn more about chart features and functions.

 

Integrate javafx 2.0 UI controls and swing

You can integrate the javafx UI control into an existing Java client application built with swing.

To integrate javafx content and swing, install the following steps:

1. Add the javafx UI controljavafx.scene.SceneIn the layout container of an object, such as a group.

2. SetSceneObjects are added to the swing application.

Even if you add a single javafx 2.0 control to an existing swing code, you must perform the preceding two steps.

Despite being integrated into swing programs, javafx 2.0 UI controls are still rendered by the prism graphical library and have all the advanced rendering capabilities.

In the seventh round, learn more about the integration of the two.