JavaFX Presentation Model Pattern Using Binding

Introduction

When working with Java Swing I used the JGoodies libraries such as Binding, Forms, Validation to build very cool Swing applications. So, this enabled me to soon learn the Presentation Pattern. The key advantages using the presentation pattern are to decouple the domain objects from the presentation layer, to help reduce complexity and facilitate multiple presentation layers. Some other advantages are ease of unit testing, functional testing (testing various layers independently of each other) and code maintenance (better package structuring).  Since JavaFX has binding for fweee (a line in the movie Bed Time Stories) do we still need to be concerned or understand this great pattern while using JavaFX? I believe we should. In my opinion I think people would likely get into trouble with the bind keyword without proper understanding of the presentation model pattern. Here I will demonstrate a simple form with a TextBox bound to a domain object in a bidirectional way. (written using JavaFX 1.2)

Example

There are two scenarios that will describe how data will flow. Scenario 1 is when a user is changing information on the view component and the data will be set on the domain object. Scenario 2 is when data is set in a domain object which intern will update the view component. In the application there will be a section called Variables which will display each variable or attribute being set.

Scenario 1: Changing the View

Enter Person Name

A GUI form contains a field allowing the user to type in the person’s name. As soon as the user loses focus or hits the Enter key the person object’s name is automatically populated.

Scenario 2: Changing the Model

Setting bean property

A GUI form contains a second field allowing the user to type in the person’s name. As soon as the user hits the Enter key the person object’s name property will be modified which notifies the presentation model which updates the view (TextBox) component with the new name (text property).

Presentation Model Pattern Demo – This is a simple test to demonstrate how we can mimic the presentation model pattern. Click image to launch.

Presentation Model Pattern Demo

Step 1: Create domain object

//Simple JavaFX bean class
class Person {
    public var name:String
}

Step 2: Create presentation model

// create presentation model
var namePresentationModel:String on replace oldValue {
    println("Old Value = {oldValue}"); // debug code
    println("New Value = {namePresentationModel}"); // debug code
}

Step 3: Create a person object instance from the Person class
By binding the presentation model with the person object’s name attribute and using inverse to bind the other way. Person.name notifies namePresentationModel which notifies personForm (TextBox see Step 4)

// create an object instance of Person
var personBean = Person{
    name: bind namePresentationModel with inverse
};

Step 4: Create view component (Person’s name TextBox)

By binding the presentation model with the personForm(TextBox) ’s text attribute and using inverse to bind the other way. personForm (TextBox) notifies namePresentationModel which notifies Person.name. This is a JavaFX common profile TextBox component.

// create the view or form (in this case just a textbox)
// bidirectional binding to presentation model
var personForm:TextBox = TextBox{
                text: bind namePresentationModel with inverse
                columns: 12
                selectOnFocus: true
}

Step 5: Create a way to set the person bean’s name attribute
The action executes when the user hits the enter key. This works only on the desktop profile. Notice below where the action function will set the personBean’s name attribute to the text entered into TextBox. This is a JavaFX common profile TextBox component.

// create the view or form (in this case just a textbox)
// This will manually set person.name to personForm2.text
var personForm2:TextBox = TextBox{
                text: ""
                columns: 12
                selectOnFocus: true
                action: function(){
                    personBean.name = personForm2.text
                }
}

Conclusion

Although I have comments and debug statements you will notice how simple and very little code to achieve the presentation model pattern. In the near future I would bet that there will be JavaFX application frameworks which will make form type application development with ease. Any comments are welcome. Enjoy!