Fun with JavaFX, how to subclass UI controls

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.


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 !

  1. #1 by Philippe Lhoste on 16/06/2009 - 13:30

    Nice to see you finally managed to get it done. The result really looks good and is useful.
    Good job!

  2. #2 by Sebastien Stormacq on 17/06/2009 - 01:58

    Thanks Philippe for your help and suggestion, I will add credit to you in this entry

  3. #3 by Farrukh on 21/06/2009 - 15:21

    the fumctionality you created is already provided in TextBox set the promptText:"search"

  4. #4 by Sebastien Stormacq on 21/06/2009 - 23:59

    I am afraid this is not accurate : the prompText attribute allows to enter a text that will be displayed in light gray while the control is empty. The prompText attribute does not add a "cancel" button nor the glass icon.

  5. #5 by Zoltan, MAGDO on 10/02/2010 - 00:55


    Good job!

    I have changed
    override var style = "padding-right: 23;padding-left: 23;

    override var style = "padding-right: 23;padding-left: 23; border-width: -1; focus-size: -1";

    and I got SearchTexBox whitout Border and focus rectangle !

(will not be published)