X

Geertjan's Blog

CSS Styling for the NetBeans Platform

Geertjan Wielenga
Product Manager

What's the difference between these two NetBeans Platform applications?

The difference between the two screenshots is that the second is styled by a stylesheet with this content:

.digital-clock {
-fx-effect: dropshadow(two-pass-box , darkgray, 10, 0.0 , 4, 5);
}

The file containing the content above is named "digitalClock.css". The clock is a JavaFX component, in fact, one of the samples you get with NetBeans IDE. When the JavaFX Scene is created, the final line below sets the stylesheet above on the clock:

Platform.runLater(new Runnable() {
@Override
public void run() {
Scene scene = new Scene(root);
setScene(scene);scene.getStylesheets().add(DigitalClock.class.getResource("digitalClock.css").toExternalForm());
}
});

Next, in the clock definition, notice the final statement below:

Clock clock = new Clock(Color.ORANGERED, Color.rgb(50, 50, 50));
clock.setLayoutX(45);
clock.setLayoutY(186);
clock.getTransforms().add(new Scale(0.83f, 0.83f, 0, 0));
clock.getStyleClass().setAll(DEFAULT_STYLE_CLASS);

The reference that you see above is defined as follows, pointing to the element you see in the CSS stylesheet above:

private static final String DEFAULT_STYLE_CLASS = "digital-clock";

Thanks to Toni for this article, which showed me the way to the code above. As a result, we can now style NetBeans Platform applications with CSS!

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha