1. JavaFx and Style Sheet
In JavaFx, we can apply CSS style to the nodes. For example, if we want to define a style for the buttons, the style sheet will have the selector named as ‘.button’. The same way, TextField defines a UI class in JavaFx, and the selector will be named as ‘.text-field’. Note, as text field control is a two-word class, in the selector we will have a hyphen. When defining the rules, we must prefix each rule with ‘-fx-‘. In this example, we will define style rule for a JavaFx Button.
2. About JavaFx CSS Example
The screenshot of the example is shown below:
Here, we create two Javafx Buttons separated by a Separator control. These buttons have blue background with yellow foreground and its corners are slightly curved.
3. Create JavaFx Buttons
To explore the CSS styling, we create two JavaFx buttons. Later, we will use these buttons to see how CSS styling is applied to it. Below is the code:
Explanation
- We create JavaFx scene with a
VBoxcontainer. The controls added to the VBox stays on top of each other. Means, they laid out vertically. - We create two buttons and a JavaFx
Separator. While we are adding these controls to the VBox, we sandwich the separator between the button 1 and button 2 so that we can avoid the button’s edges overlapping with each other.
4. Create CSS for JavaFx
We want to style the javafx button and hence we create a selector as ‘.Button’. Rule for this selector is below:
Explanation
- The rule
-fx-background-colordefines the background colour for the button. In our case, the back colour of the button is blue. - Here, we create rounded corner for the button using the rules:
-fx-arc-width,-fx-arc-height. These rules define the radius of the arc and in our example, it is 2 pixels. - We assign Yellow Foreground Color for the button using CSS rule
-fx-text-fill. - Finally, the
-fx-fontrule states large font for the button caption. The same rule sets the San Serif font for the button.
Now, we have CSS file ready for the JavaFx scene. Our CSS file has only one selector and you can add multiple selectors in a single file with various rule specification.
5. Assign CSS File to the JavaFx Scene
JavaFx scene maintains a observable list to hold one or more style sheets. Below is the code snippet:
Explanation
- We named the CSS file as BlueButtons.css and kept it in the same location in which the source ‘.java’ file resides. Then, we load the CSS file as a resource and push it to the JavaFx Scene’s style sheet collection. We can fetch this collection by calling the
getStyleSheetsmethod. Since the style sheet contains only one selector, it will be applied to all the matching UI nodes. In our case, it is our two Button instance. - Here, we show the stage and one can observe both the buttons are skinned with the style rules defined in the CSS file.
6. Code Reference
6.1 BlueButtons.css
|
1 2 3 4 5 6 7 8 |
.button { -fx-background-color: blue; -fx-arc-width: 2px; -fx-arc-height: 2px; -fx-text-fill: yellow; -fx-font:xx-large sans-serif; } |
6.2 JavaFxProj.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
package javafxproj; import javafx.application.Application; import javafx.geometry.Orientation; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Separator; import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class JavaFxProj extends Application { @Override public void start(Stage primaryStage) { //Sample 01: Prepeare the Scene VBox vbox = new VBox(); Scene scene = new Scene(vbox, 600, 400); //Sample 02: Create Button Instances Button btn1 = new Button("One"); Separator s1 = new Separator(Orientation.HORIZONTAL); Button btn2 = new Button("Two"); vbox.getChildren().addAll(btn1,s1, btn2); //Sample 03: Load Style Sheet scene.getStylesheets().add( getClass().getResource("BlueButtons.css").toExternalForm()); //Sample XY: Show Stage primaryStage.setTitle("CSS Style"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Categories: JavaFx
Tags: -fx-arc-height, -fx-arc-width, getResource, getStyleSheets, JavaFx, StyleSheet
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.