JavaFX – ComboBox


JavaFX 1.3 introduces many new controls. Please use ChoiceBox, MenuButton or SplitMenuButton

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.

Also available – Color Picker

Try it out and let me know feedback

Advertisements

About Rakesh Menon
-

27 Responses to JavaFX – ComboBox

  1. Raghu Nair says:

    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.

  2. Vaibhav says:

    Ah here you go :). But writing this much is pain 😦
    Any next blog will implement dependable combo box 😀

  3. Wow, those examples are really useful! Thanks a bunch!

  4. Rakesh Menon says:

    @Eric Wendelin Glad! Thanks!

  5. Tom Eugelink says:

    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

  6. Rakesh Menon says:

    @Tom Eugelink Sure! "JavaFX Calendar" looks great!

  7. Priyank says:

    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??

  8. Rakesh Menon says:

    @Priyank Are you able to view it when you launch from above site? Which version of JavaFX SDK? Any exceptions?

  9. Filip says:

    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?

  10. Rakesh Menon says:

    @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..

  11. Zaztzz says:

    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}");
    }

  12. Chris Murphy says:

    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)

  13. Chris Murphy says:

    Umm – actually looking at the stack trace it looks like a problem within the Sun TextBoxSkin, so maybe not so easy to fix!

  14. Hari says:

    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)

  15. Hari says:

    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

  16. Hari says:

    I got it working by changing to
    content: [
    Group {
    focusTraversable: true
    content: [bgRect, closeButton]
    },Group {
    content: bind controller.contents
    } ]

  17. Rakesh Menon says:

    @Hari Sorry for not getting back earlier, was on vacation and also busy with other tasks. Glad that you could resolve it.

  18. Nihar says:

    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

  19. Rakesh Menon says:

    @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.

  20. fabs says:

    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

  21. Rakesh Menon says:

    @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)

  22. fabs says:

    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)?

  23. Rakesh Menon says:

    @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

  24. Siva says:

    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.

  25. Rakesh Menon says:

    @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

  26. Sreeshyam says:

    Hi Rakesh,

    I have tried this in Javafx 1.3 and the Combobox is not behaving properly. Once i click on an item in drop down I couldn’t select an item from the list. Im using Netbeans6.9 beta.

    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: