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: pic.twitter.com/tSI4Vry4
and the equalizer view from that Pro JavaFX 2 example app: pic.twitter.com/T6jxvrf9
. updated pic.twitter.com/FqzgVimG
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 
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
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 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:
Icons are a important part of any application so here is a few nice free collections I have come across that you might find helpful. You can add add a icon to a button like this:
Click To Run
Button {
graphic: ImageView{ image: Image{ url:"{__DIR__}icon.png"}}
}
assuming the icon “icon.png” is in the same directory(package) as your source file.
The new JavaFX controls were designed to be easily skinable so that you can create any look you can think up but we still need a default look that you get out of the box. The default skin that comes with JavaFX 1.2 is called Caspian which aims to be flexable and usable as is for a wide range of applications. I thought I would share a little about the design decisions I went through in designing Caspian.
The Requirements
The Technical Requirements
The Color
After experimenting with lots of designs and researching what other people are doing in the field here are the initial designs I did in Photoshop.
Example Window Design
Testing on a extreme range of colors
Hope you found that interesting the next few blogs on Caspian will cover how to style controls with CSS and how to make custom skins.