JavaFX fxml combo box selection demonstration app

fruitcombo.css

/** fruitcombo.css
    place in same directory as FruitComboApplication.java 
    ensure build system copies the css file to the build output path */

.layout { 
  -fx-background-color: cornsilk;
}

#selected-fruit-frame {
  -fx-border-color: burlywood;
  -fx-border-width: 5;
  -fx-background-color: white;
}

.bold-label {
  -fx-font-weight: bold;  
}

fruitcombo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<!-- fruitcombo.fxml 
     place in same directory as FruitComboApplication.java 
     ensure build system copies the fxml file to the build output path -->
     
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?scenebuilder-stylesheet fruitcombo.css?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="205.0" prefWidth="168.0" styleClass="layout" xmlns:fx="http://javafx.com/fxml" fx:controller="fruit.FruitComboController">
  <children>
    <ComboBox fx:id="fruitCombo" layoutX="15.0" layoutY="33.0" prefWidth="90.0" promptText="choose">
      <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="Apple" />
          <String fx:value="Orange" />
          <String fx:value="Pear" />
        </FXCollections>
      </items>
    </ComboBox>
    <Label id="fruitSelectorLabel" layoutX="15.0" layoutY="10.0" styleClass="bold-label" text="Fruit Selector" />
    <VBox alignment="TOP_CENTER" layoutX="14.0" layoutY="62.0" prefHeight="134.0" prefWidth="140.0" spacing="8.0">
      <children>
        <StackPane id="selected-fruit-frame" minHeight="100.0" minWidth="118.0" prefHeight="108.0" prefWidth="140.0">
          <children>
            <ImageView fx:id="orangeImage" fitHeight="91.99999237060547" fitWidth="122.66666035739114" pickOnBounds="true" preserveRatio="true" visible="false">
              <image>
                <Image url="http://pngimg.com/upload/orange_PNG803.png" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
            <ImageView fx:id="pearImage" fitHeight="93.0" fitWidth="124.0" pickOnBounds="true" preserveRatio="true" visible="false">
              <image>
                <Image url="http://thedeliciousrevolution.com/wp-content/uploads/2008/08/Pears.png" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
            <ImageView fx:id="appleImage" fitHeight="93.0" fitWidth="124.0" pickOnBounds="true" preserveRatio="true" visible="false">
              <image>
                <Image url="http://uhallnyu.files.wordpress.com/2011/11/green-apple.jpg" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
          </children>
        </StackPane>
        <Label fx:id="selectedFruit" textAlignment="CENTER" />
      </children>
    </VBox>
  </children>
  <stylesheets>
    <URL value="@fruitcombo.css" />
  </stylesheets>
</AnchorPane>

FruitComboApplication.java

package fruit;

import java.io.IOException;
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

/** Main application class for fruit combo fxml demo application */
public class FruitComboApplication extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) throws IOException {
    stage.setTitle("Choices");
    stage.getIcons().add(new Image("http://files.softicons.com/download/application-icons/pixelophilia-icons-by-omercetin/png/32/apple-green.png"));
    AnchorPane layout = FXMLLoader.load(
      new URL(FruitComboApplication.class.getResource("fruitcombo.fxml").toExternalForm())
    );
    stage.setScene(new Scene(layout));
    stage.show();
  }
}

FruitComboController.java

package fruit;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.image.ImageView;

/** JavaFX fxml controller for fruit combo fxml demo application. */
public class FruitComboController implements Initializable {

  @FXML //  fx:id="appleImage"
  private ImageView appleImage; // Value injected by FXMLLoader

  @FXML //  fx:id="fruitCombo"
  private ComboBox<String> fruitCombo; // Value injected by FXMLLoader

  @FXML //  fx:id="orangeImage"
  private ImageView orangeImage; // Value injected by FXMLLoader

  @FXML //  fx:id="pearImage"
  private ImageView pearImage; // Value injected by FXMLLoader

  @FXML //  fx:id="selectedFruit"
  private Label selectedFruit; // Value injected by FXMLLoader

  @Override // This method is called by the FXMLLoader when initialization is complete
  public void initialize(URL fxmlFileLocation, ResourceBundle resources) {
    assert appleImage != null : "fx:id=\"appleImage\" was not injected: check your FXML file 'fruitcombo.fxml'.";
    assert fruitCombo != null : "fx:id=\"fruitCombo\" was not injected: check your FXML file 'fruitcombo.fxml'.";
    assert orangeImage != null : "fx:id=\"orangeImage\" was not injected: check your FXML file 'fruitcombo.fxml'.";
    assert pearImage != null : "fx:id=\"pearImage\" was not injected: check your FXML file 'fruitcombo.fxml'.";
    assert selectedFruit != null : "fx:id=\"selectedFruit\" was not injected: check your FXML file 'fruitcombo.fxml'.";

    // bind the selected fruit label to the selected fruit in the combo box.
    selectedFruit.textProperty().bind(fruitCombo.getSelectionModel().selectedItemProperty());

    // listen for changes to the fruit combo box selection and update the displayed fruit image accordingly.
    fruitCombo.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<String>() {
      @Override public void changed(ObservableValue<? extends String> selected, String oldFruit, String newFruit) {
        if (oldFruit != null) {
          switch(oldFruit) {
            case "Apple":  appleImage.setVisible(false);  break;
            case "Orange": orangeImage.setVisible(false); break;
            case "Pear":   pearImage.setVisible(false);   break;
          }
        }
        if (newFruit != null) {
          switch(newFruit) {
            case "Apple":  appleImage.setVisible(true);   break;
            case "Orange": orangeImage.setVisible(true);  break; 
            case "Pear":   pearImage.setVisible(true);    break;
          }
        }  
      }
    });
  }
}

Edited gist to link to a new pear and orange image (as the previous linked images are no longer available).

Nice, thanks

Thank you, this helped clarify the combobox functionality.

I updated the AnchorPane call to this:
AnchorPane layout = FXMLLoader.load(
new URL(getClass().getClassLoader().getResource("fruitcombo.fxml").toExternalForm())

added a resources directory and moved both fruitcombo.css and fruitcombo.fxml to this new directory.

hey kelliet,
thankx alot

what if i need to display the names of fruits in a separate listview just as i select them.

Label(selectedFruit ) is not working when I bind it with ComboBox selected item.

Thank you for your Gist ,it helped me to resolve my problem to fill combobox by using FXML,but when i add it says that this class is not available ,can you tell me what is the problem ?

Thank you for your Gist ,it helped me to resolve my problem to fill combobox by using FXML,but when i add it says that this class is not available ,can you tell me what is the problem ?

Do you mean the controller class isn’t recognized by the FXML file? If that is the case, make sure the fx:controller attribute of the Root pane (in this case it is an AnchorPane) is set to the correct package path for the class and then create a constructor in the controller class with a simple System.out.println(); statement inside of it and then try to run your application. If you see the text from the print statement in the consul, that you know the controller is successfully linked. Otherwise, try using seen builder as an alternative way of generating your FXML And edit it yourself as needed.

thank you for the code