This discussion is archived
4 Replies Latest reply: Jan 2, 2013 5:12 PM by 963802 RSS

How to add Images to ChoiceBox/ComboBox?

963802 Newbie
Currently Being Moderated
Is it possible to add Images and the images be displayed in the ChoiceBox and/or ComboBox?
  • 1. Re: How to add Images to ChoiceBox/ComboBox?
    James_D Guru
    Currently Being Moderated
    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
  • 2. Re: How to add Images to ChoiceBox/ComboBox?
    963802 Newbie
    Currently Being Moderated
    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
  • 3. Re: How to add Images to ChoiceBox/ComboBox?
    James_D Guru
    Currently Being Moderated
    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(...)
  • 4. Re: How to add Images to ChoiceBox/ComboBox?
    963802 Newbie
    Currently Being Moderated
    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());

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points