JavaFX CSS
JavaFX CSS
We can use cascading style sheets (CSS) to create a custom look for JavaFX
GUI application.
So that we can change look and feel of our JavaFX GUI application using CSS.
So using CSS themes we can change the entire look of our application.
The following code shows how to switch between the Caspian and Modena
look and feel style sheets.
//Default CSS theme is modena
// Switch
to
CASPIAN
theme
Application.setUserAgentStylesheet(STYLESHEET_CASPIAN);
setUserAgentStylesheet() method is used to apply CSS.
JavaFX CSS :
Default JavaFX CSS :
Using ID Selector :
Apply or Assign Id as
Button button = new Button("my button");
button.setId("btn1");
Here setId() method is used to set id of node or UI control.
/**
*
* @author JavaFXtuts.com
*/
public class Javafxtuts extends Application {
@Override
public void start(Stage primaryStage) {
HBox root = new HBox();
//Set space or padding using setPadding() method
root.setPadding(new Insets(20));
root.getChildren().addAll(button,button1);
Scene scene = new Scene(root, 300, 150);
//To add a external css file we do as
String
style= getClass().getResource("New.css").toExternalForm(
);
//now add the external css file to the scene
scene.getStylesheets().add(style);
primaryStage.setTitle("javafxtuts.com");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* @param args the command line arguments
*/
JavaFX css:
.btn{
-fx-color:black;
-fx-fill:blue;
-fx-padding:4px;
-fx-background-color:#34c669;
-fx-font-size: 30px;
-fx-background-radius: 20px;
}
#btn1{
-fx-color:black;
-fx-fill:blue;
-fx-padding:4px;
-fx-background-color:#2fc6b3;
-fx-font-size: 30px;
-fx-hgap:2px;
}
First of all, You should read JavaFX CSS and JavaFX Buttons Tutorials.
style= getClass().getResource("New.css").toExternalForm();
scene.getStylesheets().add(style);
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
/**
*
* @author JavaFXtuts.com
*/
public class Javafxtuts extends Application {
@Override
public void start(Stage primaryStage) {
HBox root = new HBox();
//Set space or padding using setPadding() method
root.setPadding(new Insets(20));
root.getChildren().addAll(button,button1);
Scene scene = new Scene(root, 300, 250);
style= getClass().getResource("New.css").toExternalForm();
primaryStage.setTitle("javafxtuts.com");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* @param args the command line arguments
*/
#btn1 {
-fx-padding: 14 18 18 18;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-radius: 8;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
#9d4024,
#d86e3a,
radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
-fx-font-weight: bold;
-fx-font-size: 20px;
}
Source :
http://javafxtuts.com/javafx-button-css
http://javafxtuts.com/javafx-css
http://javafxtuts.com