JavaFX - ComboBox
JavaFX SDK provides Control and Skin interface which can be used to create custom controls. Lets create a ComboBox with these two classes...
Update: Please also refer to JFXtras - XPicker for more advanced picker control.
For Applet mode, click on above image
For standalone mode 
The ComboBox is created using a combination of Label and ListView. The ListView instance is dynamically inserted into content of Scene so that it appears on top of all existing content. Its deleted from Scene on making list invisible.
The entire logic of control is implemented in Skin. Behavior class can be implemented to handle keyboard events. The look can be easily customized.
Try it out and let me know feedback 
This is very very useful control box. I was looking for similar thing in my PodcastFeedViewer Sample.
We can improve this
a) KeyListener ( onKeyPressed ) Press J - Java should be selected etc.
b)Making Editable Combo Box.
etc.
Posted by Raghu Nair on July 07, 2009 at 09:34 AM IST #
Ah here you go :). But writing this much is pain :(
Any next blog will implement dependable combo box :D
Posted by Vaibhav on July 07, 2009 at 08:49 PM IST #
Wow, those examples are really useful! Thanks a bunch!
Posted by Eric Wendelin on July 10, 2009 at 08:30 PM IST #
@Eric Wendelin Glad! Thanks!
Posted by Rakesh Menon on July 10, 2009 at 09:15 PM IST #
I have copied the sources of this ComboBox into my CalendarPicker project. I kept them identical and mentioned you in the wiki.
http://kenai.com/projects/jfxcalendarpicker/pages/Home
Posted by Tom Eugelink on July 31, 2009 at 12:44 AM IST #
@Tom Eugelink Sure! "JavaFX Calendar" looks great!
Posted by Rakesh Menon on August 01, 2009 at 07:51 AM IST #
hi ,
i am not able to see the combobox when i use the above source code. I am able to see the textboxes but not combo boxes. Can you please tell when i am doing wrong??
Posted by Priyank on September 09, 2009 at 02:05 PM IST #
@Priyank Are you able to view it when you launch from above site? Which version of JavaFX SDK? Any exceptions?
Posted by Rakesh Menon on September 09, 2009 at 02:43 PM IST #
nice effort.
But:
I'm trying to use your combobox
in a CustomNode like this.
public override function create(): Node {
var myGroup : Group = Group {
content: [
VBox {translateX: 10 translateY: 10 spacing: 20
content: [ applicationList, list, productComboBox]
}
]
}
}
and it doesn't show up... (no errors)
using JFX 1.2
It works fine when adding it directly to a Scene... and declaring it as static var.
What am i doing wrong?
Posted by Filip on September 15, 2009 at 06:42 AM IST #
@Filip I have not used any default width and height, so user will have to specify -- layoutInfo: LayoutInfo { width: 150 height: 26 } So that may be an issue..
Posted by Rakesh Menon on September 15, 2009 at 06:23 PM IST #
Works great for me to display lists of items!
But I can't figure out how to USE it. For e.g. if I want to pass selectedItem to some other function, whenever selected item is changed (onKeyPressed for e.g.), how would you be able to do that? I keep getting into cyclic reference error!
e.g.
var itemList = ComboBox {
items: [
"Please select an item..."
]
onKeyPressed: function(evt : KeyEvent) {
System.out.println("Selected {itemList.selectedItem}");
}
Posted by Zaztzz on September 22, 2009 at 03:17 PM IST #
I started to use your Main application. It looks good. However after a few sets of the controls I noticed this stack trace. It indicates that somewhere in your code you are assigning to a value that is bound. As I am sure you know, this problem can be fixed by assigning to a variable on the RHS of a bind statement (rather than on the LHS).
com.sun.javafx.runtime.AssignToBoundException: Cannot assign to bound variable
at com.sun.javafx.runtime.location.ObjectVariable.set(ObjectVariable.java:113)
at javafx.scene.control.TextInputControl.set$text(TextInputControl.fx:54)
at javafx.scene.control.TextBox.commit(TextBox.fx:465)
at com.sun.javafx.scene.control.caspian.TextBoxSkin$TextBoxBehavior.focusChanged(TextBoxSkin.fx:1027)
at com.sun.javafx.scene.control.caspian.TextBoxSkin$_SBECL.onChange(TextBoxSkin.fx:1016)
at com.sun.javafx.runtime.location.BooleanVariable.notifyListeners(BooleanVariable.java:146)
at com.sun.javafx.runtime.location.BooleanVariable.replaceValue(BooleanVariable.java:94)
at com.sun.javafx.runtime.location.AbstractBindingExpression.pushValue(AbstractBindingExpression.java:92)
at com.sun.javafx.runtime.location.BooleanVariable$1.compute(BooleanVariable.java:104)
at com.sun.javafx.runtime.location.AbstractVariable.update(AbstractVariable.java:128)
at com.sun.javafx.runtime.location.AbstractVariable.invalidate(AbstractVariable.java:142)
at com.sun.javafx.runtime.location.AbstractLocation$2.onAction(AbstractLocation.java:235)
Posted by Chris Murphy on September 29, 2009 at 09:16 AM IST #
Umm - actually looking at the stack trace it looks like a problem within the Sun TextBoxSkin, so maybe not so easy to fix!
Posted by Chris Murphy on September 29, 2009 at 09:19 AM IST #
Hi Rakesh,
I am getting the following exception when I added your combobox to my desktop application. I get the exception when I click on the combobox. Any idea how to fix this?
Thanks,
Hari
Exception in thread "AWT-EventQueue-0" com.sun.javafx.runtime.AssignToBoundException: Cannot mutate bound sequence
at com.sun.javafx.runtime.location.SequenceVariable.ensureNotBound(SequenceVariable.java:218)
at com.sun.javafx.runtime.location.SequenceVariable.delete(SequenceVariable.java:389)
at com.sun.javafx.runtime.location.SequenceVariable.deleteValue(SequenceVariable.java:430)
at combobox.ComboBoxSkin.show(ComboBoxSkin.fx:306)
at combobox.ComboBoxSkin.show(ComboBoxSkin.fx:306)
at combobox.ComboBoxSkin$5.lambda(ComboBoxSkin.fx:268)
at combobox.ComboBoxSkin$5.lambda(ComboBoxSkin.fx:268)
at combobox.ComboBoxSkin$5.invoke(ComboBoxSkin.fx:264)
at combobox.ComboBoxSkin$5.invoke(ComboBoxSkin.fx:264)
at combobox.ComboBoxSkin$5.invoke(ComboBoxSkin.fx:264)
at combobox.ComboBoxSkin$5.invoke(ComboBoxSkin.fx:264)
at javafx.scene.Node.impl_processMouseEvent(Node.fx:1677)
at javafx.scene.Node.preprocessMouseEvent(Node.fx:1705)
at javafx.scene.Scene$MouseHandler.process(Scene.fx:665)
at javafx.scene.Scene$MouseHandler.process(Scene.fx:550)
at javafx.scene.Scene.impl_processMouseEvent(Scene.fx:368)
at javafx.scene.Scene$ScenePeerListener.mouseEvent(Scene.fx:496)
at com.sun.javafx.tk.swing.SwingScene$SwingScenePanel.doMouseEvent(SwingScene.java:388)
at com.sun.javafx.tk.swing.SwingScene$SwingScenePanel.mousePressed(SwingScene.java:404)
at java.awt.Component.processMouseEvent(Unknown Source)
at javax.swing.JComponent.processMouseEvent(Unknown Source)
at java.awt.Component.processEvent(Unknown Source)
at java.awt.Container.processEvent(Unknown Source)
at java.awt.Component.dispatchEventImpl(Unknown Source)
at java.awt.Container.dispatchEventImpl(Unknown Source)
at java.awt.Component.dispatchEvent(Unknown Source)
at java.awt.LightweightDispatcher.retargetMouseEvent(Unknown Source)
at java.awt.LightweightDispatcher.processMouseEvent(Unknown Source)
at java.awt.LightweightDispatcher.dispatchEvent(Unknown Source)
at java.awt.Container.dispatchEventImpl(Unknown Source)
at java.awt.Window.dispatchEventImpl(Unknown Source)
at java.awt.Component.dispatchEvent(Unknown Source)
at java.awt.EventQueue.dispatchEvent(Unknown Source)
at java.awt.EventDispatchThread.pumpOneEventForFilters(Unknown Source)
at java.awt.EventDispatchThread.pumpEventsForFilter(Unknown Source)
at java.awt.EventDispatchThread.pumpEventsForHierarchy(Unknown Source)
at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
at java.awt.EventDispatchThread.run(Unknown Source)
Posted by Hari on October 05, 2009 at 05:15 PM IST #
More info on the previous post:
My scene object looks like this:
scene: Scene {
width: AppView.screenWidth
height: AppView.screenHeight
fill: Color.GRAY
content: bind [
Group {
focusTraversable: true
content: [bgRect, bgButtonRect, closeButton]
}, controller.contents]
}
Since the content is bound, I cannot insert list into the content. How do I modify your code for this situation?
I am a newbee. Please help.
Thanks,
Hari
Posted by Hari on October 05, 2009 at 09:21 PM IST #
I got it working by changing to
content: [
Group {
focusTraversable: true
content: [bgRect, closeButton]
},Group {
content: bind controller.contents
} ]
Posted by Hari on October 06, 2009 at 04:42 AM IST #
@Hari Sorry for not getting back earlier, was on vacation and also busy with other tasks. Glad that you could resolve it.
Posted by Rakesh Menon on October 23, 2009 at 06:21 PM IST #
Hi Rakesh,
Does this combo box has a functionality to select multiple items. for example , if i want to select multiple fields for download like java and javafx so is it possible to select multiple items and show it in a display box ? if yes then how to achieve it ?
Thanks
Posted by Nihar on October 28, 2009 at 01:55 PM IST #
@Nihar No. ComboBox is usually used for single selection. Will have to use List for multiple selection. Even if we try to enhance the ComboBox, how will user select multiple items in the drop-down List? It will be disposed on selection of one item.
Posted by Rakesh Menon on October 29, 2009 at 10:11 AM IST #
Hi Rakesh,
Great job !!, this control is really missing in the JavaFX 1.2 release.
I have a question about the display of the choice list (listView), why it is directly inserted to the scene content rather than to the parent layout of the combox box control?
Is it possible to change that?
Thanks
Posted by fabs on November 24, 2009 at 03:31 PM IST #
@fabs Thanks! Its to ensure that the "popup" appears on top of all the other nodes. If I add it to parent, the "popup" may show behind another node (based on its z-order)
Posted by Rakesh Menon on November 24, 2009 at 03:35 PM IST #
Thanks for your response,
But, in that case, is it possible to use the toFront() and toBack() methods of the Node class (if it is added to the parent)?
Posted by fabs on November 24, 2009 at 04:12 PM IST #
@fabs toFront() may not work because it will only move the node to the front of its sibling nodes, it will not work if "popup" is hidden by nodes from parent or other hierarchy
Posted by Rakesh Menon on November 24, 2009 at 04:54 PM IST #
Hi Rakesh,
I downloaded Combobox sources into my local system.
And i cleaned and build the sources using Netbeans 6.7.1 IDE. Then i installed the jar file in Windows Mobile 6.0(ASUS Mobile). But the application is not running in the device. If i install the jar file without clean and build, the application is running smoothly. Can you please help in solving this problem.
Posted by Siva on November 24, 2009 at 08:21 PM IST #
@Siva I did some enhancements so as to make it work on Mobile. Please try the latest source. I could run it on Sony-Ericsson XPERIA
Posted by Rakesh Menon on November 26, 2009 at 05:04 PM IST #