James Weaver on Quantum Computing and Java

A JavaFX Script Calendar that Displays a Google Calendar Feed

Today I'd like to show you the humble beginnings of a JavaFX Script calendar that displays a Google Calendar feed.  It is currently pointing to my Google Calendar, which I've sparsely populated with some sample data.  You can change the program to point to your Google Calendar if you choose. 

I'll improve this Calendar program over time, but wanted to demonstrate JavaFX Script's ability to easily parse an XML stream over the Internet.  You may also want to take a look at the Compiled JavaFX Script Now Speaks JSON post which demonstrates parsing JSON streams over the Internet.  Here's a screenshot of today's example, followed by the program's code:

The Code Behind the User Interface

Obviously there are many improvements that I can make to this calendar, but here are the four source files that comprise this example in its current state:

CalendarJFX.fx

/*
 *  CalendarJFX.fx - 
 *  The main program for a compiled JavaFX calendar program
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;

Frame {
  var calModel = 
    CalendarModel {}
  title: "CalendarJFX"
  width: 600
  height: 600
  visible: true
  content:
    BorderPanel {
      top:
        BorderPanel {
          left:
            FlowPanel {
              content: [
                Button {
                  text: "<<"
                  action:
                    function():Void {
                      calModel.prevYear();
                    }
                },
                Button {
                  text: "<"
                  action:
                    function():Void {
                      calModel.prevMonth();
                    }
                }
              ]
            }
          center:
            FlowPanel {
              content:
                SimpleLabel {
                  text: bind "{calModel.selectedMonthStr} {calModel.selectedYearStr}"
                  font:
                    Font {
                      size: 24
                      style: FontStyle.BOLD
                    }
                }
            }
          right:
            FlowPanel {
              content: [
                Button {
                  text: ">"
                  action:
                    function():Void {
                      calModel.nextMonth();
                    }
                },
                Button {
                  text: ">>"
                  action:
                    function():Void {
                      calModel.nextYear();
                    }
                }
              ]
            }
          bottom:
            GridPanel {
              // TODO: Internationalize days of the week
              var days = ["Sun", "Mon", "Tue", 
                          "Wed", "Thu", "Fri", "Sat"]
              rows: 1
              columns: 7
              cells:
                for (day in days) {
                  SimpleLabel {
                    text: day
                    font:
                      Font {
                        size: 18
                        style: FontStyle.BOLD
                      }
                    horizontalAlignment: 
                      HorizontalAlignment.CENTER
                  }
                }
            }
        }
      center:
        GridPanel {
          vgap: 1
          hgap: 1
          rows: 6
          columns: 7
          cells:
            for (idx in [1..42]) {
              CalendarCell {
                calModel: calModel
                dayOfMonthStr: bind calModel.getDayInMonthStrForCell(idx as Integer);
                cellGregCal: bind calModel.getDateForCell(idx as Integer);
              }
            }
        }
    }
  onClose:
    function():Void {
      System.exit(0);
    }  
}

CalendarCell.fx

/*
 *  CalendarCell.fx - 
 *  The UI for an individual cell (day) in the calendar
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.GregorianCalendar;

public class CalendarCell extends CompositeWidget {
  public attribute calModel:CalendarModel;
  attribute dayInMonthFmt = new SimpleDateFormat("d");
  public attribute cellGregCal:GregorianCalendar;
  public attribute dayOfMonthStr:String;
 
  public function composeWidget():Widget {
    BorderPanel {
      top:
        FlowPanel {
          background: Color.LIGHTBLUE
          alignment: Alignment.TRAILING
          content: [
            SimpleLabel {
              text: bind dayOfMonthStr
              font:
                Font {
                  size: 12
                  style: FontStyle.BOLD
                }
            }
          ]
        }
      center:
        Box {
          orientation: Orientation.VERTICAL
          content: bind
            for (calEntry in calModel.calEntries
              where cellGregCal.get(Calendar.YEAR) == 
                    calEntry.startTime.get(Calendar.YEAR) and
                    cellGregCal.get(Calendar.MONTH) == 
                    calEntry.startTime.get(Calendar.MONTH) and
                    cellGregCal.get(Calendar.DAY_OF_MONTH) == 
                    calEntry.startTime.get(Calendar.DAY_OF_MONTH)) {
              SimpleLabel {
                text: calEntry.title
              }
            }
        }
    }
  }
}

CalendarModel.fx

/*
 *  CalendarModel.fx - 
 *  The model behind a compiled JavaFX calendar program
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */

import javafx.xml.*;
import java.text.SimpleDateFormat;
import java.lang.System;
import java.util.Calendar;
import java.util.GregorianCalendar;
 
class CalendarModel {
  attribute calendarFeedURI =
    "http://www.google.com/calendar/feeds/james.l.weaver%40gmail.com/public/full";
  attribute docBuilder =
    DocumentBuilder {
      namespaceAware:true
      validating:true
      ignoringComments:false
    }; 
  attribute document = 
    docBuilder.parseURI(calendarFeedURI);
  attribute calEntries:CalendarEntry[];
  attribute selectedGregCal:GregorianCalendar = new GregorianCalendar();
  attribute utilGregCal:GregorianCalendar = new GregorianCalendar();
  attribute selectedMonth:Integer;
  attribute selectedYear:Integer;
  attribute dayInMonthFmt = new SimpleDateFormat("d");
  attribute monthFmt = new SimpleDateFormat("MMMM");
  attribute yearFmt = new SimpleDateFormat("yyyy");
  attribute cellNumber:Integer;
  attribute selectedDayInMonthStr:String;
  attribute selectedMonthStr:String;
  attribute selectedYearStr:String;
  
  postinit {
    var calElements = document.getElementsByTagName("entry");
    calEntries = for (calElement in calElements)
      CalendarEntry {
        title: calElement.queryString("title")
        startTimeStr: calElement.queryString("when/@startTime")
        endTimeStr: calElement.queryString("when/@endTime")
        location: calElement.queryString("where/@valueString")
      };
    populateDateParts();
  }
  
  function prevMonth():Void {
    selectedGregCal.add(Calendar.MONTH, -1);
    selectedMonth = selectedGregCal.get(Calendar.MONTH);
    populateDateParts();
  }

  function nextMonth():Void {
    selectedGregCal.add(Calendar.MONTH, 1);
    selectedMonth = selectedGregCal.get(Calendar.MONTH);
    populateDateParts();
  }

  function prevYear():Void {
    selectedGregCal.add(Calendar.YEAR, -1);
    selectedYear = selectedGregCal.get(Calendar.YEAR);
    populateDateParts();
  }

  function nextYear():Void {
    selectedGregCal.add(Calendar.YEAR, 1);
    selectedYear = selectedGregCal.get(Calendar.YEAR);
    populateDateParts();
  }

  function populateDateParts():Void {
    var selDate = selectedGregCal.getTime();
    selectedDayInMonthStr = dayInMonthFmt.format(selDate);
    selectedMonthStr = monthFmt.format(selDate);
    selectedYearStr = yearFmt.format(selDate);
  }
  
  function getDateForCell(cellNumber:Integer):GregorianCalendar {
    utilGregCal.set(Calendar.YEAR, selectedYear); 
    utilGregCal.set(Calendar.MONTH, selectedMonth); 
    utilGregCal.set(Calendar.DAY_OF_MONTH, 1); 
    var firstDayOffset = utilGregCal.get(Calendar.DAY_OF_WEEK);
    utilGregCal.add(Calendar.DAY_OF_MONTH, firstDayOffset * -1 + cellNumber);
    return utilGregCal;
  }

  function getDayInMonthStrForCell(cellNumber:Integer):String {
    utilGregCal.set(Calendar.YEAR, selectedYear); 
    utilGregCal.set(Calendar.MONTH, selectedMonth); 
    utilGregCal.set(Calendar.DAY_OF_MONTH, 1); 
    var firstDayOffset = utilGregCal.get(Calendar.DAY_OF_WEEK);
    utilGregCal.add(Calendar.DAY_OF_MONTH, firstDayOffset * -1 + cellNumber);
    dayInMonthFmt.format(utilGregCal.getTime());
  }
}

CalendarEntry.fx

/*
 *  CalendarEntry.fx - 
 *  A calendar entry, which is part of the model.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */

import java.lang.System;
import java.text.SimpleDateFormat;
import java.util.Locale;
import java.util.Calendar;
import java.util.Date;
 
class CalendarEntry {
  private attribute sdf = new SimpleDateFormat
      ("yyyy-MM-dd'T'HH:mm:ss.SSSZ");
  attribute title:String;
  attribute startTime:Calendar;
  attribute endTime:Calendar;
  attribute startTimeStr:String on replace {
    //TODO: Accommodate all-day events
    var d:Date = sdf.parse("{startTimeStr.substring(0, 26)}{startTimeStr.substring(27)}");
    var cal:Calendar = Calendar.getInstance();
    cal.setTime(d);
    startTime = cal;
  };
  attribute endTimeStr:String on replace {
    var d:Date = sdf.parse("{endTimeStr.substring(0, 26)}{endTimeStr.substring(27)}");
    var cal:Calendar = Calendar.getInstance();
    cal.setTime(d);
    endTime = cal;
  };
  attribute location:String;
}

Enjoy, and as always, please post a comment if you have any questions.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

A Compiled JavaFX Script Playground - The Assortis Demo

Today I'd like to call your attention to a new compiled JavaFX Script demo, named JavaFX Assortis, from the JavaFX Script compiler team.  It's purpose is to enable you to experiment with and learn about various JavaFX Script UI features.  It is my understanding that Assortis means "sampler", or "assortment" in French, kind of like a box of chocolates (I'll spare you the Forrest Gump reference, by the way).  Anyway, here's a screenshot of JavaFX Assortis:

From the panes on the left side you can choose to work with Nodes (graphical objects like Circle), Widgets (UI objects like CheckBox), or come cool samples (like the animated Planetary System shown above).  You can then work with your selected objects in the right panes, altering the code to see the effects.

How can you get access to this demo, you ask?  Just download and build the OpenJFX Compiler, navigate to the demos/JavaFXAssortis directory, and run the following command from the command-line:

ant run

This will cause this demo to be built (if necessary) and executed.  It's a great way to get up to speed quickly on using some of the UI features of JavaFX Script.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Creating Compiled JavaFX Script Applets - Method Two

Important Note:  As of the JavaFX SDK Preview, this article is technically outdated.  Please see the Using the Java Deployment Toolkit with JavaFX Applets article for an updated example of creating and deploying JavaFX Applets.

In the previous post, I showed you one of the two ways that the JavaFX Script compiler team has provided for creating compiled JavaFX Script applets.  Today's example program demonstrates the second of these ways, by converting the Binding to a Function example into a compiled JavaFX Script applet.   Here's a screenshot of the JavaFX Script applet, running in Firefox 3:

This method of creating a compiled JavaFX Script applet is more "JavaFX-like" than the method that I showed you in the previous post.  Using this approach, we:

• Declaratively express the JavaFX applet using the Applet object as the top level (see BindToFunctionApplet2.fx below).
• Assign javafx.ui.Applet to the code attribute of the applet element in the HTML file (see BindToFunctionAppletPage2.html below).
• Specify an AppletClass parameter with the name of the class in which the applet is expressed (in this case BindToFunctionApplet2, see the HTML file below). 

Also, this approach requires that the applet be signed, so in this post I'm going to walk you through the process of creating a JAR file that contains the applet classes, and signing each of the JAR files.

Compare the following code with the Binding to a Function example, the major difference being the absence of the Frame object. It isn't required since the applet provides its own UI container.

/*
 *  BindToFunctionApplet2.fx - A compiled JavaFX program that demonstrates
 *                             a "JavaFX-like" way of creating compiled JavaFX applets.
 *                             It also demonstrates binding to a function.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a JavaFX Script example.
 */

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.Math;
import java.lang.System;

class CircleModel {
  attribute diameter:Number;
  
  function getArea():Number {
    Math.PI * Math.pow(diameter / 2, 2);
  }
}

Applet {
  var cModel = CircleModel {}
  content: 
    BorderPanel {
      center:
        Canvas {
          content: [
            Circle {
              cx: 240
              cy: 250
              radius: bind cModel.diameter * 2
              stroke: Color.PURPLE
              strokeWidth: 1
              fill: Color.MAGENTA
            },
            Text {
              font: 
                Font {
                  face: FontFace.SANSSERIF
                  style: FontStyle.BOLD
                  size: 24
                }
              x: 20
              y: 10
              stroke: Color.RED
              fill: Color.RED
              content: bind "Diameter: {cModel.diameter}"
            },
            Text {
              font: 
                Font {
                  face: FontFace.SANSSERIF
                  style: FontStyle.BOLD
                  size: 24
                }
              x: 240
              y: 10
              stroke: Color.RED
              fill: Color.RED
              content: bind "Area: {%3.2f cModel.getArea()}"
            }
          ]
        }
      bottom:
        Slider {
          min: 0
          max: 100
          border: 
            TitledBorder {
              title: "Diameter:"
            }
          value: bind cModel.diameter with inverse
          minorTickSpacing: 5
          majorTickSpacing: 10
          paintTicks: true
          paintLabels: true
          labels: [
            SliderLabel {
              value: 0
              label: 
                SimpleLabel {
                  text: "0"
                }
            },
            SliderLabel {
              value: 50
              label: 
                SimpleLabel {
                  text: "50"
                }
            },
            SliderLabel {
              value: 100
              label: 
                SimpleLabel {
                  text: "100"
                }
            }
          ]
        }
    } 
}

Supplying an HTML File to Run the Applet

Here is the HTML file (that I've named BindToFunctionAppletPage2.html) that runs the applet:

<html>
  <body>
    <applet code="javafx.ui.Applet" width=480 height=560
     archive="javafxrt.jar,Scenario.jar,BindToFunctionApplet2.jar">
        <param name="AppletClass" value="BindToFunctionApplet2">
    </applet>
  </body>
</html>

You'll need to put the JAR files (shown in the archive tag above) in the same directory as the HTML file. You can get these files from the compiler download in the dist/lib directory.  To compile this applet, I used the -target parameter so that it will run within browsers that have JRE 5 or later:

javafxc -target 1.5 BindToFunctionApplet2.fx

As I mentioned previously, you'll need to create a JAR file that contains the class files for this applet.  To do this, I used the following command at my operating system prompt:

jar cvf BindToFunctionApplet2.jar BindToFunctionApplet2*.class

You'll also need to sign the JAR file that contains the applet classes, as well as the javafxrt.jar and Scenario.jar files.  To do this, you'll need a signature key, which you can create with the following command:

keytool -genkey -alias jfx -dname "CN=John Doe, O=JFX Inc." (continued on next line)
  -validity 9999 -keystore jfx.keystore -keypass keyPassword -storepass storePassword

Use the following commands to sign the JAR files:

jarsigner -keystore jfx.keystore -verbose -keypass keyPassword (continued on next line) 
  -storepass storePassword BindToFunctionApplet2.jar jfx
jarsigner -keystore jfx.keystore -verbose -keypass keyPassword (continued on next line) 
  -storepass storePassword javafxrt.jar jfx
jarsigner -keystore jfx.keystore -verbose -keypass keyPassword (continued on next line) 
  -storepass storePassword Scenario.jar jfx

To execute this compiled JavaFX Script applet, either open the BindToFunctionAppletPage2.html file in a browser, or use appletviewer as shown below:

appletviewer BindToFunctionAppletPage2.html

Enjoy, and please post a comment if you have any questions!

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Creating Compiled JavaFX Applets - Method One (of Two)

Important Note:  As of the JavaFX SDK Preview, this article is technically outdated.  Please see the Using the Java Deployment Toolkit with JavaFX Applets article for an updated example of creating and deploying JavaFX Applets.

The JavaFX Script compiler team has provided two ways of creating compiled JavaFX Script applets.  Today's example program demonstrates one of these ways, by converting the Binding to a Function example into a compiled JavaFX Script applet.   Here's a screenshot of the JavaFX Script applet, running in Firefox 3:

This way of creating a JavaFX Applet is more "Java-like" in that it uses the approach of extending the javafx.ui.Applet class.  Notice that it overrides a couple of applet life-cycle functions to demonstrate that ability.  Compare the following code with the Binding to a Function  example, the major difference being the absence of the Frame object.  It isn't required since the applet provides its own UI container.

/*
 *  BindToFunctionApplet1.fx - A compiled JavaFX program that demonstrates
 *                             one way of creating compiled JavaFX applets.
 *                             It also demonstrates binding to a function.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a JavaFX Script example.
 */

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.Math;
import java.lang.System;

public class BindToFunctionApplet1 extends Applet {
  public function start(): Void {
    System.out.println("BindToFunctionApplet1.start()");
  }
  public function stop(): Void {
    System.out.println("BindToFunctionApplet1.stop()");
  }
}

class CircleModel {
  attribute diameter:Number;
  
  function getArea():Number {
    Math.PI * Math.pow(diameter / 2, 2);
  }
}

BorderPanel {
  var cModel = CircleModel {}
  background: Color.WHITE
  center:
    Canvas {
      content: [
        Circle {
          cx: 240
          cy: 250
          radius: bind cModel.diameter * 2
          stroke: Color.PURPLE
          strokeWidth: 1
          fill: Color.CYAN
        },
        Text {
          font: 
            Font {
              face: FontFace.SANSSERIF
              style: FontStyle.BOLD
              size: 24
            }
          x: 20
          y: 10
          stroke: Color.RED
          fill: Color.RED
          content: bind "Diameter: {cModel.diameter}"
        },
        Text {
          font: 
            Font {
              face: FontFace.SANSSERIF
              style: FontStyle.BOLD
              size: 24
            }
          x: 240
          y: 10
          stroke: Color.RED
          fill: Color.RED
          content: bind "Area: {%3.2f cModel.getArea()}"
        }
      ]
    }
  bottom:
    Slider {
      min: 0
      max: 100
      border: 
        TitledBorder {
          title: "Diameter:"
        }
      value: bind cModel.diameter with inverse
      minorTickSpacing: 5
      majorTickSpacing: 10
      paintTicks: true
      paintLabels: true
      labels: [
        SliderLabel {
          value: 0
          label: 
            SimpleLabel {
              text: "0"
            }
        },
        SliderLabel {
          value: 50
          label: 
            SimpleLabel {
              text: "50"
            }
        },
        SliderLabel {
          value: 100
          label: 
            SimpleLabel {
              text: "100"
            }
        }
      ]
    }
} 

Supplying an HTML File to Run the Applet

Here is the HTML file (that I've named BindToFunctionAppletPage1.html) that runs the applet:

<html>
  <body>
    <applet code="BindToFunctionApplet1" 
            width=480 height=560
     archive="javafxrt.jar, Scenario.jar">
    </applet>
  </body>
</html>

You'll need to put the JAR files (shown in the archive tag above) in the same directory as the HTML file. You can get these files from the compiler download in the dist/lib directory.  To compile this applet, I used the -target parameter so that it will run within browsers that have JRE 5 or later:

javafxc -target 1.5 BindToFunctionApplet1.fx

To execute this compiled JavaFX Script applet, either open the BindToFunctionAppletPage1.html file in a browser, or use appletviewer as shown below:

appletviewer BindToFunctionAppletPage1.html

Enjoy, and please post a comment if you have any questions!  The next post will cover the other way of creating compiled JavaFX Script applets.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Really This Time - Part Three of Creating Tetris in Compiled JavaFX Script

As I mentioned in the previous post (which I accidentally published prematurely), I've been speaking on JavaFX Script at Sun Tech Days in Sydney, Australia.  This was a great experience, as it was a well-run, informative conference.   Of course, Sydney is a beautiful city, filled with wonderful people.

Also, that post referenced the first two articles in this Tetris series, so please take a look at these articles to get up to speed on where we're at:

1) Let's Create a Tetris Game in Compiled JavaFX Script

2) Creating a Tetris Program (Part Two) in Compiled JavaFX Script

During the conference, I've made some progress on the Tetris application, and used it in one of my presentations.  Please refer to the screenshot shown above.

This version of the Tetris application is not 100% functional, nor is it bug-free, but it did suffice for teaching JavaFX Script concepts in the presentation.  One of my next posts will be a more fully functioning Tetris game (e.g. a layer of blocks will disappear when filled).  That post will show this game as a JavaFX Script applet, running inside a browser.  Take a look at the source code below, and you'll notice that I've changed quite a few things from the last version.  For example, the TetrisPlayingField custom component is bound to the model of all of squares in the playing field.

TetrisMain.fx:

/*
 *  TetrisMain.fx - The main program for a compiled JavaFX Script Tetris game 
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import tetris_model.*;

Frame {
  var canvas:Canvas
  width: 350
  height: 500
  title: "TetrisJFX"
  background: Color.LIGHTGREY
  content: 
    StackPanel {
      content: [
        Canvas {
          content:
            ImageView {
              image:
                Image {
                  url: "images/background.jpg"
                }
            }
        },
        BorderPanel {
          var model = 
            TetrisModel {}
          center:
            FlowPanel {
              alignment: Alignment.LEADING
              vgap: 20
              hgap: 20
              content: [
                Canvas {
                  content:
                    TetrisPlayingField {
                      model: model
                    }
                },
                Label {
                  text: bind "<html><font color=#B0E0E6 size=24>
                              {model.score}</font></html>"
                }
              ]
            } 
          bottom:
            FlowPanel {
              alignment: Alignment.LEADING
              content: [
                Button {
                  text: "Play"
                  foreground: Color.DARKBLUE
                  action:
                    function() {
                      model.t.start();
                    }
                },
                Button {
                  text: "Rotate"
                  foreground: Color.DARKBLUE
                  action:
                    function() {
                      model.rotate90();
                    }
                },
                Button {
                  text: "Left"
                  foreground: Color.DARKBLUE
                  action:
                    function() {
                      model.moveLeft();
                    }
                },
                Button {
                  text: "Right"
                  foreground: Color.DARKBLUE
                  action:
                    function() {
                      model.moveRight();
                    }
                }
              ]
            }
        }
      ]
    }
  visible: true
  onClose:
    function():Void {
      System.exit(0);
    }
}

TetrisPlayingField.fx:

/*
 *  TetrisPlayingField.fx -
 *  A custom graphical component that is the UI for the
 *  playing field.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import tetris_model.*;

class TetrisPlayingField extends CompositeNode {
  private static attribute squareOutlineColor = Color.BLACK;
  private static attribute squareOutlineWidth = 1;
  public attribute model:TetrisModel;
  public function composeNode():Node {
    Group {
      content: bind [
        Rect {
          x: 0
          y: 0
          width: model.NUM_COLS * model.SQUARE_SIZE
          height: model.NUM_ROWS * model.SQUARE_SIZE
          strokeWidth: 1
          stroke: Color.BLACK
          fill: Color.BLUE
          opacity: .5
        },
        for (cell in model.fieldCells
               where cell <> TetrisShapeType.NONE) {
          Rect {
            var yPos:Integer = indexof cell / model.NUM_COLS
            x: (indexof cell % model.NUM_COLS).intValue() * model.SQUARE_SIZE
            y: yPos * model.SQUARE_SIZE
            width: model.SQUARE_SIZE
            height: model.SQUARE_SIZE
            fill: cell.squareColor
            stroke: squareOutlineColor
            strokeWidth: squareOutlineWidth
          }
        }
      ]
    }
  }
}

TetrisModel.fx:

/*
 *  TetrisModel.fx - The model behind the Tetris UI
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_model;

import javafx.ui.animation.*;
import java.lang.System;
import com.sun.javafx.runtime.PointerFactory;
import java.lang.Double;

public class TetrisModel {
  /** Size of each tetromino in pixels */
  public static attribute SQUARE_SIZE = 20;
  
  /** Number of rows in the playing field */
  public static attribute NUM_ROWS = 20;
  
  /** Number of columns in the playing field */
  public static attribute NUM_COLS = 10;
  
  private attribute stopDropping:Boolean;

  /** 
   * Sequence of objects that represent the
   * type of shapes (including no shape) in each playing field cell 
   */
  public attribute fieldCells:TetrisShapeType[] =
    for (i in [1..(NUM_ROWS * NUM_COLS)]) {
      TetrisShapeType.NONE;
    };
      
  
  /**
   * The active tetromino shape type.
   */
  public attribute activeShapeType:TetrisShapeType;
  
  public attribute score:Integer = 10000;
  
  /**
   * This value is incremented via the KeyFrame animation mechanism,
   * and represents the row in which the pivotal block is currently residing.
   */
  public attribute a:Integer on replace (oldVal) {
    if (a == 0) {
      stopDropping = false;
    }
    if (not stopDropping) {
      // Update score. TODO: Implement real scoring later
      score += 100; 
  
      // Remove the tetromino from the playing field
      updateFieldCells(tetrominoHorzPos, oldVal, tetrominoAngle, true);

      if (canMoveDown(tetrominoHorzPos, a, tetrominoAngle)) {    
        // Was able to move down, so place the tetromino accordingly
        updateFieldCells(tetrominoHorzPos, a, tetrominoAngle, false);
      }
      else {
        System.out.println("Can't move down!!!!!!!!");
        updateFieldCells(tetrominoHorzPos, oldVal, tetrominoAngle, false);
        stopDropping = true;
      }
    }
    
    if (a >= stopValue) {
      activeShapeType = TetrisShapeType.randomShapeType();
      tetrominoAngle = 0;
    }
  };
  private attribute pf = PointerFactory {};
  private attribute bpa = bind pf.make(a);
  private attribute pa = bpa.unwrap();
  private attribute interpolate = NumberValue.LINEAR;
  private attribute stopValue = NUM_ROWS + 2;
  public attribute t = 
    Timeline {
      keyFrames: [
        KeyFrame {
          keyTime: 0s;
          keyValues:
            NumberValue {
              target: pa;
              value: 0;
              interpolate: bind interpolate
            }
        },
        KeyFrame {
          keyTime: 10s;
          keyValues:
            NumberValue {
              target: pa;
              value: bind stopValue
              interpolate: bind interpolate
            }
        }
      ]
      repeatCount: Double.POSITIVE_INFINITY
    };
  public attribute tetrominoAngle:Number;
  public attribute tetrominoHorzPos:Number = (NUM_COLS / 2) as Integer;

  public function rotate90():Void {
    updateFieldCells(tetrominoHorzPos, a, tetrominoAngle, true);
    tetrominoAngle = computeNewAngle(tetrominoAngle, 90);
    updateFieldCells(tetrominoHorzPos, a, tetrominoAngle, false);
  }

  public function computeNewAngle(originalRotationAngle:Integer, degreesToRotate):Integer {
    ((originalRotationAngle + degreesToRotate) % (activeShapeType.rotateStates * 90)) as Integer;
  }

  public function moveLeft():Void {
    if (tetrominoHorzPos > 0) {
      updateFieldCells(tetrominoHorzPos, a, tetrominoAngle, true);
      tetrominoHorzPos--;
      updateFieldCells(tetrominoHorzPos, a, tetrominoAngle, false);
    }
  }
  
  public function moveRight():Void {
    //TODO: Need to allow pieces to bump up against the
    //      right side.  For now, hardcode 3.
    
    if (tetrominoHorzPos < NUM_COLS - 3) {
      updateFieldCells(tetrominoHorzPos, a, tetrominoAngle, true);
      tetrominoHorzPos++;
      updateFieldCells(tetrominoHorzPos, a, tetrominoAngle, false);
    }
  }
  
  /**
   * Keeps the fieldCells sequence (that represents the
   * cells in the playing field) updated to reflect reality.
   * pass in the row and column that the pivotal block was
   * located, as well as the former angle of the tetromino.
   * The new row, column, angle, as well as the shape type, is
   * held in the model, so don't have to be passed in.  
   */
  public function updateFieldCells(oldX:Integer, oldY:Integer, oldAngle:Integer, remove:Boolean):Void {
    // Take the shape off of its old location on the playing field
    for (oldCell in TetrisShapeType.squarePositionsForRotatedShape(activeShapeType, 
                                                                   oldAngle)) {
      fieldCells[(oldY + oldCell.y) * NUM_COLS + oldX + oldCell.x] = 
        if (remove) TetrisShapeType.NONE else activeShapeType;
    }
  }

  public function canMoveDown(oldX:Integer, oldY:Integer, oldAngle:Integer):Boolean {
    var retVal = true;
    for (oldCell in TetrisShapeType.squarePositionsForRotatedShape(activeShapeType, 
                                                                   oldAngle)) {
      // First check to see if the tetromino is at the bottom of
      // the playing field
      if ((oldY + oldCell.y) * NUM_COLS + oldX + oldCell.x > sizeof fieldCells) {
        retVal = false;
      }
      // Now check to see if another tetromino is preventing it from moving down
      else if (fieldCells[(oldY + oldCell.y) * NUM_COLS + oldX + oldCell.x] <>
                TetrisShapeType.NONE) {
        System.out.println("{(oldY + oldCell.y) * NUM_COLS + oldX + oldCell.x},
                           {fieldCells[(oldY + oldCell.y) * NUM_COLS + 
                                        oldX + oldCell.x].name}" );
        retVal = false;
      }
    }
    return retVal;
  }
}

TetrisShapeType.fx

/*
 *  TetrisShapeType.fx - A Tetris shape type, which are
 *                       I, J, L, O, S, T, and Z
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_model;

import javafx.ui.*;
import java.awt.Point;
import java.lang.Math;
import java.lang.System;

/**
 * This class contains the model information for each type
 * of tetromino (Tetris piece).
 */
public class TetrisShapeType {
  public attribute id: Integer;
  public attribute name: String;
  
  /** 
   * A sequence containing positions of each square in a 
   * tetromino type.  The first element in the sequence is
   * the one around which the tetromino will rotate.
   * Note that the "O" tetromino type doesn't rotate.
   */
  public attribute squarePositions:Point[];
  
  //public attribute allowRotate:Boolean = true;
  
  /** 
   * Valid values are 1 (for "O" shape, 2 (for "S", "Z", and "I" shapes)
   * and 4 (for "L", "J", and "T" shapes)
   */
  public attribute rotateStates:Integer =  4;
  
  public attribute squareColor:Color;
 
  /** The "NONE" shape (represents the absence of a shape) */
  public static attribute NONE = 
    TetrisShapeType {
      id: 0 
      name: "."
      squarePositions: [
        new Point(0, 0),
        new Point(0, 0),
        new Point(0, 0),
        new Point(0, 0)
      ]
      squareColor: Color.SILVER
    };

  /** The "I" shape (four squares in a straight line) */
  public static attribute I = 
    TetrisShapeType {
      id: 1 
      name: "I"
      squarePositions: [
        new Point(0, 0),
        new Point(-1, 0),
        new Point(1, 0),
        new Point(2, 0)
      ]
      squareColor: Color.SILVER
      rotateStates: 2
    };

  /** The "T" shape (looks like a stout "T") */
  public static attribute T = 
    TetrisShapeType {
      id: 2 
      name: "T"
      squarePositions: [
        new Point(0, 0),
        new Point(-1, 0),
        new Point(1, 0),
        new Point(0, 1)
      ]
      squareColor: Color.HOTPINK
    };

  /** The "L" shape (looks like an "L") */
  public static attribute L = 
    TetrisShapeType {
      id: 3
      name: "L"
      squarePositions: [
        new Point(0, 0),
        new Point(-1, 0),
        new Point(1, 0),
        new Point(-1, 1)
      ]
      squareColor: Color.LIGHTBLUE
    };

  /** The "J" shape (looks sort of like a "J", but
   *  more like a backwards "L") */
  public static attribute J = 
    TetrisShapeType {
      id: 4
      name: "J"
      squarePositions: [
        new Point(0, 0),
        new Point(-1, 0),
        new Point(1, 0),
        new Point(1, 1)
      ]
      squareColor: Color.YELLOW 
    };

  /** The "S" shape (looks sort of like an "S") */
  public static attribute S = 
    TetrisShapeType {
      id: 5 
      name: "S"
      squarePositions: [
        new Point(0, 0),
        new Point(1, 0),
        new Point(-1, 1),
        new Point(0, 1)
      ]
      squareColor: Color.LIGHTGREEN
      rotateStates: 2
    };

  public static attribute Z = 
    TetrisShapeType {
      id: 6
      name: "Z"
      squarePositions: [
        new Point(0, 0),
        new Point(-1, 0),
        new Point(0, 1),
        new Point(1, 1)
      ]
      squareColor: Color.ORANGE
      rotateStates: 2
    };

  /** The "O" shape (looks sort of like an "O", but
   *  more like a square) */
  public static attribute O = 
    TetrisShapeType {
      id: 7
      name: "O"
      squarePositions: [
        new Point(0, 0),
        new Point(0, 1),
        new Point(1, 0),
        new Point(1, 1)
      ]
      squareColor: Color.RED
      rotateStates: 1
    };
    
  /** 
   * A sequence of the shape types for use in generating a
   * random shape type.
   */
  private static attribute allShapeTypes:TetrisShapeType[];
  
  /**
   * A function that returns a random TetrisShapeType
   */
  public static function randomShapeType():TetrisShapeType {
    if (sizeof allShapeTypes <= 0) {
      insert I into allShapeTypes;
      insert T into allShapeTypes;
      insert L into allShapeTypes;
      insert J into allShapeTypes;
      insert S into allShapeTypes;
      insert Z into allShapeTypes;
      insert O into allShapeTypes;
    }
    allShapeTypes[(Math.random() * sizeof allShapeTypes) as Integer] 
  }

  /**
   * A function that returns the squarePositions of a given TetrisShapeType
   * at a given angle of rotation.  This could have used trig functions,
   * but the cases are simple enough to use if/else expressions.
   */
  public static function 
      squarePositionsForRotatedShape(shapeType:TetrisShapeType, rotAngle:Integer):Point[] {
    for (position in shapeType.squarePositions) {
      var newX = position.x;
      var newY = position.y;
      if (rotAngle == 90) {
        newX = if (position.y == 0) 0 else position.y * -1;
        newY = if (position.x == 0) 0 else position.x;
      }
      else if (rotAngle == 180) {
        newX = position.x * -1;
        newY = position.y * -1;
      }
      else if (rotAngle == 270) {
        newX = if (position.y == 0) 0 else position.y;
        newY = if (position.x == 0) 0 else position.x * -1;
      }
      new Point(newX, newY);
    }
  }
}

You may have noticed that factored out the TetrisShape.fx class by the way.  There are many improvements to be made, but we'll get there together!  As always, please let me know if you have questions.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Part Three of Creating a Tetris Program in Compiled JavaFX Script

Doh!  I accidentally hit the Save button with the Publish option selected, before this post was ready (again!!!).  Article coming soon, and sorry for the inconvenience.  Meanwhile, since it is the third part of a series on building a Tetris game in compiled JavaFX Script, you may want to check out the first two parts:

1) Let's Create a Tetris Game in Compiled JavaFX Script

2) Creating a Tetris Program (Part Two) in Compiled JavaFX Script

By the way, I'll be speaking on JavaFX Script at Sun Tech Days in Sydney, Australia, on March 4 - 6, 2008.  If you're in the area, please check it out and say hi!

Regards,

Jim Weaver

Creating a Tetris Program (Part Two) in Compiled JavaFX Script

This is the second part of a mini-series in which we're creating a Tetris game in compiled JavaFX Script together.  If you haven't already, please take a look at the Let's Create a Tetris Game in Compiled JavaFX Script post to get up to speed.

Here's a screen shot of the executing program in its current state:

As you can see, I've made a few changes to the UI, making it look a little more like a Tetris game.  I also refactored some of the code, introduced a new class to represent the playing field, moved the TetrisShapeType class to the tetris_model package, and added some functionality.

Compile and run the code that you see below, and click the Play button when the screen shown above appears.  This causes one of the seven tetromino types to begin falling down the playing field.  Clicking the Rotate button rotates the tetromino clockwise, clicking the Left button moves it to left, and clicking the Right button moves it to the right.  When the tetromino arrives at the bottom, it disappears and a new randomly chosen tetromino shape begins falling.  To exit the program, close the window.

In its current state, the program doesn't have all of the functionality required in a Tetris game (for example, the tetrominoes don't stack up).  We'll get there, and hopefully we'll all learn more about developing JavaFX Script applications in the process.  Here's the current source code:

The main program, named TetrisMain.fx, that declaratively expresses the UI and starts things up:

/*
 *  TetrisMain.fx - The main program for a compiled JavaFX Script Tetris game 
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import tetris_model.*;

Frame {
  var model = 
    TetrisModel {
      
    }
  var canvas:Canvas
  width: 480
  height: 500
  title: "TetrisJFX"
  background: Color.LIGHTGREY
  content: 
    BorderPanel {
      center:
        FlowPanel {
          content: [
            Canvas {
              content:
                TetrisPlayingField {
                  model: model
                }
            }
          ]
        } 
      bottom:
        FlowPanel {
          content: [
            Button {
              text: "Play"
              action:
                function() {
                  model.t.start();
                }
            },
            Button {
              text: "Rotate"
              action:
                function() {
                  model.rotate90();
                }
            },
            Button {
              text: "Left"
              action:
                function() {
                  model.moveLeft();
                }
            },
            Button {
              text: "Right"
              action:
                function() {
                  model.moveRight();
                }
            }
          ]
        }
    }
  visible: true
  onClose:
    function():Void {
      System.exit(0);
    }
}

The TetrisShape custom graphical component.  By the way, I refactored the big ugly if/else statement from this class:

/*
 *  TetrisShape.fx - A Tetris piece, configurable to the
 *                   different shape types.  They are:
 *                   I, J, L, O, S, T, and Z
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.awt.Point;
import java.lang.System;
import tetris_model.*;

class TetrisShape extends CompositeNode {
  private static attribute squareOutlineColor = Color.BLACK;
  private static attribute squareOutlineWidth = 1;
  private attribute squareColor;

  public attribute model:TetrisModel;
  
  public attribute shapeType:TetrisShapeType on replace {
    squareLocs =
      for (block in shapeType.squarePositions) {
          new Point(block.x * model.SQUARE_SIZE, 
                    block.y * model.SQUARE_SIZE)
      };
      squareColor = shapeType.squareColor;
  };

  private attribute squareLocs:Point[];
  
  public function composeNode():Node {
    Group {
      transform: bind [
        Translate.translate(model.SQUARE_SIZE * model.tetrominoHorzPos, 
                            (model.a / model.SQUARE_SIZE).intValue() * model.SQUARE_SIZE),
        Rotate.rotate(model.tetrominoAngle, 
                      squareLocs[0].x + model.SQUARE_SIZE / 2,
                      squareLocs[0].y + model.SQUARE_SIZE / 2)
      ]
      content: bind [
        for (squareLoc in squareLocs) {
          Rect {
            x: squareLoc.x
            y: squareLoc.y
            width: bind model.SQUARE_SIZE
            height: bind model.SQUARE_SIZE
            fill: bind squareColor
            stroke: squareOutlineColor
            strokeWidth: squareOutlineWidth
          }
        }
      ]
    };
  }
}

The newly introduced TetrisPlayingField custom graphical component that manages the area in which the tetrominoes fall:

/*
 *  TetrisPlayingField.fx -
 *  A custom graphical component that is the UI for the
 *  playing field.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import tetris_model.*;

class TetrisPlayingField extends CompositeNode {
  public attribute model:TetrisModel;

  public function composeNode():Node {
      Group {
        content: [
          Rect {
            x: 0
            y: 0
            width: model.NUM_COLS * model.SQUARE_SIZE
            height: model.NUM_ROWS * model.SQUARE_SIZE
            strokeWidth: 1
            stroke: Color.BLACK
            fill: Color.WHITE
          },
          TetrisShape {
            model: model
            shapeType: bind model.activeShapeType
          }
        ]
      }
  }
}

The TetrisShapeType class defines the tetromino types, and I decided that it is really part of the model, so I moved it to the tetris_model package:

/*
 *  TetrisShapeType.fx - A Tetris shape type, which are
 *                       I, J, L, O, S, T, and Z
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_model;

import javafx.ui.*;
import java.awt.Point;
import java.lang.Math;

/**
 * This class contains the model information for each type
 * of tetromino (Tetris piece).
 */
public class TetrisShapeType {
  public attribute id: Integer;
  public attribute name: String;
  
  /** 
   * A sequence containing positions of each square in a 
   * tetromino type.  The first element in the sequence is
   * the one around which the tetromino will rotate.
   * Note that the "O" tetromino type doesn't rotate.
   */
  public attribute squarePositions:Point[];
  
  public attribute allowRotate:Boolean = true;
  
  public attribute squareColor:Color;
 
  /** The "I" shape (four squares in a straight line) */
  public static attribute I = 
    TetrisShapeType {
      id: 1 
      name: "I"
      squarePositions: [
        new Point(1, 0),
        new Point(0, 0),
        new Point(2, 0),
        new Point(3, 0)
      ]
      squareColor: Color.RED
    };

  /** The "T" shape (looks like a stout "T") */
  public static attribute T = 
    TetrisShapeType {
      id: 2 
      name: "T"
      squarePositions: [
        new Point(1, 0),
        new Point(0, 0),
        new Point(2, 0),
        new Point(1, 1)
      ]
      squareColor: Color.GREEN
    };

  /** The "L" shape (looks like an "L") */
  public static attribute L = 
    TetrisShapeType {
      id: 3
      name: "L"
      squarePositions: [
        new Point(1, 0),
        new Point(0, 0),
        new Point(2, 0),
        new Point(0, 1)
      ]
      squareColor: Color.MAGENTA
    };

  /** The "J" shape (looks sort of like a "J", but
   *  more like a backwards "L") */
  public static attribute J = 
    TetrisShapeType {
      id: 4
      name: "J"
      squarePositions: [
        new Point(1, 1),
        new Point(1, 0),
        new Point(1, 2),
        new Point(0, 2)
      ]
      squareColor: Color.YELLOW 
    };

  /** The "S" shape (looks sort of like an "S") */
  public static attribute S = 
    TetrisShapeType {
      id: 5 
      name: "S"
      squarePositions: [
        new Point(1, 0),
        new Point(2, 0),
        new Point(0, 1),
        new Point(1, 1)
      ]
      squareColor: Color.CYAN
    };

  /** The "Z" shape (looks sort of like an "Z") */
  public static attribute Z = 
    TetrisShapeType {
      id: 6
      name: "Z"
      squarePositions: [
        new Point(1, 0),
        new Point(0, 0),
        new Point(1, 1),
        new Point(2, 1)
      ]
      squareColor: Color.ORANGE
    };

  /** The "O" shape (looks sort of like an "O", but
   *  more like a square) */
  public static attribute O = 
    TetrisShapeType {
      id: 7
      name: "O"
      squarePositions: [
        new Point(0, 0),
        new Point(0, 1),
        new Point(1, 0),
        new Point(1, 1)
      ]
      squareColor: Color.BLUE //TODO:Research official color
      allowRotate: false
    };
    
  /** 
   * A sequence of the shape types for use in generating a
   * random shape type.
   */
  private static attribute allShapeTypes:TetrisShapeType[];
  
  /**
   * A function that returns a random TetrisShapeType
   */
  public static function randomShapeType():TetrisShapeType {
    if (sizeof allShapeTypes <= 0) {
      insert I into allShapeTypes;
      insert T into allShapeTypes;
      insert L into allShapeTypes;
      insert J into allShapeTypes;
      insert S into allShapeTypes;
      insert Z into allShapeTypes;
      insert O into allShapeTypes;
    }
    allShapeTypes[(Math.random() * sizeof allShapeTypes) as Integer] 
  }
}

And finally, here's the TetrisModel class.  I added several attributes to this class, mainly to serve as model variables for the new TetrisPlayingField class.

/*
 *  TetrisModel.fx - The model behind the Tetris UI
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_model;

import javafx.ui.animation.*;
import java.lang.System;
import com.sun.javafx.runtime.PointerFactory;
import java.lang.Double;

public class TetrisModel {
  /** Size of each tetromino in pixels */
  public static attribute SQUARE_SIZE = 20;
  
  /** Number of rows in the playing field */
  public static attribute NUM_ROWS = 20;
  
  /** Number of columns in the playing field */
  public static attribute NUM_COLS = 10;

  /** 
   * Sequence of objects that represent the
   * type of shapes in each playing field cell 
   */
  public attribute fieldCells:TetrisShapeType[];
  
  /**
   * The active tetromino shape type.
   */
  public attribute activeShapeType:TetrisShapeType;
  
  public attribute running:Boolean = true;
  public attribute a:Integer on replace {
    if (a >= stopValue) {
      activeShapeType = TetrisShapeType.randomShapeType();
      tetrominoAngle = 0;
    }
  };
  private attribute pf = PointerFactory {};
  private attribute bpa = bind pf.make(a);
  private attribute pa = bpa.unwrap();
  private attribute interpolate = NumberValue.LINEAR;
  private attribute stopValue = 370;
  public attribute t = 
    Timeline {
      keyFrames: [
        KeyFrame {
          keyTime: 0s;
          keyValues:
            NumberValue {
              target: pa;
              value: 0;
              interpolate: bind interpolate
            }
        },
        KeyFrame {
          keyTime: 10s;
          keyValues:
            NumberValue {
              target: pa;
              value: stopValue
              interpolate: bind interpolate
            }
        }
      ]
      repeatCount: Double.POSITIVE_INFINITY
    };
  public attribute tetrominoAngle:Number;
  public attribute tetrominoHorzPos:Number = (NUM_COLS / 2) as Integer;

  public function rotate90():Void {
    if (activeShapeType.allowRotate) {
      (tetrominoAngle += 90) % 360;
    }
  }

  public function moveLeft():Void {
    if (tetrominoHorzPos > 0) {
      tetrominoHorzPos--;
    }
  }
  
  public function moveRight():Void {
    //TODO: Need to allow pieces to bump up against the
    //      right side.  For now, hardcode 3.
    if (tetrominoHorzPos < NUM_COLS - 3) {
      tetrominoHorzPos++;
    }
  }
}

Some Remaining Functionality

There is still much to do in order to make this a fully functioning Tetris game.  For example, the model needs to:

• Keep track of which cells in the playing field are empty, and which hold tetromino debris.
• Know when a tetromino has landed on the bottom (or on tetromino debris), so that it can stop falling.
• Delete the tetromino debris from a filled up row, and allow the tetromino debris lying above to collapse into the vacated row.
• Use the rotation state of the currently falling tetromino to allow it to accurately bump up against the left and right sides.

Also, functionality needs to be added that displays the score, shows the next tetromino shape to fall, etc.  Have fun running, and examining, this code!

A JavaFXpert BootCamp Question:

I'm considering offering the JavaFXpert BootCamp directly after JavaOne (all day Saturday, Sunday afternoon, and all day Monday, in the San Jose/San Fransisco area).  The dates would be May 10,11 and 12.  The plan would be to allow up to 50 students in the BootCamp, which would allow me to reduce the price for that particular class.  For details on the content of the JavaFXpert BootCamp, please see http://bootcamp.JavaFXpert.com
Please send me an email to jim.weaver at lat-inc.com if you'd consider attending this, so I can decide whether to offer this post-JavaOne edition of the BootCamp.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Let's Create a Tetris Game in Compiled JavaFX Script

I thought it would be fun to spend a few posts creating a Tetris game in compiled JavaFX Script together.  Today I made a rough start on it, and if you promise not to laugh, I'll show you the humble beginnings.  Here's a screenshot of its current status:

In Tetris, there are several types of tetrominoes, each having a letter that it resembles.  The four buttons on the left represent four of these shapes.  When you press one of these buttons, the corresponding tetromino appears at the top and begins moving down the screen.  When you click the Rotate button, the tetromino rotates to the right, and the Left/Right buttons move the tetromino left and right, respectively.

The code is contained in four FX program files, and needs some refactoring already. :-)  Before showing you the code in its current state, I'd like to point out a couple of helpful things: 

• As explained in the Spinning Wheel post, the Key Frame animation syntax that you see here will become much less verbose as the JavaFX Script compiler team continues to address animation. 
• JavaFX Script programs should always be designed with the UI binding to a model.  In this program, the model is represented in one class named TetrisModel, located in the FX file of the same name.  You may find it helpful to take a look the Creating a Compiled JavaFX Script Program with Multiple FX Source Files post to see a Hello World style program that has more than one FX file.  Please notice the package statments in this Tetris program, as that influences where you need to put the source files and how you build them.
• You can obtain the JavaFX Compiler by following the instructions in the Obtaining the OpenJFX Script Compiler post.

The Source Code (so far)

Here's the main program, named TetrisMain.fx, that declaratively expresses the UI, and starts things up:

/*
 *  TetrisMain.fx - The main program for a compiled JavaFX Script Tetris game 
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import tetris_model.*;

Frame {
  var model = 
    TetrisModel {
      
    }
  var canvas:Canvas
  width: 480
  height: 500
  title: "TetrisJFX"
  background: Color.WHITE
  content: 
    BorderPanel {
      center:
        canvas = Canvas {} 
      bottom:
        FlowPanel {
          content: [
            Button {
              text: "I"
              action:
                function() {
                  canvas.content = [];
                  insert 
                  TetrisShape {
                    model: model
                    shapeType: TetrisShapeType.I
                  } 
                  into canvas.content;  
                  model.t.start();
                }
            },
            Button {
              text: "T"
              action:
                function() {
                  canvas.content = [];
                  insert 
                  TetrisShape {
                    model: model
                    shapeType: TetrisShapeType.T
                  } 
                  into canvas.content;  
                  model.t.start();
                }
            },
            Button {
              text: "L"
              action:
                function() {
                  canvas.content = [];
                  insert 
                  TetrisShape {
                    model: model
                    shapeType: TetrisShapeType.L
                  } 
                  into canvas.content;  
                  model.t.start();
                }
            },
            Button {
              text: "S"
              action:
                function() {
                  canvas.content = [];
                  insert 
                  TetrisShape {
                    model: model
                    shapeType: TetrisShapeType.S
                  } 
                  into canvas.content;  
                  model.t.start();
                }
            },
            Button {
              text: "Rotate"
              action:
                function() {
                  model.rotate90();
                }
            },
            Button {
              text: "Left"
              action:
                function() {
                  model.moveLeft();
                }
            },
            Button {
              text: "Right"
              action:
                function() {
                  model.moveRight();
                }
            }
          ]
        }
    }
  visible: true
  onClose:
    function():Void {
      System.exit(0);
    }
}

I made the TetrisShape class a custom graphical component.  Therefore, it is a subclass of the CompositeNode class, and overrides the composeNode function:

/*
 *  TetrisShape.fx - A Tetris piece, configurable to the
 *                   different shape types.  They are:
 *                   I, J, L, O, S, T, and Z
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.awt.Point;
import java.lang.System;
import tetris_model.*;

class TetrisShape extends CompositeNode {
  private static attribute squareOutlineColor = Color.BLACK;
  private static attribute squareOutlineWidth = 2;
  private attribute squareColor;

  public attribute model:TetrisModel;
  public attribute shapeType:TetrisShapeType on replace {
    if (shapeType == TetrisShapeType.I) {
      squareLocs = [];
      insert new Point(0, model.SQUARE_SIZE * 1) into squareLocs;
      insert new Point(0, 0) into squareLocs;
      insert new Point(0, model.SQUARE_SIZE * 2) into squareLocs;
      insert new Point(0, model.SQUARE_SIZE * 3) into squareLocs;
      squareColor = Color.RED;
    }
    else if (shapeType == TetrisShapeType.T) {
      squareLocs = [];
      insert new Point(model.SQUARE_SIZE * 1, 0) into squareLocs;
      insert new Point(0, 0) into squareLocs;
      insert new Point(model.SQUARE_SIZE * 2, 0) into squareLocs;
      insert new Point(model.SQUARE_SIZE * 1, model.SQUARE_SIZE * 1) into squareLocs;
      squareColor = Color.GREEN;
    }
    else if (shapeType == TetrisShapeType.L) {
      squareLocs = [];
      insert new Point(0, model.SQUARE_SIZE * 1) into squareLocs;
      insert new Point(0, 0) into squareLocs;
      insert new Point(0, model.SQUARE_SIZE * 2) into squareLocs;
      insert new Point(model.SQUARE_SIZE * 1, model.SQUARE_SIZE * 2) into squareLocs;
      squareColor = Color.MAGENTA;
    }
    else if (shapeType == TetrisShapeType.S) {
      squareLocs = [];
      insert new Point(model.SQUARE_SIZE * 1, 0) into squareLocs;
      insert new Point(model.SQUARE_SIZE * 2, 0) into squareLocs;
      insert new Point(0, model.SQUARE_SIZE * 1) into squareLocs;
      insert new Point(model.SQUARE_SIZE * 1, model.SQUARE_SIZE * 1) into squareLocs;
      squareColor = Color.CYAN;
    }
  }
  
  private attribute squareLocs:Point[];
  
  public function composeNode():Node {
    return
      Group {
        transform: bind [
          Translate.translate(model.SQUARE_SIZE * model.tetrominoHorzPos, 
                              (model.a / model.SQUARE_SIZE).intValue() * model.SQUARE_SIZE),
          Rotate.rotate(model.tetrominoAngle, 
                        squareLocs[0].x + model.SQUARE_SIZE / 2,
                        squareLocs[0].y + model.SQUARE_SIZE / 2)
        ]
        content: [
          for (squareLoc in squareLocs) {
            Rect {
              x: bind squareLoc.x
              y: bind squareLoc.y
              width: bind model.SQUARE_SIZE
              height: bind model.SQUARE_SIZE
              fill: bind squareColor
              stroke: squareOutlineColor
              strokeWidth: squareOutlineWidth
            }
          }
        ]
      };
  }
}

The TetrisShapeType class defines the tetromino types:

/*
 *  TetrisShapeType.fx - A Tetris shape type, which are
 *                       I, J, L, O, S, T, and Z
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_ui;

import javafx.ui.*;

class TetrisShapeType {
  public attribute id: Integer;
  public attribute name: String;
 
  public static attribute O = 
    TetrisShapeType {id: 0, name: "O"};
  public static attribute I = 
    TetrisShapeType {id: 1, name: "I"};
  public static attribute T = 
    TetrisShapeType {id: 2, name: "T"};
  public static attribute L = 
    TetrisShapeType {id: 3, name: "L"};
  public static attribute S = 
    TetrisShapeType {id: 4, name: "S"};
}

And finally, here's a model class, named TetrisModel:

/*
 *  TetrisModel.fx - The model behind the Tetris UI
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 *  
 */
package tetris_model;

import javafx.ui.animation.*;
import java.lang.System;
import com.sun.javafx.runtime.PointerFactory;

public class TetrisModel {
  public static attribute SQUARE_SIZE = 20;
  
  public attribute a:Integer;
  private attribute pf = PointerFactory {};
  private attribute bpa = bind pf.make(a);
  private attribute pa = bpa.unwrap();
  private attribute interpolate = NumberValue.LINEAR;
  public attribute t = 
    Timeline {
      keyFrames: [
        KeyFrame {
          keyTime: 0s;
          keyValues:
            NumberValue {
              target: pa;
              value: 0;
              interpolate: bind interpolate
            }
        },
        KeyFrame {
          keyTime: 20s;
          keyValues:
            NumberValue {
              target: pa;
              value: 370
              interpolate: bind interpolate
            }
        }
      ]
    };
  public attribute tetrominoAngle:Number;
  public attribute tetrominoHorzPos:Number = 10;
  
  public function rotate90():Void {
    (tetrominoAngle += 90) % 360;
  }

  public function moveLeft():Void {
    if (tetrominoHorzPos > 0) {
      tetrominoHorzPos--;
    }
  }
  
  public function moveRight():Void {
    if (tetrominoHorzPos < 20) { //TODO:Replace 10 with a calculated number
      tetrominoHorzPos++;
    }
  }

}

Compile and execute this example, and examine the code.  I'll get busy making it behave a little more like a Tetris game, and show you some progress in the next post.  Please feel free to get ahead of me, and make your own version!

JavaFX Script Boot Camp Registration Now Open!

I will be offering a 2.5 day JavaFX Script day "boot camp" on Wednesday, April 9 through Friday, April 11, 2008 (ending at noon) in Indianapolis, Indiana.  By the way, I'm scouting out the next location, so if you have suggestions for where I should offer a future BootCamp please let me know!

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Compiled JavaFX Script Now Speaks JSON

As I explained in the XML and JSON Processing post, compiled JavaFX Script has an XML abstraction. It now has a JSON abstraction as well.  I'm sure that there will be tweaks and enhancements to both, but today's example demonstrates how to parse JSON documents.  Here's a screenshot of the application:

Go ahead and compile the program, type in an artist, and see the table get populated with the albums from that artist.  As discussed and demonstrated in the Freebase Browser post, the freebase.com server communicates via JSON.  Today's example parses JSON streams from that server as well, sending it the artist name that you enter, and displaying the album titles in a table.  Note that the freebase.com server uses a couple of different ID schemes, so I'll give you a few artists to try:

• u2
• the_beatles
• james_taylor
• the_rolling_stones
• the_who
• norah_jones

Here's the code for the example.  Note: I used a "->" in this example to denote continuing a string on the next line.  When you cut and paste this code into your IDE or text editor, please remove the "->" characters and bring the next line beside that one.  This long line contains the query sent to freebase.com 

/*
 *  AlbumsJSON.fx - A compiled JavaFX program that demonstrates
 *                  using JSON.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a JavaFX Script example.
 */

import javafx.ui.*;
import javafx.json.*;
import java.lang.Exception;
import java.lang.System;
import java.net.URL;
import java.net.URI;
import java.io.InputStream;

class Model {
  attribute albums:String[];
  private attribute freebaseURL = "http://www.freebase.com/api/service/mqlread?queries=";
  private attribute jsonObj:JSONObject;

  function findAlbums(artist:String):Void {

    var query = 
      "\{\"albums\":\{\"query\":\{\"type\":\"/music/artist\", -->
        \"id\":\"/topic/en/{artist}\",\"album\":[]}}}";
    var uri = new URI("http","www.freebase.com", "/api/service/mqlread", 
                      "queries={query}", null);
    var url = uri.toURL();

    var p = new Parser();
    jsonObj = p.parse(url.openStream());

    try {
      albums = 
      for (albumz in jsonObj.pairs where albumz.name == "albums",
            result in (albumz.value as JSONObject).pairs where result.name == "result",
              album in (result.value as JSONObject).pairs where album.name == "album",
                alb in (album.value as Array).array ) {
          alb.toString();
      }
    }
    catch (e:Exception) {
      MessageDialog {
        title: "Try Again"
        message: "{artist} is not a valid ID for freebase.com"
        visible: true
      }
    }
  }
}

Frame {
  var model = Model {}
  width: 480
  height: 500
  title: "JSON Example"
  background: Color.WHITE
  content: 
    BorderPanel {
      center:
        FlowPanel {
          content: [
            Table {
              columns: [
                TableColumn {
                  text: "Album Name"
                }
              ]
              cells: bind for (album in model.albums)
                TableCell {
                  font:
                    Font {
                      size: 16
                    }
                  text: bind "{album}"
                  selected: false
                }
            }
          ]
        }
      bottom:
        FlowPanel {
          var artistTF:TextField
      font:
        Font {
          style: FontStyle.BOLD
          size: 16
        }
          content: [
            SimpleLabel {
              text: "Artist:"
            },
            artistTF = TextField {
              columns: 20
            },
            Button {
              text: "Find Albums"
              defaultButton: true
              action:
                function():Void {
                  model.findAlbums(artistTF.value.toLowerCase())
                }
            }
          ]
        }
    } 
  visible: true
  onClose:
    function():Void {
      System.exit(0);
    }
}

Here is the JSON stream returned from freebase.com when you request norah_jones:

{
  "code" : "/api/status/ok",
  "result" : [
    {
      "album" : [
        "First Sessions",
        "Come Away With Me (Limited Edition)",
        "Come Away With Me",
        "Feels Like Home",
        "Feels Like Home (disc 1)",
        "Come Away With Me (bonus disc)",
        "Feels Like Home (bonus disc)",
        "Hamburg 2002 (WDR)",
        "Live In New Orleans",
        "Live in Virginia Beach, Va 7-13-02",
        "Special Norah Jones",
        "Sunrise",
        "Turn Me On",
        "Don't Know Why",
        "Feels Like Home (Deluxe Edition: Disc 1)",
        "Not Too Late",
        "Stay With Me",
        "First Sessions",
        "Not Too Late",
        "New York City"
      ],
      "id" : "/topic/en/norah_jones",
      "type" : "/music/artist"
    }
  ]
}

Parsing in this manner is just one of the features of the JavaFX Script JSON abstraction.  Other features include building a JSON document using object literal syntax, and SAX-like processing of the JSON stream.

JavaFX Script Boot Camp Registration Now Open!

I will be offering a 2.5 day JavaFX Script day "boot camp" on Wednesday, April 9 through Friday, April 11, 2008 (ending at noon) in Indianapolis, Indiana.  By the way, I'm scouting out the next location, so if you have suggestions for where I should offer a future BootCamp please let me know!

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Binding to a Function in Compiled JavaFX Script

In previous posts I've demonstrated binding to an attribute, and binding to a sequence.  Now I'd like to show you how to bind to a function.  This is a very powerful feature because whenever the value of the function changes, the bound variable is updated.  Here's a screenshot of today's example program, in which the user selects the diameter of a circle from a slider widget.  The program calculates and displays the area of the circle, as well as drawing a circle with the selected diameter in pixels.

Here's the JavaFX Script code for this example:

/*
 *  BindToFunctionExample.fx - A compiled JavaFX program that demonstrates
 *                             binding to a function.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a JavaFX Script example.
 */

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.Math;
import java.lang.System;

class CircleModel {
  attribute diameter:Number;
  
  function getArea():Number {
    Math.PI * Math.pow(diameter / 2, 2);
  }
}

Frame {
  var cModel = CircleModel {}
  width: 480
  height: 560
  title: "Bind to Function Example"
  background: Color.WHITE
  content: 
    BorderPanel {
      center:
        Canvas {
          content: [
            Circle {
              cx: 240
              cy: 250
              radius: bind cModel.diameter * 2
              stroke: Color.PURPLE
              strokeWidth: 1
              fill: Color.CYAN
            },
            Text {
              font: 
                Font {
                  face: FontFace.SANSSERIF
                  style: FontStyle.BOLD
                  size: 24
                }
              x: 20
              y: 10
              stroke: Color.RED
              fill: Color.RED
              content: bind "Diameter: {cModel.diameter}"
            },
            Text {
              font: 
                Font {
                  face: FontFace.SANSSERIF
                  style: FontStyle.BOLD
                  size: 24
                }
              x: 240
              y: 10
              stroke: Color.RED
              fill: Color.RED
              content: bind "Area: {%3.2f cModel.getArea()}"
            }
          ]
        }
      bottom:
        Slider {
          min: 0
          max: 100
          border: 
            TitledBorder {
              title: "Diameter:"
            }
          value: bind cModel.diameter with inverse
          minorTickSpacing: 5
          majorTickSpacing: 10
          paintTicks: true
          paintLabels: true
          labels: [
            SliderLabel {
              value: 0
              label: 
                SimpleLabel {
                  text: "0"
                }
            },
            SliderLabel {
              value: 50
              label: 
                SimpleLabel {
                  text: "50"
                }
            },
            SliderLabel {
              value: 100
              label: 
                SimpleLabel {
                  text: "100"
                }
            }
          ]
        }
    } 
  visible: true
  onClose:
    function():Void {
      System.exit(0);
    }
}

Binding to a Function

As shown above, the slider is bi-directionally bound to the diameter attribute of the CircleModel instance.  This attribute affects the value of the getArea() function, so as the value of the diameter attribute changes, the content attribute bound to the getArea() function will reflect its value.

Formatting Output

Another thing that you'll notice in this example is that the value of the getArea() function is formatted to two decimal places when displayed in the Text graphical node.  This is due to the formatting capabilities of JavaFX Script that I began discussing in the Happy New Year post.

JavaFX Script Boot Camp Registration Now Open!

I will be offering a 2.5 day JavaFX Script day "boot camp" on Wednesday, April 9 through Friday, April 11, 2008 (ending at noon) in Indianapolis, Indiana. This course is designed to get you quickly up to speed in JavaFX Script application development. A primary reference for this course is my JavaFX Script book, but the course has its own syllabus which includes material covered in the book as well as up to the minute developments in compiled JavaFX Script. Registration is now open, and I am accepting 12 students in this pilot class. The cost of this pilot class will be 900 USD, and additional people from the same company will be 600 USD. You'll need to bring your laptop computer with the latest versions of the JavaFX Script downloads (which I'll specify in more detail as the class date approaches). I'm looking forward to teaching this class and hope that you can attend!

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site