Combo Box JavaFx with FXML

Question

how can i use to Combo Box with FXML? i need to set dynamic data.. Does anyone have an example?

This is my Sample.fxml

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication15.SampleController">
    <children>
        <Button layoutX="126" layoutY="90" text="Click Me!" onAction="#handleButtonAction" fx:id="button" />
        <Label layoutX="126" layoutY="120" minHeight="16" minWidth="69" fx:id="label" />
        <ComboBox  fx:id="ciudad" prefWidth="123.0" GridPane.columnIndex="1" GridPane.rowIndex="3">                
            <cellValueFactory>
                    <PropertyValueFactory property="firstName" />
            </cellValueFactory>
        </ComboBox>
    </children>
</AnchorPane>

Answer 1

See this JavaFX FXML ComboBox demo app. For dynamic data you can either dynamically generate your fxml using something like Velocity or, probably better, populate an ObservableList and provide it to your fxml injected ComboBox instance.

Here is a modified version of the demo app which populates the ObservableList of ComboBox items in the controller initializer.

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"/>
    <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://i.i.com.com/cnwk.1d/i/tim/2011/03/10/orange_iStock_000001331357X_540x405.jpg" 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://smoothiejuicerecipes.com/pear.jpg" 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>

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'.";

    // populate the fruit combo box with item choices.
    fruitCombo.getItems().setAll("Apple", "Orange", "Pear");

    // 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;
          }
        }
      }
    });
  }
}

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();
  }
}

Sample Program Output: