Develop Reference

JavaFx: ImageView disappears after moving through the scene

I have a code written using javafx and java 11. As I showed in the below code snippet, when I move my ImageView to right of the scene, The ImageView disappears.
At first:
and then after moving it using arrow keys with the help of scene event listener:
then:
and finally:
I don't use fxml. Here is my demo which has the problem too.
public class HelloApplication extends Application {
public String fetchResource(String path) {
return Objects.requireNonNull(getClass().getResource(path)).toString();
}
#Override
public void start(Stage stage) throws IOException {
Rectangle r = new Rectangle(100, 100);
ImageView spaceShip = new ImageView(fetchResource("spaceShip.png"));
spaceShip.setFitHeight(100);
spaceShip.setFitWidth(100);
spaceShip.setX(0);
spaceShip.setY(0);
EventHandler<KeyEvent> keyListener = event -> {
if (event.getCode() == KeyCode.RIGHT) {
spaceShip.setX(spaceShip.getX() + 20);
}
};
Group game = new Group(spaceShip);
Scene scene = new Scene(game, 1840, 1080);
scene.setOnKeyPressed(keyListener);
stage.setTitle("Hello!");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
I should mention that I create a rectangle and check the scenario with that, And there was not any problem. I think there is some problem with ImageView.

I couldn't reproduce the issue with your code, but I could with SceneBuilder. You may get the desired result if you wrap the Group in a Pane (at least it works in SceneBuilder).
Group game = new Group(spaceShip);
Pane pane = new Pane(game);
Scene scene = new Scene(pane, 1840, 1080);
stage.setScene(scene);
stage.show();

How to parse/map JavaFX CSS file to retrieve its properties and values?

My application allows users to use custom CSS themes to style the interface. I have several pre-built "themes" available to choose from that are very simple, with only 3 properties.
Sample CSS:
.root{
-fx-background: #325c81;
-fx-default-button: #77a3ca;
-fx-base: #a7c4dd;
}
The application has 3 ColorPicker controls that need to allow users to select a color for each of those properties and save back to the CSS file.
I have no problem with actually writing the CSS file, but I cannot find a way to parse the .css file in order to set the values of the ColorPicker controls with the values from the .css file.
Basic Program Flow
1) User selects a premade theme from ComboBox:
cboPresetTheme.valueProperty().addListener((observable, priorTheme, newTheme) -> {
Utility.applyTheme(cboPresetTheme.getScene(), newTheme);
});
2) The associated .css file is loaded and applied to the current Scene:
public static void applyTheme(Scene scene, Theme theme) {
scene.getStylesheets().clear();
File css = new File("themes/" + theme.getFileName());
File fontFile = new File("themes/Font.css");
scene.getStylesheets().addAll(
css.toURI().toString(),
fontFile.toURI().toString());
}
3) The 3 ColorPicker controls are updated with the values from the applied StyleSheet:
cpBackground.setValue(Color.valueOf(cssFileBackground));
cpBase.setValue(Color.valueOf(cssFileBase));
cpDefaultButton.setValue(Color.valueOf(cssFileDefaultButton));
While I have no problem with steps 1 & 2, I do not know how to process step 3.
I have looked at other CSS Parser libraries (thank you, Google) but they seem more geared toward stand CSS and don't support FX properties. The StackExchange question edit or parse FX-CSS file programmatically appears to be asking the same question but it was never successfully answered.
One answer suggests using CSS Parser to accomplish this, but as there is little to know documentation (and what is there is beyond my current comprehension level), I don't know where to begin.
I understand there may not be a standard API currently available to accomplish this, but I was hoping there may be a simple library or solution out there that I have been unable to find.

There are several ways you can tackle the conversion of a CSS declaration into a Color.
Style an auxiliar node
This is quite simple, but effective: The idea is that you could just style the background color of a node with the same css, and then set the colorPicker value with that color.
The only thing you need to take into account in this case is that the node is styled only when is added to a scene.
So you have to add the node to the scene. Adding a node with 0x0 size won't cause any issue, but maybe you don't want it to be there, so you can use an auxiliar scene.
public class CSSParsingApp extends Application {
#Override
public void start(Stage primaryStage) {
ColorPicker cpBackground = new ColorPicker(retrieveColor("value1"));
ColorPicker cpBase = new ColorPicker(retrieveColor("value2"));
ColorPicker cpDefaultButton = new ColorPicker(retrieveColor("value3"));
VBox root = new VBox(10, cpBackground, cpDefaultButton, cpBase);
root.setAlignment(Pos.CENTER);
Scene scene = new Scene(root, 300, 250);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
private Color retrieveColor(String value) {
Pane pane = new Pane();
pane.getStyleClass().add(value);
Scene sceneAux = new Scene(pane);
sceneAux.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
pane.applyCss();
return (Color) pane.getBackground().getFills().get(0).getFill();
}
public static void main(String[] args) {
launch(args);
}
}
where style.css is:
.root {
-fx-background: #325c81;
-fx-default-button: #77a3ca;
-fx-base: #a7c4dd;
}
.value1 {
-fx-background-color: -fx-background;
}
.value2 {
-fx-background-color: -fx-default-button;
}
.value3 {
-fx-background-color: -fx-base;
}
Use StylableProperties
A similar, more elegant solution is found here. It uses StylableProperties to create a node, that you can style with a custom -named-color property, and then adds this helper node to the main scene.
Basically it is the same idea as the one above, maybe more clean, as you don't need to modify your css file.
Using CssToColorHelper, your code will be like this:
public class CSSParsingApp extends Application {
private CssToColorHelper helper = new CssToColorHelper();
#Override
public void start(Stage primaryStage) {
ColorPicker cpBackground = new ColorPicker();
ColorPicker cpBase = new ColorPicker();
ColorPicker cpDefaultButton = new ColorPicker();
VBox root = new VBox(10, cpBackground, cpDefaultButton, cpBase, helper);
root.setAlignment(Pos.CENTER);
Scene scene = new Scene(root, 300, 250);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
cpBackground.setValue(getNamedColor("-fx-background"));
cpDefaultButton.setValue(getNamedColor("-fx-default-button"));
cpBase.setValue(getNamedColor("-fx-base"));
primaryStage.setScene(scene);
primaryStage.show();
}
private Color getNamedColor(String name) {
helper.setStyle("-named-color: " + name + ";");
helper.applyCss();
return helper.getNamedColor();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
where style.css is your css file:
.root {
-fx-background: #325c81;
-fx-default-button: #77a3ca;
-fx-base: #a7c4dd;
}
Use JavaFX CSSParser
If you are looking for a CSSParser, why don't you just use the one included in JavaFX, the one you actually use to apply styling to your app?
It is under com.sun.javafx.css.parser.CSSParser, and if the answer is you don't want to use private API, the good news is that it will be public API in JavaFX 9.
With it you can parse the css file and retrieve any parsed value easily.
public class CSSParsingApp extends Application {
#Override
public void start(Stage primaryStage) {
ColorPicker cpBackground = new ColorPicker();
ColorPicker cpBase = new ColorPicker();
ColorPicker cpDefaultButton = new ColorPicker();
VBox root = new VBox(10, cpBackground, cpDefaultButton, cpBase);
root.setAlignment(Pos.CENTER);
Scene scene = new Scene(root, 300, 250);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
cpBackground.setValue(parseColor("-fx-background"));
cpDefaultButton.setValue(parseColor("-fx-default-button"));
cpBase.setValue(parseColor("-fx-base"));
primaryStage.setScene(scene);
primaryStage.show();
}
private Color parseColor(String property) {
CSSParser parser = new CSSParser();
try {
Stylesheet css = parser.parse(getClass().getResource("style.css").toURI().toURL());
final Rule rootRule = css.getRules().get(0); // .root
return (Color) rootRule.getDeclarations().stream()
.filter(d -> d.getProperty().equals(property))
.findFirst()
.map(d -> ColorConverter.getInstance().convert(d.getParsedValue(), null))
.get();
} catch (URISyntaxException | IOException ex) { }
return Color.WHITE;
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
where style.css is your css file:
.root {
-fx-background: #325c81;
-fx-default-button: #77a3ca;
-fx-base: #a7c4dd;
}

displaying a tooltip in javafx brings its stage into the foreground

I am trying to work around this bug in the jdk: http://bugs.java.com/bugdatabase/view_bug.do?bug_id=8088624
public class Blubb extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
Button btn = new Button("Click");
btn.setTooltip(new Tooltip("Blubb"));
Scene scene = new Scene(new BorderPane(btn), 320, 240);
primaryStage.setScene(scene);
primaryStage.show();
Stage secondStage = new Stage();
secondStage.setScene(new Scene(new BorderPane(new Button("Click")), 320, 240));
//secondStage.initOwner(primaryStage);
secondStage.show();
}
}
If the button on the primary stage is hovered, it will come in front of the second stage. I found that calling initOwner() on a Stage will eliminate this behavior.
Now my problem is following: I have multiple "popups" that have a common owner (the primary stage). Hovering over controls on the primary stage doesn't cause any unexpected behavior after the initOwner() workaround. If you however hover over controls in a popup while another popup was in focus, the hovered popup will steal focus.
Is there a way I can work around this bug for not only the primary stage but also the popups?
UPDATE: turns out my workaround has undesired side-effects. Javadocs for Stage state following:
A stage will always be on top of its parent window.
So additionally, what would be a workaround that makes the popup not "always on top" and minimizable?

There is a way to get around it by overlaying StackPanes. Create your Scene with a StackPane so that you can add another StackPane when the stage has lost its focus. The overlayed pane will prevent Tooltips or anything else happening on mouse-over while the pane is not in focus. You may also minimize any of your stages and they won't be always-on-top.
public class Blubb extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
Button button_1 = new Button("Button #1");
button_1.setTooltip(new Tooltip("Blubb #1"));
StackPane primary = new StackPane(new BorderPane(button_1));
primaryStage.setScene(new Scene(primary, 320, 240));
addStageFocusListener(primaryStage, primary);
primaryStage.show();
Button button_2 = new Button("Button #2");
button_2.setTooltip(new Tooltip("Blubb #2"));
StackPane second = new StackPane(new BorderPane(button_2));
Stage secondStage = new Stage();
addStageFocusListener(secondStage, second);
secondStage.setScene(new Scene(second, 320, 240));
secondStage.show();
}
public void addStageFocusListener(Stage stage, StackPane stackPane) {
stage.focusedProperty().addListener(new ChangeListener<Boolean>(){
public final StackPane preventTooltip = new StackPane();
public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
if(stage.isFocused()) {
if(stackPane.getChildren().contains(preventTooltip)) {
stackPane.getChildren().remove(preventTooltip);
}
} else {
stackPane.getChildren().add(preventTooltip);
}
}
});
}
}

You can try this:
public static final disableMouseEventOnUnfocus(final Stage stage)
{
if (stage == null
|| stage.getScene() == null
|| stage.getScene().getRoot() == null)
return;
else
{
stage.getScene().getRoot().mouseTransparentProperty().bind(stage.focusedProperty().not());
}
}
I didn't try it though, but if it works, this should be a good alternative. There is no need to restructure your layout, and you can leave all your layout in FXML, without specifying fx:id for the tooltips.

I've come up with this alternative solution, as I've found it easier in my case to subclass Tooltip and apply a fix there. I just overload the show() method to only show if the owning window is focused. It's working like a charm for me...
public class FixedTooltip extends Tooltip {
public FixedTooltip(String string) {
super(string);
}
#Override
protected void show() {
Window owner = getOwnerWindow();
if (owner.isFocused())
super.show();
}
}

You could try to unset the tooltip whenever the node's window loses focus. Such as below:
public class Blubb extends Application {
public static void main(String[] args) {
launch(args);
}
public static void installTooltip(Node n, Tooltip tp)
{
Window w = n.getScene().getWindow();
w.focusedProperty().addListener((val, before, after) -> {
if (after)
Tooltip.install(n, tp);
else
Tooltip.uninstall(n, tp);
});
if (w.isFocused())
Tooltip.install(n, tp);
else
Tooltip.uninstall(n, tp);
}
#Override
public void start(Stage primaryStage) throws Exception {
Tooltip tp = new Tooltip("Blubb");
Button btn = new Button("Click");
Scene scene = new Scene(new BorderPane(btn), 320, 240);
primaryStage.setScene(scene);
//primaryStage.show();
Stage secondStage = new Stage();
secondStage.setScene(new Scene(new BorderPane(new Button("Click")), 320, 240));
//secondStage.initOwner(primaryStage);
secondStage.show();
primaryStage.show();
installTooltip(btn, tp);
}
}
Of course, you would have to call installTooltip after the node is added to the component.

Javafx Scene switching causing stage size increase

I am using Javafx (without using FXML), and I am passing the stage into the a controller to change the scene on the stage when a button is clicked. The scene changes correctly but the size of the stage and the scene increases.It increases in size by about 0.1 (in the width) and the height sometimes also increases (not every time).
Here is the controller being used.
public class Controller {
public Controller(){
}
public static void homeButtonhandler(Stage stage){
stage.close();
}
public static void adminButtonhandler(Stage stage){
adminPane adminPane1 = new adminPane(stage);
Scene adminScene = new Scene (adminPane1);
stage.setScene(adminScene);
}}
The adminPane extends another class I created called mainPane which both extend the Pane class. Which have other panes within them to create the GUI structure. The sizing for the main pane is set up like so:
top = createTop(stage);
this.getChildren().addAll(top);
this.setWidth(stage.getWidth());
this.setPrefWidth(stage.getWidth());
this.setMaxWidth(stage.getWidth());
this.setMinWidth(stage.getWidth());
this.setHeight(stage.getHeight());
this.setMaxHeight(stage.getHeight());
this.setMinHeight(stage.getHeight());
this.setPrefHeight(stage.getHeight());
I am testing the classes using:
public class test extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
//primaryStage.setResizable(true);
mainPane myPane = new mainPane(primaryStage);
Scene homeScene = new Scene (myPane);
primaryStage.setScene(homeScene);
primaryStage.getIcons().add(new Image(getClass().getResourceAsStream("/resources/icons/joulesIcon.png")));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I believe it has something to do with my passing of the stage, any pointers would be much appreciated.

I also found that stuff was being drawn below the bottom of the window when I used primaryStage.setScene(new Scene(root, primaryStage.getWidth(), primaryStage.getHeight())). My case was resolved by using the dimensions of the old scene rather than the dimensions of the primary stage.
public void setScene(Parent root) {
Scene oldScene = primaryStage.getScene();
primaryStage.setScene(oldScene == null
? new Scene(root, primaryStage.getMinWidth(), primaryStage.getMinHeight())
: new Scene(root, oldScene.getWidth(), oldScene.getHeight()));
}

SceneBuilder 2.0 Dynamic shape generation

I have an FXML file that does some certain animations with some right now static(so to speak) shapes that are hard-coded into the fxml. What I am trying to do is dynamically create shapes from Java Objects that have certain properties such as color which these objects will be pulling from a database and populate the fxml with these object based shapes, I am not sure how to go about doing this. Below is the code for the main class, I know why the error is happening but not sure how to do it any other way.
public class TestConveyorView extends GuiceApplication {
#Inject
private GuiceFXMLLoader fxmlLoader;
public Injector createInjector() {
return Guice.createInjector(new AbstractModule() {
#Override
protected void configure() {
}
});
}
public static void main(String[] args) {
Application.launch(args);
}
#Override
public void init(List<Module> modules) throws Exception {
}
#Override
public void start(Stage stage) throws Exception {
//GridPane root = new GridPane();
Parent root = fxmlLoader.load(getClass().getClassLoader().getResource("fxml/TestConveyorView.fxml")).getRoot();
Box box = new Box(1, red);
Rectangle rectangle = new Rectangle(50,50,box.getColor());
// Can't seem to add it to the scene, problem occurs here.
root.getChildren().add(rectangle);
Scene scene = new Scene(root);
// BackgroundImage background = new BackgroundImage(null, BackgroundRepeat.REPEAT, BackgroundRepeat.REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT);
stage.setScene(scene);
stage.show();
}
}

Ok I fixed the problem by changing
Parent root = ...
To
AnchorPane root = ...
Simple fix that I overlooked I guess.