Update to JMetro implementation and documentation

It’s been too long since my last post! I plan on posting more regularly in the coming future.

Meanwhile, I took the opportunity to re-design this site which was looking pretty bad. Also thought my free open source libraries needed more attention, namely documentation so I’ve started working on that. The first one is going to be JMetro, you can check out the documentation here.

While I was looking over JMetro to write the documentation, I noticed some bugs and also a few aesthetic issues that I fixed:

  • Spinner: remove white background glitch with some style classes
  • List Box: added border around control
  • Slider: Somehow the fix to the slider when in vertical orientation, that fixed the fact that the fill started from the top instead of the bottom got lost. I re-implemented this fix.

Still haven’t had time with the font rendering issue. You can notice poor font rendering in JMetro on Windows with text in big font sizes. This is probably a JavaFX bug/problem because I’ve seen this elsewhere on images in other people’s blog posts and also other applications I’ve worked on.

Toggle Switch for java

Background

A Toggle Switch is a control that is very popular nowadays, especially on touch based devices. You can see it in Android:

switches_switches

In iOS (6 and 7):

ios-7-toggle-switch1

And in Windows 8:

toggle-sync-setting-in-windows8

Functionally it works just like a check-box but for touch devices it has one big advantage: when your finger is over the touch device it won’t obscure the control and so you can see an instant feedback when you press it. The disadvantage is obviously that this control takes up more space.

Implementation

My implementation of the Toggle Switch allows you to change the text for the on and off state that appears right next to the toggle switch. You can also style the control using just CSS. It comes with a CSS implementation that gives it a metro look.

Demo

Below you can see a live demonstration of the control, in a light and a dark theme.

ToggleSwitch_LightTheme.gif

Toggle Switch (JMetro Light Theme)

Toggle Switch (JMetro Dark Theme)

Toggle Switch (JMetro Dark Theme)

 

You can grab the control and the accompanying metro style CSS by going to the jfxtras repository.

Further Developments

Currently it’s still not possible to style the Toggle Switch to look like the Android toggle switch using just CSS because it’s not possible to specify that the on and off text should appear inside the control and not outside as in the case of Metro. I’d also like to add the possibility to turn the animation on or off through CSS.