Styling Javafx with CSS

Question

I have been working with javafx, and have started to work on styling the form. I have created a program that would create a weak encryption for your text, it isn't totally done.

Here is the java code -

public class encryption extends Application {

    private static StringBuffer password;
    private static int key;

    public void setValue(String value) {
        password = new StringBuffer(value);
    }

    public void encryption() {      
        RNG();

        for(int i = 0; i < password.length(); i++) {
            int cValue = (int)password.charAt(i);

            int nValue = cValue ^ key;

            password.setCharAt(i, (char)nValue);
        }   
        System.out.println(password);
        System.out.println("");
    }

    public void RNG() {
         Random rand = new Random();

            // nextInt is normally exclusive of the top value,
            // so add 1 to make it inclusive
            key = rand.nextInt(((222 - 8) + 1) + 8) ^ 26;

    }

    public void decryption() {
        for(int i = 0; i < password.length(); i++) {
            int nValue = key ^ password.charAt(i);

            password.setCharAt(i, (char)nValue);

        }
        System.out.println(password);
    }

    public void start(Stage arg0) throws Exception {

        StringBuffer eLabel = new StringBuffer();

        Scene scene;

        VBox container = new VBox();
        HBox root = new HBox();
        HBox rootA = new HBox();
        HBox rootB = new HBox();

        Label instructions;
        Button submit;
        Button reveal;
        PasswordField message;
        Label encryption;
        Label typed;

        instructions = new Label("Submit Label that you want to encrypt");  

        root.getChildren().add(instructions);

        message = new PasswordField();
        message.setOnKeyPressed(new EventHandler<KeyEvent>() {

            public void handle(KeyEvent e) {
                if(e.getCode() == KeyCode.ENTER) {
                    System.out.println(message.getText());
                    setValue(message.getText());
                    encryption();
                    decryption();
                }
            }

        });
        submit = new Button("Click to Submit");

        typed = new Label();
        typed.setId("value");

        rootA.getChildren().add(message);
        rootA.getChildren().add(submit);

        reveal = new Button("Show Text");
        reveal.setOnAction(new EventHandler<ActionEvent>() {

            public void handle(ActionEvent arg0) {
                typed.setText(message.getText());
            }

        });

        rootB.getChildren().add(reveal);
        rootB.getChildren().add(typed);

        container.getChildren().add(root);
        container.getChildren().add(rootA);
        container.getChildren().add(rootB);

        scene = new Scene(container, 1000, 500);

        String css = "encryption.css";
        scene.getStylesheets().add(css);

        Stage stage = new Stage();
        stage.setScene(scene);
        stage.setTitle("Javafx Encryption");

        stage.show();
    }


    public static void main(String[] args) {

        launch();
    }

}

Here is the CSS -

.root {
    -fx-text-fill: rgb(49, 89, 23);
    -fx-background-color: #202020;
}

.button {
    -fx-background-color: red;
    -fx-text-fill: black;
}

.vbox {
    -fx-background-color: white;
    -fx-spacing: 10;
    -fx-height: 100%;
}

.hbox {
    -fx-background-color: #502576;
    -fx-spacing: 10;
}

#value {
    -fx-font-size: 12px;    
}

.label {
    -fx-font-size: 20px;
    -fx-text-fill: white;
}

The hbox isn't getting the applied changes along with the vbox.

Why does the hbox, and the vbox not get the changes from the css?

Answer 1

For the most part, it is only Control subclasses that have default style classes. Additionally, the root of the scene gets the style class root.

So you need to add the vbox and hbox style classes manually:

    VBox container = new VBox();
    container.getStyleClass().add("vbox");
    HBox root = new HBox();
    root.getStyleClass().add("hbox");
    HBox rootA = new HBox();
    rootA.getStyleClass().add("hbox");
    HBox rootB = new HBox();
    rootB.getStyleClass().add("hbox");