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="" xmlns:fx="">
      <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" />

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:
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

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:
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, the Eclipse EGit Rebase Interact…

Trigger Windows Scheduled Task from Remote Computer via Jenkins

One thing I love about working in Information Technology is the opportunity - the NEED - to constantly learn new things. If a week goes by in which I have not looked up something on StackOverflow or other message boards, I start lobbying my team for more challenges.

This week, I learned the power of running "SCHTASKS.exe" from a command-line script for a remote server in a Microsoft Windows environment.

If you don't know Schtasks, you can read up on it here:

In a nutshell, it is the command-line interface for the Windows Task Scheduler, and allows you (or a system administrator) to create, change, run, query, terminate, and delete scheduled tasks on a work-station, either the local one or a remote one.

Not all of the features are available in older versions. In my scenario below, this was relevant as the local computer will be a Windows 8 machine, and the remote server is, shall we say, a muc…

Reusing UI Sections in FXML and Scene Builder

If the DRY principle (Don't Repeat Yourself) is a core Best Practice in Object-Oriented Programming and software development, is there any way to define common user interface sections of an application in FXML? Can we avoid repeating the work that goes into laying out and controlling sections that are common across across many or even all screens?

It would be beneficial and more consistent if their layout could be defined once and reused wherever necessary. Rather than redefine a menu bar or a collection of buttons on multiple screens, create them once and apply them as needed.

Of course, this approach is nothing new. But as I explored JavaFX as a User Interface toolkit, it was straight-forward how to do this in code, but it was less clear how to do so using FXML.

To speed up user interface development, we want to use the JavaFX layout manager Scene Builder. I am using v8.2 from Gluon - thank you Gluon for backing this important tool!