This discussion is archived
6 Replies Latest reply: Dec 17, 2012 1:18 AM by 956927 RSS

CSS support for own classes

979727 Newbie
Currently Being Moderated
In the CSS support pages for JavaFX I read the following:

"At this time, the programming interfaces necessary for a class to declare support for CSS properties, to convert and load these values from CSS style sheets into object variables, and to declare and notify changes to an object's pseudo-classes, are considered internal interfaces and are not accessible directly to applications."

Is there a way around this and/or does anyone know when this support will be available? I would like to give my customers the possibility to change the look of my application.
  • 1. Re: CSS support for own classes
    956927 Newbie
    Currently Being Moderated
    Hy,

    i am not really sure what you are planning to do.
    To change the look of your application for example within a button you can override the .button styleclass within your own stylesheet.
    For pseudo classes on that button use .button:armed (when button is clicked)

    Or be more specific on your case if i did not get it :)

    BR
  • 2. Re: CSS support for own classes
    979727 Newbie
    Currently Being Moderated
    Sorry, was not very clear.

    I am developing a JavaFX application with which users can search in our Asset Management System for several types of media (especially images). Currently we use a swing client, but with JavaFX we can make a much better looking client.

    the result is displayed in the application as thumbnails, with a grey rectangle around it, text underneath, some status symbols etc. I would like the customers to be able to select for example which background color for the thumbnail they want. I know I could do this with something like:
    #thumbnail .rectangle.
    But I would also like to be able to use properties, so specify the background color when the thumbnail is selected or other properties. For this I have a boolean property in the code. So I would like to specify something like:
    #thumbnail:selected .rectangle
  • 3. Re: CSS support for own classes
    shakir.gusaroff Expert
    Currently Being Moderated
    "At this time, the programming interfaces necessary for a class to declare support for CSS properties, to convert and load these values from CSS style sheets into object variables, and to declare and notify changes to an object's pseudo-classes, are considered internal interfaces and are not accessible directly to applications."
    It means you can not manipulate CSS properties as Java object variables.
    Is there a way around this and/or does anyone know when this support will be available? I would like to give my customers the possibility to change the look of my application.
    You can update scene styles dynamically like so:
    private void changeStyleSheet(String stylePath){
            this.getScene().getStylesheets().clear();
            this.getScene().getStylesheets().add(stylePath);
        }
  • 4. Re: CSS support for own classes
    David Grieve Pro
    Currently Being Moderated
    Actually, work on a fundamental level of support for this is in progress. The proposed API can be found at https://wikis.oracle.com/display/OpenJDK/CSS+API+to+support+custom+UI+Controls

    Your input is welcomed. If you have any comments on the spec, please add them to the thread titled "[REVIEW-REQUEST] RT-21709 Consider making available the CSS     Styleable* classes as public API" in the openjfx-dev mailing list which you can reach from http://openjdk.java.net/projects/openjfx/
  • 5. Re: CSS support for own classes
    979727 Newbie
    Currently Being Moderated
    Thanks a lot for your answer. Think I understand now what is not supported.

    The solution you suggest will probably work, but would mean that I have different stylesheets for every class with different properties. Not very handy for customers I am afraid. I did try the following:

    selected.addListener(new ChangeListener() {
    @Override
    public void changed(ObservableValue ov, Object t, Object t1) {
    if (selected.get()) {
    getStyleClass().clear();
    getStyleClass().add("thumbnailselected");

    } else {
    getStyleClass().clear();
    getStyleClass().add("thumbnail");
    }
    }
    });

    This works, but I do not like this because it doesn't follow the css standard. I would like to be able to specify, I think it is called a pseudo-class.

    getStyleClass().add("thumbnail:selected");

    This doesn't work, but maybe I specify this wrongl?
  • 6. Re: CSS support for own classes
    956927 Newbie
    Currently Being Moderated
    Hy,

    if you want to add the pseudoclass you have to specify it in your stylesheet:

    in css you can specify the focused pseudo for your node.

    .mythumbnail:focused
    {
    -fx-background-color:#666666;
    }

    or you can define a own styleclass for every state:

    #mythumbnail-selected{}
    #mythumbnail:hover{}
    #mythumbnail-spezial-selection{}

    you can set the specific styleClass within code:
    mythumbnail.getStyleClass().add("mythumbnail-spezial-selection");

    So you can use one stylesheet with multiple styleclasses

    hope this can help you
    BR

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points