Forum Stats

  • 3,836,885 Users
  • 2,262,201 Discussions
  • 7,900,133 Comments

Discussions

How to add Images to ChoiceBox/ComboBox?

963802
963802 Member Posts: 31
edited Jan 3, 2013 2:43AM in JavaFX 2.0 and Later
Is it possible to add Images and the images be displayed in the ChoiceBox and/or ComboBox?
Tagged:

Best Answer

  • James_D
    James_D Member Posts: 1,496 Gold Trophy
    Answer ✓
    I haven't tested it, but I think
    driverComboBox.setButtonCell(new ListCell<Image>() {
      @Override protected void updateItem(Image item, boolean empty) {
        super.updateItem(item, empty);
        if (item == null || empty) {
          setGraphic(null);
        } else {
          setGraphic(new ImageView(item));
        }
      }
    });
    will do the trick. Obviously you could factor out the common ListCell implementation and reuse it in setButtonCell(...) and setCellFactory(...)

Answers

  • James_D
    James_D Member Posts: 1,496 Gold Trophy
    For ComboBox, yes. I don't know if it can be done for ChoiceBox.

    You need to specify a CellFactory; in the call(..) method, create a custom ListCell implementation. In its updateItem(..) method call the setGraphic(...) method, and pass in and ImageView containing the image you need.

    An example of a custom cell factory for a ComboBox can be found in the section "Applying Cell Factories to Combo Boxes" in http://docs.oracle.com/javafx/2/ui_controls/combo-box.htm#BABJCCIB
    James_D
  • 963802
    963802 Member Posts: 31
    edited Jan 3, 2013 2:43AM
    The following code produces an image in the list (which is great). I would also like for the combobox to have an image as well. How do I do this? Here is an image (https://docs.google.com/open?id=0ByPQuychWF8mM2xLWVdJcEl4b0k) that demonstrates the problem.
    	 driverComboBox.setCellFactory(new Callback<ListView<Image>, ListCell<Image>>() {
    	 @Override public ListCell<Image> call(ListView<Image> p) {
    	     return new ListCell<Image>() {
    		 @Override protected void updateItem(Image item, boolean empty) {
    		     super.updateItem(item, empty);
    		     
    		     if (item == null || empty) {
    			 setGraphic(null);
    		     } else {
    			 setGraphic(new ImageView(item));
    		     }
    		}
    	   };
           }
        });
    Edited by: 960799 on Jan 3, 2013 8:41 PM

    Edited by: 960799 on Jan 3, 2013 8:42 PM
  • James_D
    James_D Member Posts: 1,496 Gold Trophy
    Answer ✓
    I haven't tested it, but I think
    driverComboBox.setButtonCell(new ListCell<Image>() {
      @Override protected void updateItem(Image item, boolean empty) {
        super.updateItem(item, empty);
        if (item == null || empty) {
          setGraphic(null);
        } else {
          setGraphic(new ImageView(item));
        }
      }
    });
    will do the trick. Obviously you could factor out the common ListCell implementation and reuse it in setButtonCell(...) and setCellFactory(...)
  • 963802
    963802 Member Posts: 31
    Thanks JamesD. I did as you suggested and broke out the classes as to be reused in other code. Here is the code if you are interested:

    public class ListCellImage extends ListCell<Image>{
        @Override 
        protected void updateItem(Image item, boolean empty) {
    	super.updateItem(item, empty);
    	 
    	if (item == null || empty) {
    	    setGraphic(null);
    	} else {
    	    setGraphic(new ImageView(item));
    	}
        }
    }
    public class ImageCellFactoryCallback implements Callback<ListView<Image>, ListCell<Image>>{
        @Override
        public ListCell<Image> call(ListView<Image> item) {
    	return new ListCellImage();
        }
    So to use it, do the following
    	ComboBox.setCellFactory(new ImageCellFactoryCallback());
    	ComboBox.setButtonCell(new ListCellImage());
This discussion has been closed.