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.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/ComboBox/ComboBox.js"></script>

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


<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_combobox";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

Comments:

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 02: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 01:49 PM IST #

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

Posted by Eric Wendelin on July 10, 2009 at 01:30 PM IST #

@Eric Wendelin Glad! Thanks!

Posted by Rakesh Menon on July 10, 2009 at 02: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 30, 2009 at 05:44 PM IST #

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

Posted by Rakesh Menon on August 01, 2009 at 12: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 07:05 AM 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 07:43 AM 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 14, 2009 at 11:42 PM 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 11:23 AM 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 08:17 AM 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 02: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 02:19 AM 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 02: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 05, 2009 at 09:42 PM 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 11:21 AM 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 06:55 AM 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 03: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 07:31 AM 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 07:35 AM 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 08:12 AM 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 08:54 AM 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 12: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 09:04 AM IST #

-- from Henry --

Cool!, can it be added to NetBeans Composer Controls Palette?

-----------------

Thanks! A similar component will be part of next release and will be available in composer.

Posted by Rakesh Menon on March 09, 2010 at 06:07 AM IST #

1)I need simple comboBox javafx program with how an item added to the combobox?
2)A sample example of xml parser(pullparser) program

Posted by guest on April 02, 2010 at 05:00 PM IST #

@59.164.227.185 In above implementation ComboBox has "items" attribute, which is an Object[], you can add to it.

You can refer to basic WebService usage post, it has related code for XML parser
http://blogs.sun.com/rakeshmenonp/entry/javafx_webservices

You can also refer to API documentation
http://java.sun.com/javafx/1.2/docs/api/javafx.data.pull/javafx.data.pull.PullParser.html

Posted by Rakesh Menon on April 05, 2010 at 04:01 AM IST #

Hi Rakesh,

Great Work !!

But I just had one problem. I used the combobox code and inserted it in a scene. Inspite of whatever width i set in layoutInfo, the combobox is displayed with its width as half of the what i see here running in this demo above.I am able to see only 'Oper..' of the string 'Operating System' list too.I inserted it in a mig-layout but no change in the display.Any help? Here is the code below.

var productComboBox = ComboBox {
items: [
"Operating Systems",
"Virtualization",
"Java",
"Mobile Solutions",
"Software Infrastructure",
"Databases",
"Office Productivity",
"Systems Management",
"Developer Tools"
]
translateX:100
translateY:50
layoutInfo: LayoutInfo { width: 200 height: 26 }
};
productComboBox.select(0);

Stage {
title: "TestFX"
width: 500
height: 500
scene: Scene {
content: [
productComboBox

]
}
}

Posted by Shalabh Vyas on April 07, 2010 at 02:56 PM IST #

@Rakesh

Hey, I was able to correct it by setting the width and height of the combobox directly instead of doing it in layoutInfo. However, I am not able to resolve it in MigLayout. I set width and height the same was and put "growx" in layoutInfo. Is this the right way? What should we do to ensure that the combobox widens to accommodate the longest item in the list.Can the width be forcibly set like this?

Thanks.

Posted by Shalabh Vyas on April 07, 2010 at 03:30 PM IST #

@Shalabh Yes, the implementation didn't take care of layoutInfo hint. Also right now its not computing the preferred size (as per max width of item). So for now you need to compute this and update the width of ComboBox.

Posted by Rakesh Menon on April 08, 2010 at 02:51 AM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
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