Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaFX fxml combo box selection demonstration app
/** 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;
}
<?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>
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();
}
}
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;
}
}
}
});
}
}
@jewelsea

This comment has been minimized.

Copy link
Owner Author

jewelsea commented May 14, 2014

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

@chhoukdavy

This comment has been minimized.

Copy link

chhoukdavy commented Oct 22, 2016

Nice, thanks

@kelliet

This comment has been minimized.

Copy link

kelliet commented Jan 19, 2017

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.

@Sachleen-19

This comment has been minimized.

Copy link

Sachleen-19 commented Apr 1, 2017

hey kelliet,
thankx alot

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

@Miltonbhowmick

This comment has been minimized.

Copy link

Miltonbhowmick commented Feb 4, 2018

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

@MenaiAla

This comment has been minimized.

Copy link

MenaiAla commented Mar 18, 2018

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 ?

@Macintoshuser2

This comment has been minimized.

Copy link

Macintoshuser2 commented Feb 26, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.