JavaFX Selectors
In the JavaFX application, in order to apply various css effect, we use the various css classes available in the JavaFX. This is generally used to enhance the appearance property of the given object. It enhances the look and feel of the application. It is used to change the appearance and make it more understandable to the user. In order to design the webpages we can use CSS to give different color, size, font style, spacings, paragraph, and alignments. JavaFX selectors are generally used to locate nodes on the JavaFX scene graph. The JavaFX selectors are used by the user to adjust styles to nodes on scene-graph. The CSS for JavaFX is written in one file. It defines all the styles for UI controls. The style rules are defined on mainly three parts:
- Selector: This is mainly the HTML tag on which the style is applied. There are many selectors like <table>, <form>, etc,
- Property: The property is used to describe type of attribute for HTML tag. The properties in CSS are border, color, font, etc,
- Value: User can assign value to the particular properties in CSS. Color property can be assigned to red, #FFFFFF.
JavaFX CSS – Student information form using CSS selectors:
Example:
Style.css
.label
{
-fx-background-color:Red;
-fx-text-fill:white;
-fx-font-size:16;
-fx-border-color: Black;
-fx-border-radius: 7;
}
.button
{
-fx-background-color:Blue;
-fx-font-family:courier_new;
-fx-text-fill:White;
-fx-border-color: Wheat;
-fx-border-radius: 5;
-fx-font-size:16;
}
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class CSSUI extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
Label first_name=new Label("First Name");
Label last_name=new Label("Last Name");
TextField tf1=new TextField();
TextField tf2=new TextField();
Button Submit=new Button ("Submit");
GridPane root=new GridPane();
root.setHgap(10);
root.setVgap(15);
Scene scene = new Scene(root,400,200);
root.addRow(0, first_name,tf1);
root.addRow(1, last_name,tf2);
root.addRow(2, Submit);
//Adding CSS file to the root
root.getStylesheets().add("style.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Output:
Explanation:
In order to create CSS effect on given components in JavaFX, we have to import all the required libraries. Then we have created one class named CSSUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold CSS effect on given components, a Group object is created which is then passed to the Scene class object.
The label is created using the constructor and various properties are set using setters. Also, button is created using the constructor and various properties are set. The CSS effect on given components is applied by specifying the style.css.
The stage is prepared, the title is set and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed. Also, it displays the label for first name and last name with submit button.
JavaFX CSS – Residential information form using CSS selectors :
Example:
Style.css
.label
{
-fx-background-color:Brown;
-fx-text-fill:white;
-fx-font-size:16;
-fx-border-color: Black;
-fx-border-radius: 7;
}
.button
{
-fx-background-color:Green;
-fx-font-family:courier_new;
-fx-text-fill:White;
-fx-border-color: Wheat;
-fx-border-radius: 5;
-fx-font-size:16;
}
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class CSSUI extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
Label country=new Label("Country Name");
Label state=new Label("State Name");
TextField tf1=new TextField();
TextField tf2=new TextField();
Button Submit=new Button ("Submit");
GridPane root=new GridPane();
root.setHgap(10);
root.setVgap(15);
Scene scene = new Scene(root,400,200);
root.addRow(0, country,tf1);
root.addRow(1, state,tf2);
root.addRow(2, Submit);
root.getStylesheets().add("style.css");
primaryStage.setScene(scene);
primaryStage.setTitle("Residential Information");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Output:
Explanation:
In order to create CSS effect on given components in JavaFX, we have to import all the required libraries. Then we have created one class named CSSUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold CSS effect on given labels and buttons, a Group object is created which is then passed to the Scene class object.
The label is created using the constructor and the name parameter is passed in it. Also, button is created using the constructor and the name parameter is passed in it. The CSS effect on given components is applied by using the getStylesheets().add() method.
The stage is prepared, the title is set and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed with title “ Residential Information”. Also, it displays the label for the country name and the state name with the submit button.