Monthly Archive for: ‘October, 2011’

Java FX 2.0 CSS Styling

20

Inspired by Tom Schindl’s e(fx)clipse (see his blog), I have spent some time investigating the CSS styling capabilities of JavaFX 2.0. I have to admit I like it a lot! The styling provides everything out of the box that I had wished for. The only thing that bothers me about the JavaFX rendering right now is that sub-pixel anti-aliased font rendering is not supported yet. This make all fonts appear blurred on LCD screens. But I hope that this will be fixed soon, there are already some bugs filed in the JavaFX Jira.

I could not resist to create a JavaFX based mock-up of my Eclipse 4.x contacts demo, the current result without any additional CSS styling (actually the caspian CSS style is used by default) looks like this:

IMHO, the result is nice (if you ignore the font rendering :)). With a little bit of CSS styling I could create a straw-man dark theme. This is not meant to be a real theme but just a prove of concept. You might see that also radial gradients are supported:

The CSS for this theming is pretty small since it inherits most styling from the default theme. A very nice thing is that by default most of the colors are derived from -fx-base. So it is pretty easy to create themes based on base colors. Here is the complete CSS for the above styling:

.root {
-fx-base: rgb(50, 50, 50);
-fx-background: rgb(50, 50, 50);
-fx-control-inner-background:  rgb(50, 50, 50);
}

.tab {
-fx-background-color: linear-gradient(to top, -fx-base, derive(-fx-base,30%));
}

.menu-bar {
-fx-background-color: linear-gradient(to bottom, -fx-base, derive(-fx-base,30%));
}

.tool-bar:horizontal {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-base,+50%), derive(-fx-base,-40%), derive(-fx-base,-20%));
}

.button {
-fx-background-color: transparent;
}

.button:hover {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-color: -fx-hover-base;
}

.table-view {
-fx-table-cell-border-color:derive(-fx-base,+10%);
-fx-table-header-border-color:derive(-fx-base,+20%);
}

.split-pane:horizontal > * > .split-pane-divider {
-fx-border-color: transparent -fx-base transparent -fx-base;
-fx-background-color: transparent, derive(-fx-base,20%);
-fx-background-insets: 0, 0 1 0 1;
}

.my-gridpane {
-fx-background-color: radial-gradient(radius 100%, derive(-fx-base,20%), derive(-fx-base,-20%));
}

.separator-label {
-fx-text-fill: orange;
}

The next steps for me would to port the e4 Contacts Demo to Tom’s e(fx)clipse to have a working application.

One last thing: If you are a designer, could you provide me with a real great looking dark CSS theme for JavaFX 2.0?

Have Fun!

Kai

You find me on Twitter and Google+.
If you are interested in in-house Eclipse RCP training,
please contact me…