Home > javafx > JavaFX – ComboBox

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
Categories: javafx Tags: ,
  1. July 6, 2009 at 9:04 PM

    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. July 7, 2009 at 8:19 AM

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

  3. July 10, 2009 at 8:00 AM

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

  4. July 10, 2009 at 8:45 AM

    @Eric Wendelin Glad! Thanks!

  5. Tom Eugelink
    July 30, 2009 at 12:14 PM

    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. July 31, 2009 at 7:21 PM

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

  7. Priyank
    September 9, 2009 at 1:35 AM

    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. September 9, 2009 at 2:13 AM

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

  9. Filip
    September 14, 2009 at 6:12 PM

    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. September 15, 2009 at 5:53 AM

    @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
    September 22, 2009 at 2:47 AM

    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. September 28, 2009 at 8:46 PM

    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. September 28, 2009 at 8:49 PM

    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
    October 5, 2009 at 4:45 AM

    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
    October 5, 2009 at 8:51 AM

    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
    October 5, 2009 at 4:12 PM

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

  17. Rakesh Menon
    October 23, 2009 at 5:51 AM

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

  18. Nihar
    October 28, 2009 at 1:25 AM

    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. October 28, 2009 at 9:41 PM

    @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
    November 24, 2009 at 2:01 AM

    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. November 24, 2009 at 2:05 AM

    @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
    November 24, 2009 at 2:42 AM

    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. November 24, 2009 at 3:24 AM

    @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
    November 24, 2009 at 6:51 AM

    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. November 26, 2009 at 3:34 AM

    @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

  1. No trackbacks yet.

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: