Archives for category: UI Design

We have been working recently on a new theme for JavaFX 8. The current theme for FX, named Caspian, is showing its age and we wanted to take the opportunity to give JavaFX a face lift for 8. Because folks have created custom controls and designs for their app, we needed to make sure that selecting the theme was something that you could opt-out of. We will be providing both API and command line switches in 8 to allow you to specify caspian specifically. If you do nothing, you’ll get Modena, our new theme, by default. Without further ado this is what it looks like:


Update: More recent releases of Scenic View have been released since this post! Go to the Scenic View page to download the latest release!

Developing user interfaces is tricky, regardless of whether you’re just trying to understand the high level scenegraph layout, or whether you’re pushing pixels for a finely tuned user interface. I understand and feel for people in this situation. UI developers come up with all kinds of tricks, for example, temporarily introducing a bold one pixel border of varying colours around components to better understand the user interface. I certainly know I have done that countless times in the past when building user interfaces, and frankly, it is painful and massively time consuming.

Inside the JavaFX team, since times of yore (that is, since at least JavaFX 1.3, but perhaps earlier – my memory fails me here), we’ve had this remarkable little tool that was called Scenic View. It somehow just burst into existence, through the brilliance of Amy Fowler, whom many should know as the layout guru for both Swing and JavaFX. Scenic View is a tool that can be called to browse a live view of the application scenegraph. Here’s a screenshot:


I have some cool new stuff for you today. I have been working on porting some of the little tools I wrote for JavaFX 1.X. Also I was inspired by the web css button creator UiParade Button Builder. So I created a simple theming tool for JavaFX. This is something I have wanted to do for ages and is actually the second one I have written. The first started from the point of view of supporting every feature that can be done with CSS in JavaFX, and this turned out to be a huge undertaking as there is an amazing amount of flexibility in styling the JavaFX controls with CSS. So this one was inspired by the UiParade one and tried to give a simple set of controls to adjust the look. Some of them are quite clever that you adjust one slider and it is adjusting dozens of css properties in varying amounts for you. I have also made the source code available for all of these apps along with the custom controls like a color picker. So you can download it and see how its works. Hopefully we will add more tools to it over time as we have ideas or have time to do some.


One of Jasper’s favorite websites is called Dribbble, which is a place for designers to post whatever work they’re currently working on for others to view and be inspired from. I got hooked on Dribbble last Thursday and have been looking at a bunch of the mockups and itching to try implementing some of them in JavaFX. Here is my first attempt.

One of the use cases we used for our CSS support and our ToolBar API was that we wanted to support a style of toolbar button which (at least for me) was popularized on the Mac, which is referred to by Cocoa as a “segmented” button. This is essentially nothing more than an HBox of buttons that has been styled such that the first button has rounded left edges, the center buttons are squared up, and the last button has rounded right edges. In the image above by Bady, you can see the segmented button bar in the toolbar area of the application.

I was inspired by Dean Iverson’s tweet with a audio equalizer in JavaFX:

#JavaFX rocks. Literally. An example from our upcoming Pro JavaFX 2 book:
and the equalizer view from that Pro JavaFX 2 example app:
. updated

So wanted to have a go at doing one my self, so little while later I have a design and built a working application. Demo video after the break.


A number of people have asked me recently can I create this look or that look using CSS in JavaFX. Or they have said that you could never do that! So I thought I would do a little experiment and try recreating a bunch of common button styles purely using CSS. So without further ado, here is the result:


One thing I see asked a lot (either directly via email, or in the rather excellent JavaFX Forums) is why does TableView (and ListView) look like this in JavaFX 2.0:

A TableView control using default styling and API as provided in JavaFX 2.0.


Ok, I know we’ve been going on about custom cells / cell factories a bit recently, but I wanted to do one more post about a very useful topic: caching within cell content.

These days ‘Hello World’ has been replaced by building a Twitter client, so I’ve decided to frame this topic in terms of building a Twitter client. Because I don’t actually care about the whole web service side of thing, I’ve neglected to implement the whole ‘real data’ / web services aspect of it. If you want to see an actual running implementation with real data, have a look at William Antônio’s Twitter client, which is using this ListCell implementation.


I came across the cool blog by Rakesh Menon the other day “JavaFX – Text Effects”. It got me thinking how many other cool text effects could we do in JavaFX. Quick research for ideas came up with “50 Stunning Photoshop Text Effect Tutorials” blog post on Smashing Magazine. So I picked a couple fun ones and had a go :-)

Neon Text

Neon Sign ScreenshotClick To Run


Create an application in JavaFX that exemplifies the appearance and behavior of a next-generation enterprise RIA (rich internet application)

See the official announcement for more details on the rules etc. Announcing the JavaFXpert RIA Exemplar Challenge

Announcing the JavaFXpert RIA Exemplar Challenge

I will be judging the entries for their visual design with the help of fellow graphics judge Romain Guy. To help all the designers entering here are a couple of the original designs for the Caspian theme along with links to the photoshop files they were created with. This way you can see the how all the all the controls visuals are contracted using vector shapes and layer effects.

Download Controls.PSD.ZIP

Download Controls Mockup.PSD.ZIP

I also thought maybe some links to sites with good articles on design might be helpful. Most of these are associated with Web Design rather than Application User Interface Design but there is a large amount of cross over and I have not found any good sites on Application User Interface myself.

Here are a few links for inspiration: