Adding Items to a ListView using Scala, ScalaFX and FXML

I have been playing with writing an application using Scala, with its API defined in ScalaFX, which wraps the powerful JavaFX library. For simple exercises, coding the UI by hand was enough. But for more complex forms, I began using the JavaFX Scene Builder tool.

Fortunately, others have blazed this trail, and there are fairly stable ScalaFX and ScalaFXML libraries available.

Using the Scene Builder tool, I laid out my form and included a ListBox to hold possible gender selections.

The Scene Builder tool generated fxml code such as:
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="208.0" prefWidth="275.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label layoutX="14.0" layoutY="30.0" text="Name" />
      <Label layoutX="14.0" layoutY="71.0" text="Gender" />
      <TextField fx:id="name" layoutX="95.0" layoutY="26.0" />
      <ListView fx:id="genderOptions" layoutX="95.0" layoutY="71.0" prefHeight="70.0" prefWidth="149.0" />
   </children>
</AnchorPane>

That lays out the user interface. Now I need a Controller (if you like MVC) or Presenter (if you prefer MVP) class. I specified the class in the usual way in the fxml file, and created the Scala class to match. It looked like this:
@sfxml
class SimpleFormPresenter (
   private val name: TextField,
   private val genderOptions: ListView[String],
   private val myDependency:MySimpleFormDependency) { 
 ...
}

The @sfxml annotation triggers the ScalaFXML tool's macros to do the magic bridging between Scala, JavaFX, and FXML. We'll leave more information about that whole process for another day.


Now I need to populate the ListView with the Gender possibilities that my application will use. But how? We have an immutable ListView parameter being provided to the controller, how do we load its contents? Sifting through some examples from the ScalaFXML pages, I see this, which in their demo adds items to a ComboBox control named "types":
// Filling the combo box
for (converter <- converters.available) {
  types += converter
}

Sadly, trying something like that for my Gender ListView does not work. Sticking this into the Presenter class:
  genderOptions += "Male"
creates a compile error. And just as the compile error says, there is no "+=" available on the ListView class.
[error] C:\Users\steve\samples\SimpleFormPresenter.scala:23: value += is not a member of scalafx.scene.control.ListView[String]
[error]   genderOptions += "Male"

Digging into the ScalaFX API, we discover that the contents are held in the member "items" and that it is an ObjectProperty[ObservableList] object.
def items: ObjectProperty[ObservableList[T]]
  The underlying data model for the ListView.

The ScalaFX wrapper class for the JavaFX ObservableList is scalafx.collections.ObservableBuffer, and the API assures us that it is mutable.

The upshot is that, while we have declared the genderOptions parameter immutable with the val identifier, we can still access its mutable contents. Such as:
  val genders = ObservableBuffer("Male")
  genders += "Female"
  genderOptions.items = genders

Here, we create a new ObservableBuffer with one value. We then demonstrate its "+=" member to add a second item, and set the ListView's data model to this ObservableBuffer. When we run it via sbt, it compiles cleanly and produces a ListView like this when run:

With that figured out, we can extract the responsibility for looking up the set of Genders in the application to another class, or another tier in our design. Maybe something like this that, for now, is hard-coded but might grow into a database lookup as the system evolves:

object GenderTypes {

  def getAll(): ObservableBuffer[String]  = {

    ObservableBuffer("Male", "Female")

  }

And back in our SimpleFormPresenter class, change the population of the genderOptions ListView to:

  genderOptions.items = GenderTypes.getAll()