In JavaFX, how can I switch skins using CSS?

Question

What is the correct place to define a Skin via CSS in JavaFX? Say I have a very simple custom control...

public class ActionLink extends Control {
    private final StringProperty text = new SimpleStringProperty();
    public final StringProperty textProperty() {return text;}
    public final String getText() {return text.get();}
    public final void setText(String text) {this.text.set(text);}
}

I know that I can specify the default skin in the control. Assuming I have an ActionLinkSkin...

@Override
protected Skin<?> createDefaultSkin() {
    return new ActionLinkSkin(this);
}

If I don't use createDefaultSkin(), I see a SEVERE warning indicating a skin can't be found:

The -fx-skin property has not been defined in CSS for ActionLink@59ebabd \
  and createDefaultSkin() returned null.

First off, I'm not certain where the control's CSS belongs. Should I be using a stylesheet for the control, action-link.css, or should I be using a stylesheet for the skin, action-link-skin.css? To me, it seems like the skin and CSS are going to be fairly interdependent, but using a stylesheet for the control seems to be more popular.

Second, and my main problem, I don't know where to define -fx-skin so it gets discovered correctly.

Now, assuming I have my CSS set up correctly, what if I want to include an alternate skin, ActionLinkButtonSkin? Is there a way it can be set up so a parent component can select either skin via CSS? For example:

.action-link {
    -fx-skin: "ActionLinkSkin";
}

...or:

.action-link {
    -fx-skin: "ActionLinkButtonSkin";
}

score 0 · Accepted Answer · answered Feb 04 '15 at 23:41

The issue I was having here is that I wasn't adding the action-link style to my control. Here is a complete version of my simple ActionLink control:

public class ActionLink extends Control {
    static {
        // Stylesheets is a custom class that resides alongside my CSS files
        // and returns properly externalized locations in a convention based
        // manner.
        StyleManager.getInstance().addUserAgentStylesheet(
            Stylesheets.byConvention(ActionLink.class)
        );
    }

    private final StringProperty text = new SimpleStringProperty();
    public final StringProperty textProperty() {return text;}
    public final String getText() {return text.get();}
    public final void setText(String text) {this.text.set(text);}

    public ActionLink() {
        getStyleClass().setAll("action-link");
    }
}

In JavaFX, how can I switch skins using CSS?

1 Answers1