JavaFX Presentation Model Pattern Using Binding

28 06 2009

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

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

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

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!

About these ads

Actions

Information

9 responses

28 06 2009
codecraig

Handy technique and clear explanation, nice to see JavaFX provide this capability. When I started doing Flex it took a minute to appreciate what it does on behalf of the developer…however as I’ve learned, throwing binding all around isn’t always the best approach in a large enterprise application. It does have it’s place, you just have to know when/how to use it appropriately.

Have you ever decompiled the bytecode to look at what JavaFX does for you when you use the “bind” and “inverse”? I’d be curious to see what’s going on under the covers.

p.s.
Glad I found your blog, at work a co-worker has started a GUI SIG (special interest group) and our first discussion was about JavaFX 1.2. I’m interested to see a “real” app developed using it, and seeing how the code/classes get laid out, etc.

29 06 2009
carldea

codecraig,

Thank you for your feedback. Yes I agree with what you have said. Great care should be taken when using bind as it could cause performance problems and also object type memory leaks. The key thing about the pattern is to understand the separation of presentation(View), presentation(logic) and domain. Karsten Lentzsch calls it Model View Presenter. I think JavaFX’s bind keyword maybe too easy to use (resembles the day it was bad to use goto statements). Flex seems to go the route of XML to achieve separation of concerns which is a way to force the developer to organize code and make distinctions on each layer (not a bad idea). I believe any cool language feature can kill a program, we just need to code responsibly.

Cool! Decompiling sounds like a splendid idea. If you’ve tried it, please tell me which one did you use.

p.s. Hopefully someone will develop an extremely well organized JavaFX version of a Pet Store/Bank Application and blog on it.

-Carl

1 07 2009
vladimir

Very nice comparison of two approaches.
1. Can you compare the two approaches in client-server environment?
2. Is JavaFX binding feature able to work in client-server environment?

Vladimir

2 07 2009
carldea

Vladimir,

1. I’m sorry this question might be beyond the scope of this blog entry. I’m just focusing on the client side of things.
If you are interested you may want to look at back-end services such as JSON, Restful, JAXB, SOAP, etc. services along with technologies like Grizzly that support HTTP persistent connections.

2. JavaFX platform is currently a Client side technology. Since it is a declarative language the server could send JavaFX script code to a client to be executed similar to a browser rendering Html/JavaScript. The server could build JavaFX screens on the fly. Of coarse this is in theory.

-Carl

3 07 2009
vladimir

Carl,

thanks for links and explanation. This is my conclusion, my wishes (no reply needed):

MVP thru binding mechanism is fine. It would be fine to have the same seamless mechanism of bound models and notified views over the internet. JavaFX itself must better support some kind of client-server communication if we want to see a content over “all screens of our lives”. I hope mobile operators and TV companies force it. And maybe it will force JavaFX syntax again :(
Grizzly’s approach is right, some kind of two-way communication channel is needed. But it is 4 man show.
I have awaited such technology like JavaFX for 10+ years. Nowadays, no repetitive rendering of DOM is needed! Finally. Nevermore. Neither in theory :)

16 07 2009
Java desktop links of the week, June 29 | Jonathan Giles

[...] Carl Dea posted three articles on language features in JavaFX Script. The first post discusses the order in which init and postinit blocks are called,  the second post discusses how to set default values in init blocks, and finally the third post discusses implementing a presentation model in JavaFX using bindings. [...]

11 01 2010
Tomas Olsson

Hi, interesting idea. However, is it not a problem that you do not separate between the value that is going to be shown and how it is updated?
I present an idea of using a mediating class, that controls how the data is updated between a domain object and the GUI element using bind, replace and inverse bind, here: http://deeptrust.blogspot.com/2009/11/off-to-new-topic-javafx-script-and.html .

In my approach the domain object just contain the current value (model), the GUI *(view) uses a mediator object (control) to propagate updates from and to the domain object. Thus we have a clear separation of model, view and control (MVC). However, I am not sure how Presentation Model Pattern differs from the MVC pattern.

Any comments are welcome.

/Tomas

10 12 2011
james

how can do the same presentation model implementation for java fx 2.0.Can u please update

thanks
james

14 12 2011
carldea

James,
To implement a generic presentation model class you might want to look at FXCollections.observableHashMap() and the use of Properties API. I believe there are many ways to map Java Beans and its attributes. One thing to be reminded of is that the prior JavaFX 1.x Script language and (Visage language) uses the ‘bind’ keyword in order to bind UI controls to domain objects. Since there isn’t a keyword ‘bind’ in Java (the language), the JavaFX 2.0 allows you to use the Properties and Bindings APIs to achieve the same thing. What’s really cool is that there also exists an unbind() method in JavaFX 2.0. Allowing you to disassociate properties. This wasn’t possible in the JavaFX 1.x Script language. So, the sky’s the limit! let me know what you come up with.

I hope that helps.

Carl

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Follow

Get every new post delivered to your Inbox.

Join 67 other followers

%d bloggers like this: