How To Use CSS For JavaFX Projects - java

I am quite new to JavaFX and was wondering if there is a way to assign a css file to the entire JavaFX project/scene. Currently, I have to apply the stylesheet to every element I want to be styled with css. I am working with IntelliJ and Scene Builder 2.0. I have tried adding the stylesheets in my Main class, start method as shown below but it did not seem to have the desired effect.
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("JavaFXTest.fxml"));
primaryStage.setTitle("JavaFX Test");
primaryStage.setScene(new Scene(root, 300, 275));
root.getStylesheets().add("#../styling/styles.css");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}

I realized that it was a problem with the path to the css file. I changed it to:
root.getStylesheets().add("styling/styles.css");
and achieved the desired results. This way I do not need to manually add the stylesheet to every element in the UI, rather it works across the entire scene now. Just declare your classes/id's as per normal css convention to add styling.

You can add a style sheet to the scene:
public void start(Stage primaryStage) {
Button btn = new Button();
btn.setText("Say 'Hello World'");
btn.setOnAction(event -> System.out.println("Hello World!"));
StackPane root = new StackPane();
root.getChildren().add(btn);
Scene scene = new Scene(root, 300, 250);
scene.getStylesheets().add("/styling/styles.css");
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
In the above example the style sheet is located at /styling/styles.css relative to the source root.

Related

How to set only maximize and one default size using scene builder.....?

I am creating a JavaFX application using a scene builder. I want to set one free size(width 200 and height 300) and full screen only. I don't want to give resize access. How I do it...??
You cannot do that using Scene Builder, fullScreen are properties of the Stage and not the layouts set on the scene.
the solution is to load and set the .fxml on the scene and then set the scene on the stage.
To set stage as full-screen, undecorated window :
primaryStage.setFullScreen(true/false);
To maximize the stage and fill the screen :
primaryStage.setMaximized(true/false);
to disable resizable screen in JavaFx try this :
primaryStage.setResizable(false);
and to make scene size width:200/height:300:
primaryStage.setScene(new Scene(root, 200 , 300));
here is a full example :
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("views/homePage.fxml"));
primaryStage.setTitle("title");
primaryStage.setScene(new Scene(root, 200 , 300));
primaryStage.setResizable(false);
primaryStage.setMaximized(true);
primaryStage.show();
}
#Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
// Set the size:
Scene scene = new Scene(root, 200, 300);
// Prevent resizing:
primaryStage.setResizable(false);
// Remove the buttons for minimizing and maximizing:
primaryStage.initStyle(StageStyle.UTILITY);
// Start in full screen mode:
primaryStage.setFullScreen(true);
// Toggle between normal and full screen mode with F11 key:
scene.setOnKeyPressed(event -> {
if (event.getCode() == KeyCode.F11)
primaryStage.setFullScreen(!primaryStage.isFullScreen());
});
primaryStage.setScene(scene);
primaryStage.show();
}

How do i change the javafx intellij template to my own template if i create a new javafx application?

I do not want to use the Intellij IDEA template anymore when creating javafx programs. I want to use my own template because I can work a lot better with it. Here is an example of what I mean.
Intellij template, I do not want to use this anymore:
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World");
primaryStage.setScene(new Scene(root, 300, 275));
primaryStage.show();
}
My template, I want to use this template:
#Override
public void start(Stage primaryStage) throws Exception{
StackPane root = new StackPane();
primaryStage.setTitle("Hello World");
primaryStage.setScene(new Scene(root, 300, 275));
primaryStage.show();
}
You can create a user defined template with quite simple steps.
create a new project using the build-in JavaFX template
amend the Main class with your changes
in the Tools menu select Save project as template...
- save it e.g. as JavaFX own
- after that it will be available in the new project wizard in category User-defined

"Hello World" app in Java FX with minimal Java code

I selected Java FX between it and Swing because I want that view (*ML) and logic will be split (impossible in Swing).
Here is the "Hello world" template in IntelliJ IDEA:
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World");
primaryStage.setScene(new Scene(root, 300, 275));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Two meddlings to View in the Logic part:
Setting title - setTitle()
Setting top-level element size: primaryStage.setScene(new Scene(root, 300, 275));.
Can I set same settings in FXML?
The FXML loader will give you the root element, which already has a prefWidth and prefHeight.
You can't set the title but you can drop the size for the scene and it will be taken from the root element automatically.
Another thing that has to be set for the Stage explicitly are size constraints. You can have an initial size but the user can drag it around however he/she wants.
You can set size using the
prefHeight="yourHeightValue" prefWidth="yourWidthValue"
sets in your scene's root element. You can create scenes using SceneBuilder and it will generate related FXML for you.

JavaFX scene scales differently in Scene builder and run time on Windows 10

I using Scene Builder with Intelij IDEA to build a JavaFX application. The scene looks correct when I preview it in Scene Builder but when I then execute it in IntelliJ the scene is scaled up 1.5x. In Scene Builder the stage is 1280x800 but when I run the program it is 1920x1200 despite me setting the scene size 1280x800.
This seems like it might be due to Windows 10 scaling the application. If so, is there a way to stop my application from scaling?
Thank you!
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World!");
primaryStage.setScene(new Scene(root, 1280, 800));
primaryStage.show();
}
It has nothing to do with windows scaling. all you have to do is to remove these arguments inside your Scene i.e 1280 and 800, but don't remove root.
new code will be like -
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World!");
primaryStage.setScene(new Scene(root);
primaryStage.show();
}

Can't display text in a simple javafx application

I'm struggling to display text in a simple javafx application, and I'm struggling to see why it's happening. Here's my code:
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
//Declarations
Pane root = new Pane();
Scene scene = new Scene(root, 960, 600);
javafx.scene.canvas.Canvas background = new Canvas(3840, 2160);
StackPane infoPane = new StackPane();
Text test = new Text("Hello");
test.setY(500);
test.setX(500);
root.getChildren().add(test);
//Stage Setting
primaryStage.setScene(scene);
primaryStage.setTitle("Test application");
primaryStage.setFullScreen(true);
primaryStage.setFullScreenExitHint("Press escape to exit fullscreen");
primaryStage.show();
//javafx.scene.image.Image icon = new Image("Sample/Test.png");
//primaryStage.getIcons().add(icon);
//Parent and child declarations
infoPane.getChildren().add(test);
//Styling
//Background
StackPane backgroundHolder = new StackPane();
backgroundHolder.setStyle("-fx-background-color: #0053A8");
backgroundHolder.getChildren().add(background);
root.getChildren().add(backgroundHolder);
}
The idea is to have an application with a blue background, that has different text fields on it. Thanks for any and all help!
You add the test node to your root Pane, but then you add it also to infoPane. Since a node can only appear once in the scene graph, you are essentially removing it from the root pane before you can see it.
Note that you never add infoPane to your scene graph.
I suggest you read this tutorial, and maybe try a few simple layouts with Scene Builder.

Categories

Resources