CODEWITHSUNDEEP
javacssjavafxcss-selectors
Jens
Jens

Reputation: 9406

JavaFX css id selector with dot (full stop) in name

I am working on a JavaFX project where node ids have to be unique. This is implemented by naming them with a "full path" name, e.g. "myPane.button1". When I try to select one of these elements in a css stylesheet I cannot figure out how to write the id selector. Here is an example application with two buttons named "the.button" and "thebutton":

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class CssTest extends Application {

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

    @Override
    public void start(final Stage stage) {
        VBox vbox = new VBox();
        Button b1 = new Button();
        b1.setId("the.button");
        b1.setText("BUTTON1");

        Button b2 = new Button();
        b2.setId("thebutton");
        b2.setText("BUTTON2");

        vbox.getChildren().addAll(b1, b2);
        vbox.getStylesheets().add("stylesheet.css");

        final Scene scene = new Scene(vbox);

        stage.setScene(scene);
        stage.show();
    }    
}

The css file is

#the\.button {
    -fx-graphic: url("Keyboard.png");
}

#thebutton {
    -fx-graphic: url("Keyboard.png");
}

Escaping the dot should work, but I cannot get JavaFX to match the element. I could not find restrictions on the element id in the JavaFX doc, both for Node.setId and in the JavaFX css reference, but if it is not allowed it would be a good argument to change the names.

The JavaFX CSS reference says that

JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version 2.1 with some additions from current work on version 3. JavaFX CSS also has some extensions to CSS in support of specific JavaFX features.

I would conclude that this means that a valid W3C CSS file is also a valid JavaFX CSS file. And then defines the id as

Each node in the scene graph has an id variable, a string. This is analogous to the id="..." attribute that can appear HTML elements. Supplying a string for a node's id variable causes style properties for this node to be looked up using that id. Styles for specific ids can be specified using the "#nodeid" selector syntax in a style sheet.

For HTML, the id attribute's naming convention is

Naming rules: Must contain at least one character Must not contain any space characters In HTML, all values are case-insensitive

So there is no restriction on the id, but I cannot write a selector that selects it. I think this is a bug.

Upvotes: 2

Views: 2286

Answers (1)

Mansueli
Mansueli

Reputation: 6939

If you Parse your CSS, you'll see:

    public static void main(String[] args) {
         CSSParser cssParser =  new com.sun.javafx.css.parser.CSSParser();
         Stylesheet s = cssParser.parse("#the\\.button {\n" +
"    -fx-graphic: url(\"Keyboard.png\");\n" +
"}\n" +
"\n" +
"#thebutton {\n" +
"    -fx-graphic: url(\"Keyboard.png\");\n" +
"}");
         System.out.println(""); //add a breakpoint here
    }

That there is only one rule for the id thebutton and there is two ways to understand why:

Which I quote below:

While the JavaFX CSS parser will parse valid CSS syntax, it is not a fully compliant CSS parser. One should not expect the parser to handle syntax not specified in this document.

Emphasis mine

Which means if you are trying something that belongs to the CSS standard, but isn't listed on the Oracle's documentation you are going to get a hard time.

Upvotes: 2

Related Questions