Javafx skin Function

As one of the RIA technologies, skin functions are essential to make the application interface look more beautiful or more personalized.

In javafx, you can use CSS style sheets to replace skin. However, CSS in javafx is based on W3C CSS version 2.1, but not exactly the same.

There are several methods for skin replacement in javafx.

1. Completely redefined control style

First, create a cssfile named skin1.css and define a button style.

.CustomButton{    -fx-background-color: #aaffff;    -fx-text-fill: #000000}

As shown above, the background color and text color are simply changed.

Of course, it is easy to see that it is not much different from the standard CSS.

Then, let's take a look at the effect in the program.

Create a javafx project and write the following code.

public class Skintest extends Application {

    public static void main(String[] args) {        launch(args);    }        @Override    public void start(Stage primaryStage) {        primaryStage.setTitle("Test Skin in JavaFX");        final Button btn = new Button("I am a Button");

          StackPane root = new StackPane();        Scene scene = new Scene(root, 800, 600);        scene.getStylesheets().add("skin1.css");        btn.getStyleClass().add("CustomButton");        root.getChildren().add(btn);        primaryStage.setScene(scene);        primaryStage.show();    }}

Only one button is created in the program.

First, use scene. getstylesheets (). Add (string Str) to add a style.

Then, use the button. getstyleclass (). Add (string Str) method to apply the style to the button.

You can see on the right that the button is different from the default button.

Next, we add a new button style in skin1.css and name it custombutton2.

.CustomButton2{    -fx-background-color: #000000;    -fx-text-fill: #FFFFFF}

Then, add the button event to apply the style after the button is clicked.

        btn.setOnAction(new EventHandler<ActionEvent>() {            @Override            public void handle(ActionEvent event) {                btn.getStyleClass().add("CustomButton1");            }        });   

Remember that if you use a control in an event, it must be defined as the final type.

Then, after running, click the button.

After clicking the button, a new style is applied and the style becomes black and white.

How is it? Although it simply changes the background color and text color, it looks good.

2. Override the widget Style

Some people may think that it is difficult to set a style for each control. Why cannot we set all button styles directly? Of course, javafx also provides

For each function, we only need to change. custombutton in the corresponding skin1.css to. Button to overwrite the style of the button control.

Then we change it to. button, and then add a button to check the running effect.

You will find that there is no dedicated buttonstyle, but after skin1.css is added to the stylesheets of scene, all the button styles are changed.

3. Change the style of the entire program

Similarly, since we can change the style of all buttons, we can also make a few modifications to change the style of the entire application software.

We only need to add the. Root style.

.root{    -fx-font-size: 16pt;    -fx-base: rgb(255, 145, 47);    -fx-background: rgb(255, 255, 255);}

Then add several other controls to the code and run them.

As you can see, the overall style has changed. This is also a convenient way to change the topic.

In addition, CSS includes class styles and ID styles, and javafx. For the control, you only need to use setid () to apply ID styles.

OK. It's very late. Here's the javafx skin replacement function. It's time to go to bed.