Echo-type example is a common application that I show when showing RichFaces for the first time. Basically you type and the input is echoed on the next line as well as input length is being calculated and shown. Here is the same application with JavaFX. A few observations.

• This application is running entirely on the client. A JSF/RichFaces is running on the server.
• UI model in JavaFX is defined at the top of the file. In JSF/RichFaces, UI model is managed beans.
• My model consists of string, integer and function that does the counting
• I’m using VBox and HBox layout widgets
• To bind widgets to a model, bind key word is used. with inverse is used to create bi-directional binding. In other words, a change to one is automatically pushed to another
• It takes some to get used to syntax and formatting. I did this example in notepad. Doing this example in an IDE would help a lot as you wouldn’t need to worry about closing brackets.
• Once you get used to syntax, it’s pretty easy to develop

To compile this application:

javafxc Echo.fx

To run this application:

javafx Echo

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingButton;
import javafx.ext.swing.SwingTextField;
import javafx.ext.swing.SwingLabel;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.*;

var echo: String;
var echoCount: Integer;

function count () {
   echoCount = echo.length();
}

Stage {
   title:    "Echo Example"
   width:  500
   height: 150
   visible: true
   scene:
      Scene{
         content:
	    VBox {
               spacing: 15
               content: [
	          HBox {
                     spacing: 10
                     content:[
		        Text {
                           font: Font.font("Verdana",
                                   FontWeight.BOLD, FontPosture.REGULAR , 14);
                           x: 5 y: 20
			   content: "Text:"
                        }, //Text
		        SwingTextField {
			   action: function () {count();}
			   columns: 20
			   text: bind echo with inverse
		        } //SwingTextField
		     ]}, //HBox
		  HBox {
                     spacing: 10
                     content:[
     		        Text {
                           font: Font.font("Verdana",
                                   FontWeight.BOLD, FontPosture.REGULAR , 14);
			   x: 5 y: 20
			   content: "Echo:"
                        },//Text
		        Text {
                           font: Font.font("Verdana",
                                   FontWeight.BOLD, FontPosture.REGULAR , 14);
                           x: 5 y: 20
			   content: bind echo with inverse
			}//Text
		  ]},//HBox
		  HBox {
                     spacing: 10
                     content:[
     		        Text {
                           font: Font.font("Verdana",
                                   FontWeight.BOLD, FontPosture.REGULAR , 14);
                           x: 3 y: 20
			   content: "Count:"
                        },//Text
		        Text {
                           font: Font.font("Verdana",
                                   FontWeight.BOLD, FontPosture.REGULAR , 14);
                           x: 3 y: 20
			   content: bind if (echoCount == 0) ""
                                              else echoCount.toString();
			}//Text
		  ]}//HBox
               ]
            }//VBox
	 }//Scene
}//Stage

Note: echoCount function is activated on hitting for now. The onKeyUp event is not working in SwingTextField, it’s filed as a bug in Jira.