Geek 2.0

While I was doing a JavaFX demo to a group of partners, someone asked the questions : “Does JavaFX provides more specialized UI controls, like SearchTextBox, Table etc … ?”

As of today, JavaFX 1.2 proposes this list of controls and, of course, it is relatively easy to subclass these to get the behavior you want.

But I wondered how easy it really might be, so I tried.

My goal was to create a “Search Text Box”, you know ?  These TextBoxes used in Apple’s iTunes for example to clearly indicate that this control is to search. It has a small glass in the front of the text area and a “cancel” button appears when text is typed to allow user to reset it’s content in a click. It took me a couple of hours to create it, here is the result on the right side.

I basically extended JavaFX 1.2 TextBox control and added two groups :

• One is the “Cancel” button, made of gray Circle and two Rectangles
• The other is the glass, made of one Circle and one Rectangle

I positioned these inside the TextBox, relatively to the original control’s size.

I added two callback functions to notify about possible events : new search text is available (onSearchItemAvailable) and search is reset (onResetSearch).

I finally struggled a little bit to find a way to prevent text to draw itself beneath these two icons.  It was solved using the skin’s padding-left and padding-right CSS attributes (Thanks Philippe from Sun’s Developpers Forum to point me in the right direction).

You can download the full source code here or you can start the test application directly from this page by clicking on the image below.

As usual, comments and remarks are welcome.

[UPDATE – JAVAFX 1.3]

In October 2010, Oracle released Java FX 1.3 with incompatible changes in the API.  Direct consequence is that this example is not compiling anymore.  I posted the explanation and an up-to-date version, ready for Java FX 1.3.  Have Fun !