JavaFX: Thick TextBox Borders

Being the UI geek that I am, I wanted to look at borders in JavaFX, as I had noticed that there seemed to be some inconsistencies. It turns out that I shouldn’t have been too worried – it appears that only one control looks bad, and it is the TextBox control. Shown below is a screenshot of a demo application I wrote, which has a number of controls placed in it.

borders

Note that the borders of all controls look pretty similar – a single pixel width and all a dark grey. Swing suffered from border abuse and inconsistent border colours, so I am happy to see JavaFX is much better.

As mentioned, the only exception is the TextBox, which in the screenshot says ‘Original’. I think it’s probably agreeable to most people that this control has a border which is too thick (and a font which is not consistent with the font used in other controls). To fix the border inconsistency is actually quite simple, as shown in the TextBox directly beneath the original which shows ‘Fixed’. I think it’s probably agreeable that this fits it better with the other controls.

Finally, beneath the ‘Fixed’ TextBox is the text ‘Invisible’, which is actually also a TextBox with no border being shown. I include this for a reason, which will become clear soon.

Anyway, on to the fix – it’s simply a matter of changing the style by adding a line of CSS. The code for the three text boxes is shown below, in the same order as shown in the screenshot.

TextBox {
    text: "Original"
    columns: 12
}

TextBox {
    text: "Fixed"
    columns: 12
    style: "border-width:0;"
}

TextBox {
    text: "Invisible"
    columns: 12
    style: "border-width:-1;"
}

In otherwords, to fix the border problem, you need to set the border-width to 0, which doesn’t seem correct – you’d expect a control with a border-width of 0 to have an invisible border. In fact, to get an invisible border is shown in the last TextBox – you have to set border-width to be -1.

So, perhaps this is a bug, or perhaps it’s a design choice. I thought I would document it here so that people searching Google for answers might discover it without having to do trial and error. Perhaps this might be fixed in a future JavaFX release.

Additionally, the TextBox font also seems to be inconsistent, but I won’t bother to discuss this as I would hope anyone reviewing this post will also realise they need to fix the font. Perhaps this may be fixed in a future JavaFX release too.

18 Responses to “JavaFX: Thick TextBox Borders”


  • Interesting – thanks.

    Unfortunately it seems that some of the new controls are a bit buggy. I would encourage you to raise the bugs you’ve found (if you haven’t already).

    http://javafx-jira.kenai.com

    • @Matthew: Thanks for the response. I agree some of the controls are a bit buggy, but they are showing good potential, given they are new releases.

      I suspect the TextBox doesn’t resemble the other controls because it was released prior to the other controls that were part of JavaFX 1.2, and perhaps the Caspian skin hasn’t been fully developed so far to include the TextBox component.

      • Don’t be shy about filing bugs for these kinds of UI issues, with all the many issues we have to fix sometimes things get lost, so its good to have them in the system!

  • I should note that the text field component has at least been considered as part of the Caspian skin, as it is shown in Jaspers post.

    I’m guessing that sooner or later TextBox components will been updated to look like what you see in the screenshot on that blog.

  • Since JavaFX 1.2 has CSS support why not set “border-style: none”?

    Does that work?

    • @codecraig: No, border-style: none does not work – the result is the same as if no style is set at all. So, for now the best approach is to use my suggestion, but ideally this will be resolved when the Caspian skin is applied to the TextBox component, which I’m sure will happen in the next released.

      • Well that’s strange…in fact your work-around is strange. You would think if the border-width is ‘0’ or border-style is ‘none’ that you would get no border.

        Hopefully they fix that so that the CSS support is more complete.

        • Ya, I would have expected border-style: none to work, that it doesn’t should definitely be considered a bug.

          A border width of 0 is a different story though, I’m not sure which is the best way to take it. The problem is that since the beginning of time (well at least since the beginning of Java2D and I suspect it is a feature of postscript as well, though I haven’t confirmed it) a 0 width in Java2D means “hairline”. So the behavior you see here is just a manifestation of the underlying Java2D.

          I’m not a big fan of carrying historical significance around, so perhaps this should be a bug and 0 means, well, 0?

  • If you look at the design http://fxexperience.com/wp-content/uploads/2009/06/controls1.png you will see the idea of the double line border, the outer border is a highlight line which looks right in darker backgrounds. I agree it looks wrong on a light background. The idea is you should set the “base” color attribute of a control to match or be similar to you background to blend in.

  • Both should be the same font “Verdana” but rendered by different engines. The pic in the design blog was done in Photoshop with their render that has more control of the antialiasing effecting perceived weight. On Mac JavaFX & Java use native font rendering, on Windows its more complicated depending on Java version and system settings. Either way they are all very different at rendering the same font :-(

  • Jasper, perhaps you answered this, but why does the TextBox font appear to be different than the font in the other controls in my screenshot above?

    • Don’t think its but hard to tell with windows horrible font rendering. What bugs me is Windows makes all fonts look the same at small sizes as it sacrifices design for readability. I am working on a fix that will give you a choice of rendering in FX to choose if you want smoother more true rendering of fonts. Which is what designers like.

      • Interesting. I just did a quick test where I put a default TextBox side by side with one where I set the font to be 11pt Verdana. As I thought – this fit far more into the look of the other controls than the default font. It seems as if the TextBox font is not being set correctly on my computer, which is a pretty standard Vista box. From the screenshots I’ve seen around the web, the font (and border) isn’t being set correctly in other deployments of the TextBox control.

        I can post a picture if you’d like to see how it looks on my machine.

Comments are currently closed.

About

Jonathan Giles is a 29 year old software engineer living in Palmerston North, New Zealand. He holds a Bachelor of Engineering Honours in Software Engineering, a Masters of Science in Computer Science, and is a Sun certified Java programmer. Jonathan specialises in Java, Swing, JavaFX and Client-Server development.

He is currently the tech lead at Oracle in the JavaFX UI controls team, and a Java evangelist. He also blogs over at the FX Experience blog. Obviously, the opinions expressed here are his own.

Contact

Email:   Here
NZ:   +64 22 1985 001
Twitter:   JonathanGiles
LinkedIn:   My Profile
Google+:   +JonathanGiles
Skype:   Skype Me