In JavaFX 8 can I provide a stylesheet from a String? - css

Question

Is it possible to wrap a whole Stylesheet in a string and apply it to a certain node?
Usage case would be to add specific (non changeble) behavior for PseudoClass.
I know I can use pane.getStylesheets().add(getClass().getResource("mycss.css").toExternalForm());, but I would like to know if there's some way to embrd it direcly in source; something along the lines:
pane.getStylesheets().add(
".button:ok { -fx-background-color: green; }\n"+
".button:ko { -fx-background-color: red; }");

Answer 1

I found a way of doing this by defining a new URL connection:
private String css;
public void initialize() {
...
// to be done only once.
URL.setURLStreamHandlerFactory(new StringURLStreamHandlerFactory());
...
}
private void updateCss(Node node) {
// can be done multiple times.
css = createCSS();
node.getStylesheets().setAll("internal:"+System.nanoTime()+"stylesheet.css");
}
private class StringURLConnection extends URLConnection {
public StringURLConnection(URL url){
super(url);
}
#Override public void connect() throws IOException {}
#Override public InputStream getInputStream() throws IOException {
return new StringBufferInputStream(css);
}
}
private class StringURLStreamHandlerFactory implements URLStreamHandlerFactory {
URLStreamHandler streamHandler = new URLStreamHandler(){
#Override protected URLConnection openConnection(URL url) throws IOException {
if (url.toString().toLowerCase().endsWith(".css")) {
return new StringURLConnection(url);
}
throw new FileNotFoundException();
}
};
#Override public URLStreamHandler createURLStreamHandler(String protocol) {
if ("internal".equals(protocol)) {
return streamHandler;
}
return null;
}
}
Obviously protocol "internal" can be any (non clashing) well-formed string and (in this simple example) filepath is compeltely ignored.
I use this to set the global .css, so I do not need to remember multiple strings.
It seems the Stream is opened just once, but I do not know if this holds true in all cases.
Feel free to complicate the code as needed ;)
Credit for this method goes to Jasper Potts (see this example)

Answer 2

Here is my CSS updater class based on ZioBytre's answer (+1 works very well).
This is a self contained class that can easily be copied to a project and used as it is.
It has a dependency on the commons IO IOUtils class to return a Stream based on a String. But this could easily be inlined or replaced by another library if needed.
I use this class in a project where the CSS is dynamically editable inside the application, on the server side, and pushed to the JavaFX clients. It could be used in any scenario where the CSS string does not come from a file or URL but from another source (server app, database, user input...)
It has a method to bind a string property so that the CSS changes will be automatically applied as soon as they happen.
/**
* Class that handles the update of the CSS on the scene or any parent.
*
* Since in JavaFX, stylesheets can only be loaded from files or URLs, it implements a handler to create a magic "internal:stylesheet.css" url for our css string
* see : https://github.com/fxexperience/code/blob/master/FXExperienceTools/src/com/fxexperience/tools/caspianstyler/CaspianStylerMainFrame.java
* and : http://stackoverflow.com/questions/24704515/in-javafx-8-can-i-provide-a-stylesheet-from-a-string
*/
public class FXCSSUpdater {
// URL Handler to create magic "internal:stylesheet.css" url for our css string
{
URL.setURLStreamHandlerFactory(new StringURLStreamHandlerFactory());
}
private String css;
private Scene scene;
public FXCSSUpdater(Scene scene) {
this.scene = scene;
}
public void bindCss(StringProperty cssProperty){
cssProperty.addListener(e -> {
this.css = cssProperty.get();
Platform.runLater(()->{
scene.getStylesheets().clear();
scene.getStylesheets().add("internal:stylesheet.css");
});
});
}
public void applyCssToParent(Parent parent){
parent.getStylesheets().clear();
scene.getStylesheets().add("internal:stylesheet.css");
}
/**
* URLConnection implementation that returns the css string property, as a stream, in the getInputStream method.
*/
private class StringURLConnection extends URLConnection {
public StringURLConnection(URL url){
super(url);
}
#Override
public void connect() throws IOException {}
#Override public InputStream getInputStream() throws IOException {
return IOUtils.toInputStream(css);
}
}
/**
* URL Handler to create magic "internal:stylesheet.css" url for our css string
*/
private class StringURLStreamHandlerFactory implements URLStreamHandlerFactory {
URLStreamHandler streamHandler = new URLStreamHandler(){
#Override
protected URLConnection openConnection(URL url) throws IOException {
if (url.toString().toLowerCase().endsWith(".css")) {
return new StringURLConnection(url);
}
throw new FileNotFoundException();
}
};
#Override
public URLStreamHandler createURLStreamHandler(String protocol) {
if ("internal".equals(protocol)) {
return streamHandler;
}
return null;
}
}
}
Usage :
StringProperty cssProp = new SimpleStringProperty(".root {-fx-background-color : red}");
FXCSSUpdater updater = new FXCSSUpdater(scene);
updater.bindCss(cssProp);
//new style will be applied to the scene automatically
cssProp.set(".root {-fx-background-color : green}");
//manually apply css to another node
cssUpdater.applyCssToParent(((Parent)popover.getSkin().getNode()));

Answer 3

For anyone who is writing framework level code that does not want to use up the one and only override of the global, static url stream factory, you can instead tie into the internal "service loader" framework in the URL class itself.
To do this, you must create a class named Handler extends URLStreamHandler and update the system property java.protocol.handler.pkgs to point to the package of that class, minus the final package suffix. So, com.fu.css would set the property to com.fu, then all css:my/path requests would route to this handler.
I will paste the class I am using below; forgive the weird collections and supplier interfaces; you can guess what these do and replace them with standard utilities without much trouble.
package xapi.jre.ui.css;
import xapi.collect.X_Collect;
import xapi.collect.api.CollectionOptions;
import xapi.collect.api.StringTo;
import xapi.fu.Out1;
import xapi.io.X_IO;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.net.URLConnection;
import java.net.URLStreamHandler;
import java.nio.charset.Charset;
/**
* I abhor the name of this class,
* but it must be called "Handler" in order for java.net.URL to be able to find us.
*
* It sucks, but it's not our api, and it's the only way to get dynamic stylesheets in JavaFx,
* short of overriding the url stream handler directly (and this can only be done once in a single
* JVM, and as framework-level code, it is unacceptable to prevent clients from choosing to
* override the stream handler themselves).
*
* Created by James X. Nelson (james #wetheinter.net) on 8/21/16.
*/
public class Handler extends URLStreamHandler {
private static final StringTo<Out1<String>> dynamicFiles;
static {
// Ensure that we are registered as a url protocol handler for css:/path css files.
String was = System.getProperty("java.protocol.handler.pkgs", "");
System.setProperty("java.protocol.handler.pkgs", Handler.class.getPackage().getName().replace(".css", "") +
(was.isEmpty() ? "" : "|" + was ));
dynamicFiles = X_Collect.newStringMap(Out1.class,
CollectionOptions.asConcurrent(true)
.mutable(true)
.insertionOrdered(false)
.build());
}
public static void registerStyleSheet(String path, Out1<String> contents) {
dynamicFiles.put(path, contents);
}
#Override
protected URLConnection openConnection(URL u) throws IOException {
final String path = u.getPath();
final Out1<String> file = dynamicFiles.get(path);
return new StringURLConnection(u, file);
}
private static class StringURLConnection extends URLConnection {
private final Out1<String> contents;
public StringURLConnection(URL url, Out1<String> contents){
super(url);
this.contents = contents;
}
#Override
public void connect() throws IOException {}
#Override public InputStream getInputStream() throws IOException {
return X_IO.toStream(contents.out1(), Charset.defaultCharset().name());
}
}
}
Now, any code can call Handler.registerStylesheet("my/path", ()->"* { -fx-css: blah }");, and you can use this stylesheet anywhere via "css:my/path".
Note that I am only looking at the path portion of the url; I intend to leverage query parameters to further increase the dynamism (by using a css factory that accepts a map of parameters), but that is beyond the scope of this question.

Answer 4

I looked at the documentation and I don’t see a built-in way to do that. getStylesheets is the only stylesheet-related method in Parent, and it only accepts “string URLs linking to the stylesheets”, not stylesheets themselves. It returns a generic ObservableList, so its return value has no special methods for different types; only a generic add. This is consistent with getResource returning a URL, and toExternalForm() merely returning a String version of that URL object.
However, there is one thing you could try: a data URI. Instead of passing in a generated URI to a stylesheet file, pass in a data URI whose contents are that stylesheet. I don’t know if the API would accept that kind of URI, though, given that the CSS Reference Guide linked in getStylesheets’s documentation says
A style sheet URL may be an absolute URL or a relative URL.
Try a really simple data URI first to see if it works. You can generate one using this online tool. If Java does accept a data URI, then you just need to wrap your CSS-containing String with some method call that converts a String to a data URI, something like this:
pane.getStylesheets().add(new DataURI(
".button:ok { -fx-background-color: green; }\n"+
".button:ko { -fx-background-color: red; }").toString());
The class DataURI is hypothetical. If JavaFX accepts a manually-generated data URI, then you will have to find a library that provides that DataURI class yourself; I’m sure one exists somewhere.
There is also a way to specify inline CSS for a certain Node as a String, which is almost what you are looking for. It is mentioned in the CSS Reference Guide:
CSS styles can come from style sheets or inline styles. Style sheets are loaded from the URLs specified in the stylesheets variable of the Scene object. If the scene graph contains a Control, a default user agent style sheet is loaded. Inline styles are specified via the Node setStyle API. Inline styles are analogous to the style="…" attribute of an HTML element.
However, it sounds like it does not support selectors in the CSS, only rules – so rather than saying .red { color: red; }, you would only be able to write color: red;, and it would apply to all children of that Node. This doesn’t sound like what you want. So a data URI is your only hope.
EDIT: While this is a smart idea (I didn't know about data URIs before) it doesn't work. I have the same requirement so I tried. It doesn't raise an exception but there is a warning in the the logs and the styles are not applied :
I used this style :
.root{
-fx-font-family: "Muli";
-fx-font-weight: lighter;
-fx-font-size: 35pt;
-fx-padding: 0;
-fx-spacing: 0;
}
And using the provided tool generated the following data URI :
data:text/css;charset=utf-8,.root%7B%0D%0A%20%20%20%20-fx-font-family%3A%20%22Muli%22%3B%0D%0A%20%20%20%20-fx-font-weight%3A%20lighter%3B%0D%0A%20%20%20%20-fx-font-size%3A%2035pt%3B%0D%0A%20%20%20%20-fx-padding%3A%200%3B%0D%0A%20%20%20%20-fx-spacing%3A%200%3B%0D%0A%7D
Applying it to my scene :
scene.getStylesheets().add("data:text/css;charset=utf-8,.root%7B%0D%0A%20%20%20%20-fx-font-family%3A%20%22Muli%22%3B%0D%0A%20%20%20%20-fx-font-weight%3A%20lighter%3B%0D%0A%20%20%20%20-fx-font-size%3A%2035pt%3B%0D%0A%20%20%20%20-fx-padding%3A%200%3B%0D%0A%20%20%20%20-fx-spacing%3A%200%3B%0D%0A%7D");
Results in (pardon my French, AVERTISSEMENT=WARNING):
janv. 07, 2015 12:02:03 PM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
AVERTISSEMENT: Resource "data:text/css;charset=utf-8,%23header%7B%0D%0A%20%20%20%20-fx-background-color%3A%23002D27%3B%0D%0A%20%20%20%20-fx-font-size%3A%2035pt%3B%0D%0A%20%20%20%20-fx-text-fill%3A%20%23fff%3B%0D%0A%7D" not found.
So sadly JavaFX seems not to be aware of data URIs.

Answer 5

Since JavaFX 17 it is now possible to use data URIs.
For example,
scene.getStylesheets().add("data:text/css;base64," + Base64.getEncoder().encodeToString("* { -fx-color: red; }".getBytes(StandardCharsets.UTF_8)));
will simply work in JavaFX 17.