Skip to main content

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

Popular posts from this blog

Git Reset in Eclipse

Using Git and the Eclipse IDE, you have a series of commits in your branch history, but need to back up to an earlier version. The Git Reset feature is a powerful tool with just a whiff of danger, and is accessible with just a couple clicks in Eclipse. In Eclipse, switch to the History view. In my example it shows a series of 3 changes, 3 separate committed versions of the Person file. After commit 6d5ef3e, the HEAD (shown), Index, and Working Directory all have the same version, Person 3.0.

Scala Collections: A Group of groupBy() Examples

Scala provides a rich Collections API. Let's look at the useful groupBy() function. What does groupBy() do? It takes a collection, assesses each item in that collection against a discriminator function, and returns a Map data structure. Each key in the returned map is a distinct result of the discriminator function, and the key's corresponding value is another collection which contains all elements of the original one that evaluate the same way against the discriminator function. So, for example, here is a collection of Strings: val sports = Seq ("baseball", "ice hockey", "football", "basketball", "110m hurdles", "field hockey") Running it through the Scala interpreter produces this output showing our value's definition: sports: Seq[String] = List(baseball, ice hockey, football, basketball, 110m hurdles, field hockey) We can group those sports names by, say, their first letter. To do so, we need a disc

Java 8: Rewrite For-loops using Stream API

Java 8 Tip: Anytime you write a Java For-loop, ask yourself if you can rewrite it with the Streams API. Now that I have moved to Java 8 in my work and home development, whenever I want to use a For-loop, I write it and then see if I can rewrite it using the Stream API. For example: I have an object called myThing, some Collection-like data structure which contains an arbitrary number of Fields. Something has happened, and I want to set all of the fields to some common state, in my case "Hidden"

How to do Git Rebase in Eclipse

This is an abbreviated version of a fuller post about Git Rebase in Eclipse. See the longer one here : One side-effect of merging Git branches is that it leaves a Merge commit. This can create a history view something like: The clutter of parallel lines shows the life spans of those local branches, and extra commits (nine in the above screen-shot, marked by the green arrows icon). Check out this extreme-case history:  http://agentdero.cachefly.net/unethicalblogger.com/images/branch_madness.jpeg Merge Commits show all the gory details of how the code base evolved. For some teams, that’s what they want or need, all the time. Others may find it unnecessarily long and cluttered. They prefer the history to tell the bigger story, and not dwell on tiny details like every trivial Merge-commit. Git Rebase offers us 2 benefits over Git Merge: First, Rebase allows us to clean up a set of local commits before pushing them to the shared, central repository. For this

Code Coverage in C#.NET Unit Tests - Setting up OpenCover

The purpose of this post is to be a brain-dump for how we set up and used OpenCover and ReportGenerator command-line tools for code coverage analysis and reporting in our projects. The documentation made some assumptions that took some digging to fully understand, so to save my (and maybe others') time and effort in the future, here are my notes. Our project, which I will call CEP for short, includes a handful of sub-projects within the same solution. They are a mix of Web APIs, ASP MVC applications and Class libraries. For Unit Tests, we chose to write them using the MSTest framework, along with the Moq mocking framework. As the various sub-projects evolved, we needed to know more about the coverage of our automated tests. What classes, methods and instructions had tests exercising them, and what ones did not? Code Coverage tools are conveniently built-in for Visual Studio 2017 Enterprise Edition, but not for our Professional Edition installations. Much less for any Commun