Let's Visit Planet JFX and Explore Binding a Little More!

Planet JFX is a great place for viewing JavaFX Script code examples, demos, mini-tutorials, and various other resources.  According to the site:

"Planet JFX is an open-source documentation wiki for the JavaFX scripting platform.  We are a community  of early adopters, developers and Java enthusiasts.  Our topics include tips and tricks, how-to's, technical gotchas, code samples, tutorials, and the inevitable workarounds.  We invite everyone interested to contribute to this wiki and help develop a knowledge base about the practical use of JavaFX."

I'd like to direct your attention to a great little tutorial on Planet JFX that goes into more detail on binding than my previous post on the subject did.  Why don't you go ahead and do the tutorial, and come back here where I'll discuss a couple of additional JavaFX concepts that I haven't covered with you yet.

<pause waitingOnYou = "true"/>

So, how did you like the bind tutorial?  I *think* that it was originally created by J. David Eisenberg, who is the same developer that originally created a Javadoc-like program to reflect on the JavaFX Script classes and generate web pages of documentation on the JavaFX Script UI classes.

So, here are the additional concepts from the bind tutorial that I'd like to cover:

Structure of a JavaFX Class

class Counter {
	attribute value: Integer;
	operation increase( );
	operation decrease( );
}

attribute Counter.value = 0;

operation Counter.increase( )
{
	value++;
}

operation Counter.decrease( )
{
	value--;
}

As shown in the Counter class above, the class definition contains attribute and operation declarations.  Below that is an attribute initializer, which as you may have guessed initializes the value of an attribute when an instance of a class is created:

attribute Counter.value = 0;

Note that the value attribute is qualified with the Counter class.  JavaFX classes can also have operations and functions, which need to be qualified by the class name as well.  The operations shown here have no parameters, and return no values, but in the near future I'll go into some detail about JavaFX operations, functions, as well as triggers.

Two Ways of Creating an Instance of a Class

You may have noticed that there are two ways of creating an instance of a class:

• Using object literal syntax.  An example of this occurred in my last post about binding.  Here's the sample:

var hellojfxModel =
   HelloJFXModel {
     greeting: "Hello JavaFX Script Developer!"
   };

• Using the new operator.  An example of this was in the bind mini-tutorial that you just did on the Planet JFX site (you did do the tutorial, didn't you?)

var count:Counter = new Counter();

Explicitly Typing a Variable

I've got another JavaFX concept to tell you about in this example, concerning the line of code shown above.  The type of the variable named count is explicitly typed as a reference to a Counter instance.  This would not be necessary, as JavaFX would have ascertained this from the value assigned (a Counter instance).  Please note that JavaFX Script (unlike, say, JavaScript) is statically typed, which means that the type of each variable is known at compile time, and cannot change at runtime.

Layout Widgets

The bind tutorial on the Planet JFX site used one of several available layout widgets, specifically the FlowPanel widget.  Here's a code snippet:

FlowPanel {
  content: [
    Label {
      text: "0"
    },
    Button {
      text: "Add 1"
    },
    Button {
      text: "Subtract 1"
    }
  ]
}

The FlowPanel layout widget flows the array of UI widgets in its content attribute from left to right.  The purpose of layout widgets are to layout the UI of an application in a cross-platform environment.  The declarative coding style used in JavaFX makes this simple and powerful.  I'll discuss other layout widgets in future posts.

Hopefully this post has been helpful to you.  Please leave a comment if you have any questions or feedback.

Regards,

James L. (Jim) Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

Comments

[codecraig]

Another nice post, keep up the good work.

FYI, I posted a blip about your blog over at my site:

http://www.codecraig.com/articles/2007/10/30/javafx-new-blog