posts/2009/javafx-thick-textbox-borders/index

[JonathanGiles]

JavaFX: Thick TextBox Borders

https://jonathangiles.net/posts/2009/javafx-thick-textbox-borders/

[JonathanGiles]

Auto-imported comment, original author: Matthew Comment posted on: June 26, 2009

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

[JonathanGiles]

Auto-imported comment, original author: Jonathan Comment posted on: June 26, 2009

@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.

[JonathanGiles]

Auto-imported comment, original author: Jonathan Comment posted on: June 26, 2009

I should note that the text field component has at least been considered as part of the Caspian skin, as it is <a href="http://fxexperience.com/2009/06/caspian-skin/&quot; rel="nofollow">shown in Jaspers post</a>.

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

[JonathanGiles]

Auto-imported comment, original author: codecraig Comment posted on: June 27, 2009

Since JavaFX 1.2 has CSS support why not set "border-style: none"?

Does that work?

[JonathanGiles]

Auto-imported comment, original author: Jonathan Comment posted on: June 27, 2009

@codecraig: No, <code>border-style: none</code> 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.

[JonathanGiles]

Auto-imported comment, original author: codecraig Comment posted on: June 28, 2009

Well that's strange...in fact your work-around is strange. You would think if the <code>border-width</code> is '0' or <code>border-style</code> is 'none' that you would get <b>no</b> border.

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

[JonathanGiles]

Auto-imported comment, original author: Jasper Comment posted on: June 28, 2009

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.

[JonathanGiles]

Auto-imported comment, original author: Richard Bair Comment posted on: June 28, 2009

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!

[JonathanGiles]

Auto-imported comment, original author: Richard Bair Comment posted on: June 28, 2009

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?

[JonathanGiles]

Auto-imported comment, original author: Jonathan Comment posted on: June 28, 2009

Is it just me, or is the TextBox style very different to that shown in the image linked to? Even the default font is different?

[JonathanGiles]

Auto-imported comment, original author: Jonathan Comment posted on: June 28, 2009

Richard, I would agree - a 0 width should mean no border at all.

[JonathanGiles]

Auto-imported comment, original author: Steven Herod Comment posted on: June 29, 2009

I agree, 0 should be 'none'.

Not that I've tried, but it also makes programatically changing it easy, I can transition from 5 to 0, not 5 to 'none'.

[JonathanGiles]

Auto-imported comment, original author: Steven Herod Comment posted on: June 29, 2009

Is it the platform, that font in Jasper's image looks Mac Lucide Grande? And yours looks like the Vista default font.

[JonathanGiles]

Auto-imported comment, original author: Jonathan Comment posted on: June 29, 2009

Perhaps it is. Jasper does run a Mac, but then all the other fonts in my screenshot above adopt the correct font. The only control that doesn't is the TextBox.

[JonathanGiles]

Auto-imported comment, original author: Jasper Comment posted on: June 29, 2009

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 &amp; 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 :-(

[JonathanGiles]

Auto-imported comment, original author: Jonathan Comment posted on: June 29, 2009

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?

[JonathanGiles]

Auto-imported comment, original author: Jasper Comment posted on: June 29, 2009

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.

[JonathanGiles]

Auto-imported comment, original author: Jonathan Comment posted on: June 29, 2009

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.