Category Archives: JMetro

A Java, JavaFX Theme / Look and Feel. Styling of JavaFX controls based on Microsoft’s Fluent Design style (previously named Metro).
Visit JMetro Java, JavaFX theme page for more information.

Metro style Password Box for java (JMetro)

The metro style password field is very similar to the Text Box (Text Input Field) in its design. The look is very similar and it also has a button to the far right of the control.

passwordBoxWindows8

Password Box with the password masked

 

This time instead of clearing the field, pressing the button will reveal the text you’ve just entered which is by default masked. This is useful, especially for long passwords and while entering the password through touch instead of a keyboard, which is less error prone.

passwordBoxWindows8-buttonPressed

Password Box with the password revealed

 

So here are the screenshots of the light and dark theme of the Password Box JMetro skin implementation:

Password Box - Light theme

Password Box – Light theme

Password Box - Dark theme

Password Box – Dark theme

Skinning in Java8 (JavaFX8)

There has been some changes in JavaFX8 regarding skinning, the most relevants of which are the new CSS API that allows you to create new CSS properties and pseudo-classes for your controls and the Skin class which has become public.

Using CSS you can change a lot of the appearance of a control, but there is only so much you can achieve with CSS and this is where the Skin class comes in. A quick look at the architecture of controls from “UI Controls Architecture”:

Controls follow the classic MVC design pattern. The Control is the “model”. It contains both the state and the functions which manipulate that state. The Control class itself does not know how it is rendered or what the user interaction is. These tasks are delegated to the Skin (“view”), which may internally separate out the view and controller functionality into separate classes, although at present there is no public API for the “controller” aspect.

JavaFX Controls MVC Pattern

Like was mentioned there is still some aspects of Skinning that are not yet public API and that is the Behavior class, however, with the current state of things, you can already do a lot.

Since Java8 is not in G.A. status (full finished version) yet, there is still a considerable lack of documentation regarding the API, which brings me to my latest post on JMetro, at that time I was mistakenly under the impression that you had to extend a control in order to change its reference to the skin class, that’s why I created the ErasableTextField. However, as I later learned, you can change the skin class of a control just through CSS, like this:

.text-field{
    -fx-skin: "jfxtras.styles.jmetro8.MetroTextFieldSkin";
}

The “text-field” style class is assigned to TextField, so when the “-fx-skin” CSS property value is changed the reference to the skin class that is to be used with this control changes. So the ErasableTextField class is no longer necessary and has been removed from JMetro.

I find this design very interesting! As you can see the Skins are completely decoupled from the controls, all you have to do is assign a stylesheet to a scene without touching any of the code in your app and the look and feel of your application can change radically – like for instance JMetro Textfield skin adds a clear button that shows up whenever there is text inside:

jmetro-textbox

JMetro adds a clear button to TextField

Metro style Text Box control for java (JMetro)

The Metro Text Box control is the usual input text field from which developers can get text input from users. This control has a particular trait usually present in control library designed to be used through touch: whenever the user enters text a clear button appears on the right most position of the control.

metroTextBox

Windows 8 Text input control

 

This particular feature isn’t available in the text input control from the JavaFX library, so the use of CSS won’t be enough to achieve a “metro” style.

For this reason I’ve created a new control: ErasableTextField (Yes, I know, not the best choice of a name for a control 🙂 ), which extends from TextField and adds this missing feature: a button which appears inside the text input control to clear it whenever there is text inside. Then through the usual use of CSS I style the control to make it look like the Windows 8 Text Box.

JMetro TextBox Dark theme - mouse pressed

JMetro Dark Theme – mouse pressed

JMetro TextBox Dark theme

JMetro Dark Theme

JMetro TextBox Light Theme - text selected

JMetro Light Theme – text highlighted

JMetro TextBox Light theme

JMetro TextBox Light Theme

Metro style Rating control for java (JMetro)

The Rating control is one of Windows first class citizens, it’s available in its control library, it allows a user to rate something from 0 to an x value. Given the importance of today’s social interaction it’s no wonder it has gained the status of a library control.

ControlsFX is a third party library of controls for JavaFX, it complements the standard library with some more useful controls and functionality which are not available straight from JavaFX’s standard library. One of the controls present is the Rating control which I opportunely took the chance to use and style the metro way through CSS.

Rating control

The Rating control (default style)

In its default style, this control uses raster image files. One for the “selected” state:

selected-star

and one for the “unselected” state:

unselected-star

Using this CSS code for the “unselected” state:

.rating > .container > .button {
  -fx-background-image: url("unselected-star.png");
}

And this for the “selected” state:

.rating > .container > .button.strong {
  -fx-background-image: url("selected-star.png");
}

“.strong” is the style class given to “selected” star buttons.

For JMetro I wanted to use vector based images instead of raster ones. To that effect I used the CSS property: “-fx-shape” and set the “-fx-background-image” to null which is the same as removing it.

Rating - Dark theme (mouse pressed)

Rating control – Dark theme (mouse pressed)

Rating - Dark theme

Rating Control – Dark theme

Rating - Light theme (mouse pressed)

Rating control – Light theme (mouse pressed)

Rating - Light theme

Rating control – Light theme

Advantages of using vector based images:

  • You can make them as big as you want without losing image quality
  • Fill color, stroke color, etc can be tweaked through CSS
  • It occupies less space

By this, I’m not saying that vector based images should be used every time, there are certainly use cases where raster based ones are more convenient, specially at lower sizes.

In conclusion, you can do some really powerful stuff this way using only JavaFX CSS code. You can either rely on the usage of raster based images or vector based ones.