“PiMac unibody” or a new home for my touch screen

In preparation for the JavaOne 2014 Session my 7″ touch screen from Chalk-Elec finally found a new home.
I bought a 1 mm sheet of aluminium and treated it with my jig saw and a rasp and folded a triangle stand for the screen. Basically there would be room enough for e.g. a Rapsberry Pi and it also stand touching the display:





Some anti slip pads on the button side



The Sketch

PiMac Scetch

MQTT.fx 0.0.5 released

Just released a new version of MQTT.fx.


  • “Publish”, “Subscribe” and “Broker Status” can now be detached to be opened in a separate window: Just drag a tab title and drop it where the window should be placed. Closing of the window restores the content at the former position.
  • also I have done some UI polish

Download latest binaries HERE.


TabPaneDetacher: Make your tabs detachable

I though it would be cool to detach e.g. the pane to publish messages in MQTT.fx if needed by just dragging the tab and dropping it at the wanted position to open its content as a dedicated new window.

drag tab

The TabPaneDetacher provides an easy to use way to enable the detach capability of with any JavaFX TabPane instance just by calling:

public class TabPaneDetacherDemoController {

    private TabPane demoTabPane;
    public void initialize() {

The tab is removed from the tab pane and a new window is created containing the content of the tab, the window title is set to the tab name value. On closing that window the tab is restored at the original position:

Code can be found here in my Bitbucket repo.

UI logic with using JavaFX Bindings

For MQTT.fx I needed a ComboBox to enter new Topics or to choose recent topics from list.
But I want the user to enter or choose only (more or less) reasonable values otherwise the “Publish”/”Subscribe” buttons should be disabled:

ComboBox Bindings Demo 1

ComboBox Bindings Demo 2

Using the JavaFX Bindings API prevents some boilerplate code (implementing Listeners) and it is even more flexible as the result can be bound to several controls and at the end of the day its much more readable.

Contraint 1: The selection must not be empty.

  1. First create a JavaFX BooleanBinding.
  2. Then bind it to the disabledProperty of the button.

Contraint 2: Entered values must not contain only blanks (leading/trailing blanks can be trimmed later).

My approach is to

  1. add an EventFilter and to consume the event in case of only entered character is “SPACE”
  2. and if there are just blanks left when editing the value the content is cleared.
public class ComboBoxBindingsDemoController {

    private Label valueLabel;

    private Button goButton;

    private ComboBox<String> valueComboBox;

    private ObservableList<String> demoItemsList;
    private static final Pattern LEADING_BLANKS_PATTERN = Pattern.compile("^\\s*+");

    public void initialize() {

        BooleanBinding goButtonState = valueComboBox.editorProperty().get().textProperty().isEmpty()


        valueComboBox.getEditor().addEventFilter(KeyEvent.KEY_TYPED, (KeyEvent event) -> {
            Matcher matcher = LEADING_BLANKS_PATTERN.matcher(valueComboBox.getEditor().getText());
            if (" ".equals(event.getCharacter()) && valueComboBox.getEditor().getText().length() == 0) {
            else if(matcher.matches()){


    public ObservableList<String> getDemoItemsList() {
        if (demoItemsList == null) {
            demoItemsList = FXCollections.observableArrayList();
        return demoItemsList;

    public void goAction() {
        System.out.println("Value '" + valueComboBox.getValue().trim() + "'");


Complete runnable demo can be found at Bitbucket.

MQTT.fx 0.0.4 released

Just released new version of MQTT.fx.
Download latest binaries HERE.

MQTT.fx - v0.0.4

– revisited UI (return of “real” buttons)
– extended support for $SYS-topics: subscription for mosquitto or Hive MQ can be choosen (in respect to @dobermai).
– publish and subcrive/receive are now different tabs
– experimental support for http-proxy (in respect to @dimaki123).
– last choosen broker & port is restored at next app start
– updated 3rd party libs (e.g. now using features of ControlsFX 8.0.6)
MQTT.fx - v0.0.4 - broker status
MQTT.fx - v0.0.4 - subscribe
MQTT.fx - v0.0.4 - connection options
MQTT.fx - v0.0.4 - validation

– publish to topics even if not subscribed before (in respect to @_efwe_)

Configuration-format has changed, v0.0.4 might conflict with former versions.
In this case just delete (or rename) the mqttfx-config.xml.
Windows: [USER_HOME]\MQTT-FX\mqttfx-config.xml
OS X: [USER_HOME]/Library/Application Support/MQTT-FX/mqttfx-config.xml
The new configration is automatically created on next app start.

How to get rid of focus highlighting in JavaFX

Today I was asked if I know a way to get rid of the focus-highlighting of JavaFX controls (respectively buttons):


Most posts and tipps regarding this issue suggesting to adding:

.button:focused {
    -fx-focus-color: transparent; 

But with this style a glow like this is still left:


To get rid of this glow also often suggested to play around with -fx-background-insets additionally:

.button:focused {
    -fx-focus-color: transparent; 
    -fx-background-insets: -1.4, 0, 1, 2;

But this results in a button rendered with out an outer border:


Compared to the default button style


this is still a kind of “highlighting”:

Why is that? (And why are there actually 4 inset values ?)
(note he comment of David Grieve below)

Having a look at the JavaFX default style as defined by modena.css bares some more information:

/* A bright blue for the focus indicator of objects. Typically used as the
* first color in -fx-background-color for the "focused" pseudo-class. Also
* typically used with insets of -1.4 to provide a glowing effect.
-fx-focus-color: #f25f29;
-fx-faint-focus-color: #f25f2933;

Obviously there is not only one focus color -fx-focus-color but also -fx-faint-focus-color which is meant to create this glow-effect (that is remaining when setting -fx-focus-color:transparent;).

A closer look at the .button:focused pseudo class (in modena.css):

.button:focused {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: -2, -0.3, 1, 2;
    -fx-background-radius: 7, 6, 4, 3;

Playing around with some (extreme ;-)) colouring reveals the arrangement:

.button:focused {
    -fx-focus-color: red;
    -fx-faint-focus-color: green;
    -fx-inner-border: blue;
    -fx-body-color: orange;

    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: -2, -0.3, 1, 2;
    -fx-background-radius: 7, 6, 4, 3;


Getting back to the topic maybe a clent way to remove the focus hightlight is to use the default button styles also for .button:focus (same approach for other controls):

.button:focused {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 5, 4, 3;