Author Archives: pedroduquevieira

Metro style Check Box for Java (JMetro)

Here is an update to JMetro: the Checkbox with a metro style.

A picture of the demo app running with the light and dark metro theme:

The first button has the focus, that’s why it has a dashed square around it. I’ve also made changes to the push button. You can get everything from the same place.

I’ve also changed how you apply the theme. Now all you have to do is add the style sheet and buttons and checkboxs will change style automatically. That’s because now I’m overriding the default look of the controls so you don’t have to add style class’s to them.

The fonts aren’t still the same as in Metro, I’ll try to see if I can change that in a later iteration. Even if you test this on Windows 7, which also has Segoe UI, it will be different because Segoe UI on windows 8 is slightly different.

JMetro – Windows 8 Metro controls on Java

[Update 12 March, 2018: You should check out the Java, JavaFX theme page for updated information, things have changed]

Hi,

I’ve been studying the interface of Windows 8, so I thought why not do a windows 8 theme for Java and what better timing than this given that there are only 3 days left for windows 8 to be available.

My first control is the Windows 8 “Push Button”, it’s simply just the normal button that you’re used to.

I’ll be releasing two themes: a dark theme (JMetroDarkTheme.css) and a light theme(JMetroLightTheme.css). The GIF below was captured from the demo aplication.

JavaFX Button with JMetro Dark Theme

Push Button – JMetro Dark Theme

JavaFX Button with JMetro Light Theme

Push Button – JMetro Light Theme

Together with the css files I’ve put an fxml file as an example. You can open it in Scene Builder then choose the style sheet you want to use by pressing “Preview -> Preview a style sheet…”. To see it in action click “Preview->Preview in window”.

The buttons are simply styled by adding the “.push-button” css class to a Button.

You can get the files here. Use them for any purpose, commercial or not.

Zooming inside a Scrollpane

In JavaFX if you want the user to be able to zoom the contents inside a scrollpane here’s a small gotcha that you have to be aware of: to accomplish this you must wrap the contents of the scroll node inside a group so that the visual bounds (not the layout bounds) are used for layout calculations.

Scrolling can than be attained by setting a scaling transform on the contents of the Scrollpane and adjusting the scale value to meet the specified zoom level.

Here’s a small snippet of code to illustrate how you could do it:

public class ZoomableScrollPane extends ScrollPane{
  Group zoomGroup;
  Scale scaleTransform;
  Node content;
  (…)
  public ZoomableScrollPane(Node content)
  {
    this.content = content;
    Group contentGroup = new Group();
    zoomGroup = new Group();
    contentGroup.getChildren().add(zoomGroup);
    zoomGroup.getChildren().add(content);
    setContent(contentGroup);
    scaleTransform = new Scale(scaleValue, scaleValue, 0, 0);
    zoomGroup.getTransforms().add(scaleTransform);
    (…)
  }
  (…)
}