There is a few blogs and tutorials about how to CSS style your magnificent JavaFX application already, so there is no point for me to duplicate that. I have made an small example where I have explored styling a bit.
This is of course a simple example, so I was thinking of sharing a few tips, tricks, a bit of code and some ramblings on the matter.
There is no Look-And-Feel
First. JavaFX does not have a look and feel, and there is no features where the operation system theme can influence you application.I have seen some posts on forums where developers have such requirements in their projects, mostly with the old argument of not confusing the user with unfamiliar user interface - but I think this is utterly wrong.
It is the year 2012. The entire planet is used to all kinds of user interfaces when surfing the internet, so why not on desktop?
Styling an application to look like Win7/8 or whatever OS is just waste of time in my mind. Either make something cool - or save the time and money. Hideous is not the same as useless.
JavaFX implements a subset of CSS2 ... or do they?
This is the official CSS syntax for background-color:background-color: yellow;
This is how you can do it in JavaFX:
-fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;
...and this is how -fx-text-box-border is defined ...
-fx-text-box-border: ladder(
-fx-background,
black 10%,
derive(-fx-background, -15%) 30%
);
and finally, this is how -fx-background is defined ...
-fx-background: #f4f4f4;
phew... but fortunately Oracle have made this self explaining, so I can keep this post nice and short.
This is from the default styling of TextField. The first one is the border when the field has focus, then the ordinary border, and last is the background inside the field.
Ok, the bonus here ... what about -fx-border-color? Well this one has nothing to do with the border definition you are setting with the -fx-background-color, but comes in addition and on top of the others.
The ladder is used to create gradient colors, so it is quite a cool feature, especially when you look at how it is used in existing JavaFX code already. It's also interesting how they have implemented "variables" or properties as they are called. Better late than never - thx Oracle.
Can CSS do all the styling in JavaFX?
CSS has its limitations, but you can do more. There is a class named TextFieldSkin (you can see the code in the OpenJFX repo ). I haven't looked much into it, but it seems to be used for styling based on logic and events. Like what event should trigger context menu pop up, setting the position of the caret, or animating stuff. Things that is not easily done with CSS alone.The default JavaFX CSS
This is mentioned several places on the internet. The default style sheet is called caspian.css and can be extracted from the JavaFX jar file. Just Google for an explanation. It is very clean, with good comments, and is well structured at the time.Press F5 to reload
It is time for a proper tip. Here is the code from my main class.public class Main extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage stage) throws Exception {
...
stage.addEventFilter(KeyEvent.KEY_PRESSED, new EventHandler<KeyEvent>() {
@Override public void handle(KeyEvent keyEvent) {
if( keyEvent.getCode().equals(KeyCode.F5))
{
scene.getStylesheets().addAll(Main.class.getResource(getCssFile()).toExternalForm());
com.sun.javafx.css.StyleManager.getInstance().reloadStylesheets(scene);
}
}
});
...
}
private int valg = 0;
private String[] cssFiles = new String[] { "mycss1.css", "mycss2.css" };
private String getCssFile() {
if (valg > cssFiles.length - 1)
valg = 0;
return "/css_reload/" + cssFiles[valg++];
}
}
WARNING: You shall not use or depend on any code from the " com.sun.*" package. This is a hack and we don't know when the reload function will be removed.
But I love this hack. I have 2 stylesheets as you can see. This way I can press F5 to swap and reload the stylesheet while the app is running, making the styling of the application a lot easier. The first stylesheet I have containt the default CSS, while I'm experimenting with the second one - and then just F5 to swap back and forth to see any results.
Firebug... I need firebug...
Not firebug but ScenicView. This is a nice tool, but lack some serious features. You cannot see the resulting CSS. But it can show what style class is added to a certain node, size, coordinates and a whole bunch of different details.You noticed perhaps this in the main class?
// ScenicView.show(scene);
I recommend to try it out just to see what it can do for you.
Just remember you have to download it yourself, and manually install it into your own maven repository if you are using such things. There is a note about it in the readme for this example on my github.
http://fxexperience.com/scenic-view/
Some thoughts on the matter
I guess the choice to implement CSS is because it is a familiar way of styling already, and there is no good alternatives, unless you enjoy constraints or have little time to write your own GUI lib. I think it is a smart choice for creating interest around JavaFX.But I do miss a proper tool for this. There is very few Java Swing experts around. With that in mind I don't think there will be a lot more JavaFX experts around. Weird standards often create a lot of mess. Just look at Hibernate which few people are very good at.
There are some insane examples out there where you can see the potential in what you can achieve, so there is no doubt in the powers hidden inside JavaFX. Several examples on what can be achieved are easily found both on youtube and Google images.
The CSS Reload example is part of my javafx examples repository on github.
https://github.com/frtj/javafx_examples
ScenicView
http://fxexperience.com/scenic-view/
Interesting examples on styling
http://carlfx.wordpress.com/2011/12/19/javafx-2-0-introduction-by-example-book/
http://www.youtube.com/user/hansolo312?feature=watch
v1.0 - 08.nov.2012
Ingen kommentarer:
Legg inn en kommentar