Turn the Page: Creating a Compiled JavaFX Script BookPanel

I'd like to show you a novel (pardon the pun) and useful JavaFX Script widget called a BookPanel. It's perfect for enabling the user to view content using a book metaphor. To turn pages, you can either press the buttons below the pages, or as shown in the screenshot below you can drag the mouse to turn the pages:

Please take a look at the compiled JavaFX Script program that produced this output:

/*
*  CompiledBookPanelExample.fx
*
*  Developed 2007 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.awt.Rectangle;
import java.lang.System;

Frame {
  var textFont =
    Font {
      face: FontFace.COMIC_SANS_MS
      style: FontStyle.BOLD
      size: 20
    }
  title: "Compiled BookPanel Example"
  width: 700
  height: 350
  background: Color.WHITE
  visible: true
  onClose:
    function() {
      System.exit(0);
    }
  content:
    BorderPanel {
      var bookPanel =
        BookPanel {
          pageBounds: new Rectangle (0, 0, 350, 300)
          leftPageIndex: 0
          pages: [
            BorderPanel {
              background: Color.WHITE
              border: LineBorder {}
              center:
                Canvas {
                  content:
                    Text {
                      x: 10
                      y: 100
                      content: "Here I am - on the road again"
                      font: textFont
                      stroke: Color.RED
                      fill: Color.RED
                    }
                }
            },
            BorderPanel {
              background: Color.WHITE
              border: LineBorder {}
              center:
                Canvas {
                  content:
                    Text {
                      x: 10
                      y: 100
                      content: "There I am - up on the stage"
                      font: textFont
                      stroke: Color.BLUE
                      fill: Color.BLUE
                    }
                }
            },
            BorderPanel {
              background: Color.WHITE
              border: LineBorder {}
              center:
                Canvas {
                  content:
                    Text {
                      x: 10
                      y: 100
                      content: "Here I go - playing star again"
                      font: textFont
                      stroke: Color.GREEN
                      fill: Color.GREEN
                    }
                }
            },
            BorderPanel {
              background: Color.WHITE
              border: LineBorder {}
              center:
                Canvas {
                  content:
                    Text {
                      x: 10
                      y: 100
                      content: "There I go - turn the page"
                      font: textFont
                      stroke: Color.PURPLE
                      fill: Color.PURPLE
                    }
                }
            }
          ]
        }
      center:
        bookPanel
      bottom:
        FlowPanel {
          content: [
            Button {
              text: "Previous Page"
              enabled: bind bookPanel.leftPageIndex > 0;
              action:
                function() {
                  bookPanel.previousPage();
                }
            },
            Button {
              text: "Next Page"
              enabled: bind bookPanel.leftPageIndex < sizeof bookPanel.pages - 2;
              action:
                function() {
                  bookPanel.nextPage();
                }
            }
          ]
        }
    }
}

Noteworthy Concepts

I'd like to point some concepts from this example:

• A BookPanel instance is created using object literal syntax, but is assigned to a variable. This variable is used later to access its previousPage() and nextPage() functions.
• The pageBounds attribute of the BookPanel class is of type java.awt.Rectangle, which is in the Java SE class library. This is an example of instantiating a Java class within a JavaFX Script program.
• The enabled attribute of each Button is bound to an expression that calculates whether the Button should be operable.
• The LineBorder associated with each page helps give a visual indication of its edges.

Please be sure to compile and run this example so that you can experience the behavior of the BookPanel widget for yourself.

JavaFX Script Boot Camp Announcement

As a heads-up, I will be offering a JavaFX Script 2.5 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 will open soon, and for this pilot class I am accepting 12 students. The cost of this pilot class will be 900 USD per student. Additional students from the same organization 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). The prerequisite for the class will be the completion of a JavaFX Script programming assignment that I'll post soon to this weblog. I'm looking forward to teaching this class and hope that you can attend!