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.



Comments:

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

Posted by Philippe Lhoste on juin 16, 2009 at 03:30 PM CEST #

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

Posted by Sebastien Stormacq on juin 17, 2009 at 03:58 AM CEST #

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

Posted by Farrukh on juin 21, 2009 at 05:21 PM CEST #

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.

Posted by Sebastien Stormacq on juin 22, 2009 at 01:59 AM CEST #

Hi,

Good job!

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

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

and I got SearchTexBox whitout Border and focus rectangle !

Posted by Zoltan, MAGDO on février 10, 2010 at 01:55 AM CET #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Sébastien Stormacq is a Senior Software Architect at Sun Microsystems. He uses his 15+ years of professional experience to design large scale, secured and highly transactional architectures based on Sun's middleware solutions.

Search

Archives
« avril 2014
lun.mar.mer.jeu.ven.sam.dim.
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today