-1

I spent who knows how long trying to research this beforehand, yet I have found no answer suited towards my problem.

Currently, I am creating 22 Rectangle Objects, in which I want to assign an image to each of them, which is the back of a playing card. However, when I try to, the image of a playing card appears for a split second, before the image reverts to a black rectangle.

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import me.potato.applications.enums.Card;

import java.awt.*;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Random;

public class Main extends Application {

    private static int width;
    private static int height;

    private static Button hitButton;
    private static Button revealCardsButton;

    private static Random r;

    private static ArrayList<Card> user;
    private static ArrayList<Card> dealer;
    private static ArrayList<Card> cards;

    private static Rectangle U0,U1,U2,U3,U4,U5,U6,U7,U8,U9,U10,D0,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10;

    public static void main(String[] args) {

        width = ((int) Toolkit.getDefaultToolkit().getScreenSize().getWidth());
        height = ((int) Toolkit.getDefaultToolkit().getScreenSize().getHeight());

        user = new ArrayList<>();
        dealer = new ArrayList<>();

        cards = new ArrayList<>();
        cards.addAll(Arrays.asList(Card.values()));

        r = new Random();

        U0  = new Rectangle(width / 12, height / 4.5);
        U1  = new Rectangle(width / 12, height / 4.5);
        U2  = new Rectangle(width / 12, height / 4.5);
        U3  = new Rectangle(width / 12, height / 4.5);
        U4  = new Rectangle(width / 12, height / 4.5);
        U5  = new Rectangle(width / 12, height / 4.5);
        U6  = new Rectangle(width / 12, height / 4.5);
        U7  = new Rectangle(width / 12, height / 4.5);
        U8  = new Rectangle(width / 12, height / 4.5);
        U9  = new Rectangle(width / 12, height / 4.5);
        U10 = new Rectangle(width / 12, height / 4.5);

        D0  = new Rectangle(width / 12, height / 4.5);
        D1  = new Rectangle(width / 12, height / 4.5);
        D2  = new Rectangle(width / 12, height / 4.5);
        D3  = new Rectangle(width / 12, height / 4.5);
        D4  = new Rectangle(width / 12, height / 4.5);
        D5  = new Rectangle(width / 12, height / 4.5);
        D6  = new Rectangle(width / 12, height / 4.5);
        D7  = new Rectangle(width / 12, height / 4.5);
        D8  = new Rectangle(width / 12, height / 4.5);
        D9  = new Rectangle(width / 12, height / 4.5);
        D10 = new Rectangle(width / 12, height / 4.5);

        U0.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U1.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U2.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U3.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U4.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U5.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U6.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U7.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U8.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U9.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U10.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");

        D0.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D1.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D2.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D3.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D4.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D5.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D6.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D7.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D8.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D9.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D10.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");

        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {

        hitButton = new Button("HIT");
        hitButton.alignmentProperty().setValue(Pos.CENTER);

        revealCardsButton = new Button("REVEAL CARDS");
        revealCardsButton.alignmentProperty().setValue(Pos.CENTER);

        VBox root = new VBox(5);
        root.setAlignment(Pos.CENTER);
        root.setPrefSize(width, height);

        HBox cardSetDealer = new HBox(5);
        HBox hitButtonContainer = new HBox(5);
        HBox cardSetUser = new HBox(5);
        HBox revealCardsButtonContainer = new HBox(5);

        cardSetDealer.setAlignment(Pos.CENTER);
        cardSetUser.setAlignment(Pos.CENTER);
        cardSetDealer.getChildren().addAll(D0,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10);
        cardSetUser.getChildren().addAll(U0,U1,U2,U3,U4,U5,U6,U7,U8,U9,U10);

        hitButtonContainer.getChildren().add(hitButton);
        revealCardsButtonContainer.getChildren().add(revealCardsButton);

        root.getChildren().add(cardSetDealer);
        root.getChildren().add(hitButtonContainer);
        root.getChildren().add(cardSetUser);
        root.getChildren().add(revealCardsButtonContainer);

        Scene scene = new Scene(root);

        stage = new Stage();
        stage.setScene(scene);
        stage.show();

    }
}

I am unsure what I am doing wrong, or if I am misusing the .css segment, if my code itself is faulty, if I'm just stupid, etc.

--EDIT--------

Changed code due to @James_D 's suggestion to use Region over Rectangle.

import javafx.application.Application;
import javafx.css.Style;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Background;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import me.potato.applications.enums.Card;

import java.awt.*;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Random;

public class Main extends Application {

    private static int width;
    private static int height;

    private static Button hitButton;
    private static Button revealCardsButton;

    private static Random r;

    private static ArrayList<Card> user;
    private static ArrayList<Card> dealer;
    private static ArrayList<Card> cards;

    private static Region U0,U1,U2,U3,U4,U5,U6,U7,U8,U9,U10,D0,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {

        width = ((int) Toolkit.getDefaultToolkit().getScreenSize().getWidth());
        height = ((int) Toolkit.getDefaultToolkit().getScreenSize().getHeight());

        user = new ArrayList<>();
        dealer = new ArrayList<>();

        cards = new ArrayList<>();
        cards.addAll(Arrays.asList(Card.values()));

        r = new Random();

        U0  = new Region(); U0.setPrefSize(width / 12, height / 4.5);
        U1  = new Region(); U1.setPrefSize(width / 12, height / 4.5);
        U2  = new Region(); U2.setPrefSize(width / 12, height / 4.5);
        U3  = new Region(); U3.setPrefSize(width / 12, height / 4.5);
        U4  = new Region(); U4.setPrefSize(width / 12, height / 4.5);
        U5  = new Region(); U5.setPrefSize(width / 12, height / 4.5);
        U6  = new Region(); U6.setPrefSize(width / 12, height / 4.5);
        U7  = new Region(); U7.setPrefSize(width / 12, height / 4.5);
        U8  = new Region(); U8.setPrefSize(width / 12, height / 4.5);
        U9  = new Region(); U9.setPrefSize(width / 12, height / 4.5);
        U10 = new Region(); U10.setPrefSize(width / 12, height / 4.5);

        D0  = new Region(); D0.setPrefSize(width / 12, height / 4.5);
        D1  = new Region(); D1.setPrefSize(width / 12, height / 4.5);
        D2  = new Region(); D2.setPrefSize(width / 12, height / 4.5);
        D3  = new Region(); D3.setPrefSize(width / 12, height / 4.5);
        D4  = new Region(); D4.setPrefSize(width / 12, height / 4.5);
        D5  = new Region(); D5.setPrefSize(width / 12, height / 4.5);
        D6  = new Region(); D6.setPrefSize(width / 12, height / 4.5);
        D7  = new Region(); D7.setPrefSize(width / 12, height / 4.5);
        D8  = new Region(); D8.setPrefSize(width / 12, height / 4.5);
        D9  = new Region(); D9.setPrefSize(width / 12, height / 4.5);
        D10 = new Region(); D10.setPrefSize(width / 12, height / 4.5);

        U0.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U1.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U2.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U3.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U4.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U5.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U6.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U7.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U8.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U9.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U10.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");

        D0.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D1.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D2.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D3.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D4.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D5.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D6.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D7.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D8.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D9.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D10.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");

        hitButton = new Button("HIT");
        hitButton.alignmentProperty().setValue(Pos.CENTER);

        revealCardsButton = new Button("REVEAL CARDS");
        revealCardsButton.alignmentProperty().setValue(Pos.CENTER);

        VBox root = new VBox(5);
        root.setAlignment(Pos.CENTER);
        root.setPrefSize(width, height);

        HBox cardSetDealer = new HBox(5);
        HBox hitButtonContainer = new HBox(5);
        HBox cardSetUser = new HBox(5);
        HBox revealCardsButtonContainer = new HBox(5);

        cardSetDealer.setAlignment(Pos.CENTER);
        cardSetUser.setAlignment(Pos.CENTER);
        cardSetDealer.getChildren().addAll(D0,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10);
        cardSetUser.getChildren().addAll(U0,U1,U2,U3,U4,U5,U6,U7,U8,U9,U10);

        hitButtonContainer.getChildren().add(hitButton);
        revealCardsButtonContainer.getChildren().add(revealCardsButton);

        root.getChildren().add(cardSetDealer);
        root.getChildren().add(hitButtonContainer);
        root.getChildren().add(cardSetUser);
        root.getChildren().add(revealCardsButtonContainer);

        Scene scene = new Scene(root);

        stage = new Stage();
        stage.setScene(scene);
        stage.show();

    }
}
Connor
  • 57
  • 1
  • 2
  • 12
  • It's strange that you ever see the image; [`Rectangle`](https://docs.oracle.com/javase/9/docs/api/javafx/scene/doc-files/cssref.html#rectangle) does not have a `-fx-background-image` property. Use a `Region` instead (set its minimum and maximum width and height to force it to have a fixed size). – James_D Mar 29 '18 at 23:16
  • I just modified the code, however, it just leaves blank segments there instead of the image, no signs of any objects on the screen. Also, I have indeed defined the size. – Connor Mar 29 '18 at 23:24
  • Can you post the modified code? Also, you should not be creating any of these (and certainly not setting the style) in the `main()` method; the JavaFX toolkit will not even be started at that point. Move all that code to the `start()` method. – James_D Mar 29 '18 at 23:44
  • Updated version works fine for me; obviously I had to change the path and create an image, and remove references to the classes you didn't include, etc etc, but it worked and I could see the images on the cards. So probably your path to the image is wrong. It's generally a bad idea to use relative paths to images, especially with `..`, as that doesn't work when you bundle the app as a jar file. Do you really have a `resources` folder in the *classpath*? That seems highly unlikely... – James_D Mar 30 '18 at 00:16
  • Currently I have: | IdeaProjects > src > me > potato > applications > Main | then | IdeaProjects > resources > images > BACK.png | A simplified version of my hierarchy. – Connor Mar 30 '18 at 00:23
  • The image is loaded at runtime, though, not compile time. So what's really important is the structure once it's all deployed. What is in the build/output folder (or whatever IntelliJ calls it)? – James_D Mar 30 '18 at 00:25
  • out > production > IdeaProjects > images > BACK.png ||| Pretty sure this is what you mean? This is what gets outputted – Connor Mar 30 '18 at 00:28
  • 1
    Right, so as I said earlier, there is no `resources` folder in the classpath. Surely you just need `url("/images/BACK.png")`?? – James_D Mar 30 '18 at 00:29
  • 1
    Off-topic: 1. Read https://en.wikipedia.org/wiki/Don't_repeat_yourself 2. Don't make everything (or, apart from constants, *anything*) static. 3. Don't mix AWT and JavaFX. – James_D Mar 30 '18 at 00:33
  • As it turns out, ``\\`` is not the proper file separator, and I needed to use `/`, which, now honestly makes me feel even worse. Thank you however you for your help regarding the `Region` over `Rectangle`, and for making me realize my Project was incorrectly saved as well and would corrupt other projects being the way it is. – Connor Mar 30 '18 at 00:40
  • Oh, didn't notice the separator. You realize these are not "files", but "resources", which are accessed as URLs, right? Not sure what you mean by "incorrectly saved". The project structure looks completely standard. – James_D Mar 30 '18 at 00:44
  • By incorrectly saved, I mean I chose a file path which overwrites everything I save. IdeaProjects is a default path for my Projects, however I saved my project AS IdeaProjects, overwriting preexisting files, and will overwrite future files or cause errors for my current. – Connor Mar 30 '18 at 00:49

1 Answers1

2
  1. Using a Region instead of a Rectangle is the correct approach. According to the documentation, Rectangle does not have a -fx-background-image CSS property.
  2. The path to your image is wrong. The resources folder is part of the organization of the source code, and is typically configured as a source folder (i.e. its contents are deployed to the root of the classpath). It is also generally a bad idea to use relative paths such as .. and . in URL paths (for example, the filesystem associated with a jar class loader will not understand it). See JAVAFX: Location is not set error. Assuming that resources is configured in the usual way, you should just need url("/images/BACK.png").
James_D
  • 201,275
  • 16
  • 291
  • 322