JavaFX: Using Patterns & Clean Code

We Recommend These Resources

The Views

Now, a UI component. The way we design it largely depends on the process, as a graphic designer could be involved. In any case, I think that the whole UI should not be implemented in a single, bloated class; rather relevant pieces should be split apart. For instance, a CustomNode can model the "form" that renders the contact details (in the code below I've omitted all the attributes related to rendering):

package it.tidalwave.javafxstuff.contactlist.view;

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.Node;
import javafx.ext.swing.SwingLabel;
import javafx.ext.swing.SwingTextField;
import it.tidalwave.javafxstuff.contactlist.model.Contact;

public class ContactView extends CustomNode
  {
    public var contact : Contact;

    public override function create() : Node
      {
        return Group
          {
            content:
              [
                VBox
                  {
                    content:
                      [
                        SwingLabel
                          {
                            text: bind "{contact.firstName} {contact.lastName}"
                          }
                        HBox
                          {
                            content:
                              [
                                SwingLabel { text: "First name: " }
                                SwingTextField { text: bind contact.firstName }
                              ]
                          }
                        HBox
                          {
                            content:
                              [
                                SwingLabel { text: "Last name: "  }
                                SwingTextField { text: bind contact.lastName }
                              ]
                          }
                        HBox
                          {
                            content:
                              [
                                SwingLabel { text: "Email: " }
                                SwingTextField { text: bind contact.email }
                              ]
                          }
                        HBox
                          {
                            content:
                              [
                                SwingLabel {  text: "Phone: " }
                                SwingTextField { text: bind contact.phone }
                              ]
                          }
                      ]
                  }
              ]
          };
      }
  }

As you can see, we have only layout and data binding here, the only things a view should do.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Juha Vainikka replied on Tue, 2009/05/12 - 3:30am

Great article Fabrizio!

I also think it's very important (especially for newbies) to see technical demos that aren't essentially "hacks".

Looking forward to read your next piece.

/juha

Camilo Arango replied on Tue, 2009/05/12 - 10:23am

Good article. Thanks. I wonder if the model classes could be written is regular Java, instead.

Fabrizio Giudici replied on Tue, 2009/05/12 - 1:52pm

I wonder if the model classes could be written is regular Java, instead.

It's one of the things I'll try in future. For now, the only thing I've done is to run javap on a compiled JavaFX value object, and - as expected - I saw it's very different from a regular JavaBean. Basically every attribute its an independent object, I presume with its own get()/set() and binding support. But there are also lots of other stuff that I don't understand at a glance.

[Mistral:src/ContactList/dist] fritz% javap -classpath ContactList.jar it.tidalwave.javafxstuff.contactlist.model.Contact
Compiled from "Contact.fx"
public class it.tidalwave.javafxstuff.contactlist.model.Contact extends java.lang.Object implements it.tidalwave.javafxstuff.contactlist.model.Contact$Intf,com.sun.javafx.runtime.FXObject{
    public final com.sun.javafx.runtime.location.ObjectVariable $id;
    public final com.sun.javafx.runtime.location.ObjectVariable $firstName;
    public final com.sun.javafx.runtime.location.ObjectVariable $lastName;
    public final com.sun.javafx.runtime.location.ObjectVariable $phone;
    public final com.sun.javafx.runtime.location.ObjectVariable $email;
    public final com.sun.javafx.runtime.location.ObjectVariable $photo;
    public static java.lang.String toString$impl(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public com.sun.javafx.runtime.location.ObjectVariable get$id();
    public com.sun.javafx.runtime.location.ObjectVariable get$firstName();
    public com.sun.javafx.runtime.location.ObjectVariable get$lastName();
    public com.sun.javafx.runtime.location.ObjectVariable get$phone();
    public com.sun.javafx.runtime.location.ObjectVariable get$email();
    public com.sun.javafx.runtime.location.ObjectVariable get$photo();
    public static void applyDefaults$id(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public static void applyDefaults$firstName(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public static void applyDefaults$lastName(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public static void applyDefaults$phone(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public static void applyDefaults$email(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public static void applyDefaults$photo(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public void initialize$();
    public static void addTriggers$(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public java.lang.String toString();
    public it.tidalwave.javafxstuff.contactlist.model.Contact();
    public it.tidalwave.javafxstuff.contactlist.model.Contact(boolean);
    public static void userInit$(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public static void postInit$(it.tidalwave.javafxstuff.contactlist.model.Contact$Intf);
    public static void main(java.lang.String[])       throws java.lang.Throwable;
    static {};
}

Fabrizio Giudici replied on Wed, 2009/05/13 - 10:18am

A great post about the JavaFX -> JavaBeans binding has been posted: http://www.dzone.com/links/rss/transparent_bind_of_javafx_and_pojos.html

John Smith replied on Wed, 2009/05/13 - 12:29pm

Well, I still don't get what you can do better than with plain Java... and it is easy to make good MVC patterns in Java!

Fabrizio Giudici replied on Wed, 2009/05/13 - 1:51pm

The fact that you do things in JavaFX "better" than Java is subjective, at this time, and related to a number of things. For me, I don't see compelling reasons for turning my Java desktop stuff into JavaFX _now_. If I had some compelling graphics requirements, at the point to throw a graphic designer into the team, JavaFX would make the difference. I expect the two different perspectives to get closer and closer in the next years.

Objectively, JavaFX is more coincise and binding is the key trick. Try to write the same example I'm talking of in Java. Of course, the same functional binding could be introduced in Java (thinking of it...) thus even Java programs could be much shorter. But with Java binding can't be as natural as is with JavaFX.

Raghu Semburakk... replied on Thu, 2009/05/14 - 4:01pm

Any one have comparative study of Flex Vs JavaFX? I am wondering, why still most financial Institutions still prefers to use Swing based client/RCP rather going for RIA like JavaFX or Flex?

Fabrizio Giudici replied on Fri, 2009/05/15 - 2:14am

It's the same for the industry. Applications that are to be delivered to technical people (such as a finance analyst or a controller of an industrial process) don't need fancy graphics and Swing is a consolidated technology which is good for them. I don't think these people will switch to JavaFX or Flex soon.

Krzysztof Kula replied on Mon, 2009/06/01 - 12:54pm

While run application I have strange behaviour: Click on list not always work, it looks like binding slows the application, if application works fine for you?
BTW, there is JavaFX 1.2 with Linux support.
Regards,
Krzysztof Kula

Fabrizio Giudici replied on Tue, 2009/06/02 - 6:16am

Krzysztof, no, I didn't see problems with that handful of names. BTW, I have another application where a similar trick is used and it works with about 1.000 items, with only some slightly noticeable delay in some cases. Of course, with such a big number of items you probably have to do some smarter filtering rather than using subsequences.

Fabrizio Giudici replied on Thu, 2009/06/04 - 10:53am

I must add "no noticeable delay" after a few fixes, but keeping the selection mechanism as is.

Krzysztof Kula replied on Fri, 2009/06/05 - 4:56am

Thanks,
Then I must start serching for a reason in my computer platform. Regards, Krzysztof Kula

Fabrizio Giudici replied on Sun, 2009/06/07 - 11:04am

I've posted here a screencast of the application running with about 1.000 elements. The screencast is neither cut nor accelerated, you can see the real speed on a MacBook Pro.

For what concerns my original demo, the only problem I see on JavaFX 1.2 is some parts of the layout screwed up.

Pablo Oliveira replied on Sat, 2011/06/04 - 5:24pm

Thanks for this work, it is very helpfull. Regards. Pablo

Matt Coleman replied on Tue, 2012/07/31 - 1:45am in response to: Camilo Arango

I always wondered about that too..it would be a nice change
web designer buffalo