James Weaver on Quantum Computing and Java

Table of Contents for the Pro JavaFX Platform early access eBook

Several people have asked for a table of contents for the Pro JavaFX Platform early access eBook (by Weaver, Gao, Chin, and Iverson) to give them a better idea of what's inside.  Because the table of contents isn't on the Apress site yet, I'm posting it here.  Apress and Amazon aren't likely to post the fully expanded table of contents anyway. 

I've sprinkled in a few screenshots to give you a flavor for some of the example programs:

CHAPTER 1: Getting a Jump Start in JavaFX

• JavaFX Can’t Bring Rich-Client Java Back by Itself
• A Brief History of JavaFX
• Going to the Source – Sun’s JavaFX Websites
  • Accessing the JavaFX SDK API and Language Documentation
  • Obtaining the JavaFX SDK
  • JavaFX Production Suite
  • Other Available Tools
• Developing Your First JavaFX Program: "Hello Earthrise"
  • Compiling and Running from the Command-Line
  • Understanding the Hello Earthrise Program
    • Comments
    • The package Declaration
    • import Statements
    • Declarative Code That Defines the User Interface
    • Using the Stage Class
    • Creating String Literals
    • Using the Scene Class
    • Displaying Images
    • Working with Graphical Nodes as a Group
    • Drawing Text
    • Clipping Graphical Areas
    • Animating the Text to Make it Scroll Up
  • Building and Running the Program with NetBeans
• Deploying JavaFX Applications
  • Deploying JavaFX Applications with Java Web Start
  • Deploying JavaFX Applets
• Developing Your Second JavaFX Program: "More Cowbell!"
  • Building and Running the Audio Configuration Program
  • The Behavior of the Audio Configuration Program
  • Understanding the Audio Configuration Program
    • Creating an Instance of the Model, and the Magic of Binding
    • Colors and Gradients
    • The Model Class for the Audio Configuration Example
    • Structure of a Minimal JavaFX class
    • Defining Triggers in the Model Class
• Surveying JavaFX Features
• Summary
• Resources

CHAPTER 2: Taking a Closer Look at the JavaFX Script Language

• An Overview of JavaFX Script
• Understanding Variables, Values, and Their Types
  • Understanding Variable Names
  • Understanding Variable Types
• Understanding the Primitive Types
  • Understanding the Boolean Type
    • Boolean Literals and Default Value
    • Boolean Operators
    • The Backing Class of Boolean Type
  • Understanding the Integer Type
    • Integer Literals and Default Value
    • Arithmetic Operators
    • The Backing Class of Integer Type
  • Understanding the Number Type
    • Number Literals and Default Value
    • Arithmetic Operations
    • The Backing Class of Number Type
  • Understanding the String Type
    • String Literals and Default Value
    • String Expressions
    • The Backing Class of String Type
  • Understanding the Duration Type
    • Duration Literals and Default Value
    • Arithmetic Operations Involving Durations
    • The Backing Class of Duration Type
• Working with Sequences
  • Understanding Sequence Types
  • Constructing Sequences Using Explicit Sequence Expressions
  • Constructing Numeric Sequences Using Range Expressions
  • Manipulating Sequences
    • Accessing the Size of a Sequence
    • Accessing an Element in a Sequence
    • Accessing a Slice of a Sequence
    • Accessing a Subset of a Sequence through a Predicate
    • Reversing a Sequence
    • Inserting an Element into a Sequence
    • Inserting another Sequence into a Sequence
    • Deleting Elements from a Sequence
    • A Sequence Manipulation Example
  • Understanding Sequence Comprehension
  • Using Utility Functions in javafx.util.Sequences
• JavaFX Script is an Expression Language
  • Understanding Expressions and their Types
  • Understanding the Block Expression
  • Understanding Precedence and Groupings
  • Understanding the Expression Separator
  • Understanding Variable and Constant Declarations
  • Understanding the Assignment Operator
  • Understanding the Compound Assignment Operators
  • Understanding the Relational Operators
  • Understanding the while Expression
  • Revisiting the for Expression
  • Understanding the if Expression
• Understanding Object Literals
  • Understanding Classes and Objects
  • The Object Literal Expression
    • Initializing Instance variables
    • Declaring Constants and Variables
    • Overriding Instance functions and Instance variables
  • Manipulating Objects
    • Manipulating Object States
    • Invoking Instance functions
  • Creating Java Objects with the new Operator
  • The Making of a Declarative Syntax
• Working With Data Bindings
  • Understanding the bind Expression
    • What Does the Data Binding Remember?
    • Binding to if Expressions
    • Binding to for Expressions
    • Binding to a Block
    • Binding to Function Invocation Expressions
    • Binding to Object Literal Expressions
  • Understanding Bidirectional Bindings
• Summary

CHAPTER 3: Creating a User Interface in JavaFX

• Introduction to Node-Centric UIs
• Setting the Stage
  • Understanding the Stage Class
    • Consulting the API Docs for the Stage Class
  • Using the Stage Class: The StageCoach Example
  • Understanding the StageCoach Program
    • Obtaining Program Arguments
    • Setting the Style of the Stage
    • Controlling Whether a Stage is Resizable
    • Making a Stage Full Screen
    • Working with the Bounds of the Stage
    • Drawing Rounded Rectangles
    • Dragging the Stage on the Desktop when a Title Bar isn’t Available
    • Using UI Layout Containers
    • Ascertaining Whether the Stage is in Focus
    • Controlling Z-Order of the Stage
    • Closing the Stage and Detecting when it is Closed
    • Exiting the application
• Making a Scene
  • Using the Scene Class: The OnTheScene Example
  • Understanding the OnTheScene Program
    • Setting the Cursor for the Scene
    • Painting the Scene's Background
    • Populating the Scene with Nodes
    • Finding a Scene Node by ID
    • Accessing the Stage from the Scene
    • Inserting a Node into the Scene's content Sequence
    • CSS Styling the Nodes in a Scene
    • Understanding the JavaFX Node Class Hierarchy
• Handling Input Events
  • Surveying Mouse and Keyboard Events and Handlers
    • Understanding the KeyEvent Class
    • Understanding the MouseEvent Class
  • Using Mouse and Key Events: The MobileEqualizer Example
  • Understanding the MobileEqualizer Program
    • Understanding the Model used in this Program
    • Using the onMousePressed Event Handler
    • Using the onMouseDragged Event Handler
    • Giving Keyboard Input Focus to a Node
    • Using the onKeyPressed Event Handler
• Animating Nodes in the Scene
  • Using a Timeline for Animation
    • The Metronome1 Example
    • Understanding the Metronome1 Program
      • Understanding the Timeline Class
      • Inserting Key-Frames into the Timeline
      • Controlling and Monitoring the Timeline
      • Shorthand Syntax for Key-Frames
  • Using the Transition Classes for Animation
    • The MetronomeTransition Example
    • The Behavior of the MetronomeTransition Program
    • Understanding the MetronomeTransition Program
      • Using the TranslateTransition Class
      • Controlling and Monitoring the Transition
      • The MetronomePathTransition Example
    • The Behavior of the MetronomePathTransition Program
    • Understanding the MetronomePathTransition Program
      • Using the PathTransition Class
      • Drawing an Ellipse
  • The Zen of Node Collision Detection
    • Understanding the ZenPong Program
      • Using the KeyFrame action Event Handler
      • Using the Node intersects() Function to Detect Collisions
      • Dragging a Node
  • Summary
  • Resources

CHAPTER 4: Using Functions, Classes and Other Advanced Features

• Working with Functions
  • Understanding Function Definitions
    • Understanding Return Types
    • Understanding Parameters and their Types
    • Understanding Function Bodies and the return Expression
    • What Can a Function Body See?
  • Understanding Overloaded Functions
    • Understanding Implicit Type Conversions
    • Rules for Overloaded Function Resolution
  • Understanding Function Types and Anonymous Functions
    • More Details on Function Type Specifiers
    • More Details on Anonymous Function Expressions
    • More Details on Closures
  • Understanding Bound Functions
  • Understanding Exceptions
    • Understanding the Call Stack
    • Throwing Exceptions
    • Handling Exceptions
• Working with Classes
  • Understanding Class Definitions
    • Understanding Instance Variables
    • Understanding Instance Functions
    • Understanding the this Expression
    • Understanding Initialization Blocks
  • Creating Class Hierarchies
    • Extending Classes
    • Overriding Instance Variables
    • Overriding Instance Functions
    • Understanding the super Keyword
    • Understanding Abstract Classes
    • Understanding Casting and the instanceof and as Operators
• Organizing JavaFX Script Code
  • What is a Script?
  • Understanding Modules
  • A Special Provision for Classes
  • Understanding Packages
  • Understanding Import Directives
  • Understanding Access Modifiers
    • Understanding the protected Modifier
    • Understanding the public-init and public-read Modifiers
• Understanding Triggers
  • Accessing the Old and New Values in Trigger Blocks
  • Accessing Sequence Modification Information in Trigger Blocks
  • Debugging With Triggers
• Understanding String Formatting and Internationalization
  • Using String Format Specifications
  • Internationalizing JavaFX Script Programs
• Leveraging Java from JavaFX Script
  • Instantiating Java Classes
  • Accessing Java Object Fields
  • Calling Java Methods
  • Accessing Static Fields and Methods
  • Quoting JavaFX Script Keywords
  • Accessing Nested Classes
  • Accessing Java Enums
  • Extending Java Classes and Interfaces
  • Iterating Through Java Collections
• Understanding JavaFX Script Reflection
  • Understanding Mirror-Based Reflection
  • Entering the Reflection World
  • Programming through Reflection
    • Creating a New Instance of a Class
    • Getting and Setting Values of Instance and Script variables
    • Invoking Instance and Script Functions
    • Other Reflection Capabilities
• Summary

 

CHAPTER 5: Creating Custom UI Components in JavaFX

• Creating Custom UI Components
  • Creating a Custom Node
    • The ColorPickerNode Example
    • Understanding the ColorPickerNode Custom Node
      • Overriding the CustomNode create() Function
      • Using the Node hover Variable
    • The ColorPickerSnowFlakeNode Example
    • Understanding ColorPickerSnowFlakeNode
      • Making a Node Act like a Dialog
      • Defining and Invoking an Event Handler
      • Overriding Instance Variables
      • The DropShadow Effect
      • Obtaining the width and height of a Node
      • Creating a Polygon Shape
      • Using the stroke and strokeWidth Variables
      • Using the transforms Variable to Transform Nodes
      • Blocking Mouse Events from Underlying Nodes
  • Creating Skinnable UI Controls
    • The StoplightSkinning Example
    • Understanding the StoplightSkinning Program
      • Creating the Control's Model
      • Using the hover, pressed, focused and Variables in the Model
      • Associating a Skin with the Model
      • Creating a Skin for the Control
      • Binding the Skin to the Model
      • Using the hover, pressed, focused and Variables in the Skin
      • The Code for the Horizontal Stoplight Skin
      • Associating a Skin with the Model using a Stylesheet
    • Deciding Between Creating a Custom Node and a UI Control
• Summary
• Exercise: Putting Chapters 1 – 5 Concepts in Practice
• Resources

CHAPTER 6: Using the Media Classes

• The Foundation
• Working With Media
• Playing Audio
  • Controlling Playback
  • Repetition
  • Volume and Balance
  • Streaming Media
• Playing Video
  • Controlling the Size of a MediaView
  • Transforming a MediaView
  • Compositing And Effects
  • One Player, Multiple Views
  • Playing Movies with SimpleMediaPlayer
• Summary

CHAPTER 7: Dynamically Laying Out Nodes in the User Interface

• Introducing JavaFX Reversi
  • Board Layout and Basic Rules
  • Building a JavaFX Model for Reversi
• Dynamic Layout Basics
  • Bind For Layouts
  • Centering Nodes and Text
  • Aligning to Edges
  • Aligning Nodes to Each Other
  • Using HBox and VBox
  • When to Use Bind Versus Boxes
• Creating Resizable Nodes
  • Building a Reversi Square
  • Building a Reversi Piece
• Creating a Grid Layout Container
  • Understanding the Geometry API
  • Extending the Container Class
  • The Grid Layout Algorithm
  • Binding the Layout to the Model
• A New Perspective on Reversi
  • The Perspective Layout Algorithm
  • Creating the Perspective Layout Class
  • Integrating the Perspective Layout
• Bringing Reversi to Life
  • Highlighting Legal Moves
  • Perspective Mouse Interaction
  • Highlighting the Active Cell
  • Taking Turns
  • Additional Game Enhancements
• Summary
• Resources

Chapter 8: Extending JavaFX with Third-Party Libraries

• Creating Desktop Widgets with WidgetFX
  • Creating a Movie Widget
  • Widget Configuration
  • Deploying Widgets to the Web
  • Third-Party Widgets
    • Disk Space Widget
    • World Clock Widget
    • World Smiley Widget
  • The Future of WidgetFX
• Building a Media Explorer with JFXtras
  • Laying out a Resizable Directory Navigator
  • Building a User Interface with Constraints
  • Displaying Media in a Dynamic Grid
  • Wrapping Media with Borders in a Deck
  • Creating an Asynchronous Search Form with MigLayout
    • Laying out the Search Form with MigLayout
    • Adding Asynchronous Search with the JFXWorker
    • Refining the Search With Filters
• The Rest of JFXtras
  • JFXtras Test
    • Nesting Test Cases
    • Fluent Expectations
    • Parameterized Testing
      • Using Assume to Calculator Output
    • Unit Testing the Media Search with Custom Expectations
  • Extended Shapes
  • The Future of JFXtras
• Other Libraries
  • Atomic Tile - 2D Tile-based Game Authoring
  • FXUtil - Inverse Kinetics Library
  • FEST-JavaFX - Automated UI Testing of JavaFX
• Predicting what will be in future versions of JavaFX
• Summary
• References

CHAPTER 9: Building a Professional JavaFX Application

• Writing RESTful Web Service Clients
  • Rise of the RESTful Web
  • Using The HttpRequest Class
  • Writing JSON Clients
    • Parsing JSON in JavaFX
    • Who is My Representative?
  • Writing XML Clients
    • Parsing XML in JavaFX
    • Who is My Representative in XML
• Developing a Rich Internet Application
  • Making Use of Assets with the Production Suite
  • Using the Amazon Web Service API
  • User Interface Considerations
    • Inside the NodeFactory
  • The Home Page
    • A Java-Based Image Cache
    • Getting the Top Sellers from Amazon
  • The Search Page
    • Adding Item Search to the Application Model
  • The Cart Page
• Summary
• Resources

 Chapter 10: Developing JavaFX Mobile Applications

• The Vision of JavaFX Mobile
• Mobile Hello Earthrise
  • Running in the Mobile Emulator
  • Fitting Applications on the Mobile Screen
• Developing for the Common Profile
• Mobile DrawJFX
  • Creating a Mobile Color Picker
  • Refactoring DrawJavaFX for Mobile Devices
• Advanced Mobile Features
  • Performance Tuning JavaFX Mobile Applications
• Summary
• References

We end where we began, with the Hello Earthrise program, this time running in JavaFX Mobile.

Regards,
Jim Weaver

Pro JavaFX: All 10 Chapters are Available Now in Early Release eBook

The Pro JavaFX Plaform author team (Weiqi Gao, Stephen Chin, Dean Iverson and I) hit a milestone in the wee hours this morning:  We submitted the remaining chapters for the Pro JavaFX book, which brings the status to "all chapters submitted in first draft form (or later)".  You can download this Apress Alpha (early access) eBook with all 10 of its chapters now (the price is USD 34.99).

Here's are a couple of screenshots from the Creating Custom UI Components in JavaFX chapter.  The first screenshot is from a section that demonstrates how to create a custom node, which is achieved by extending the CustomNode class.  The example is a color picker node, which enables the user to pick one of the 216 so-called "web safe" colors:

Another type of custom UI component in JavaFX is the skinnable UI control, which is achieved by extending the Control class to define the model, and extending the Skin class to define each skin for the UI control.  Here's a screenshot of the SkinnableStoplight example that demonstrates how to create a skinnable UI control:

 

The Developing JavaFX Mobile Applications chapter submitted this morning demonstrates a drawing program developed in JavaFX that uses the color picker node shown above.  Here's a screenshot of that program running in the JavaFX Mobile Emulator, as the user pops up the color picker to choose an outline color:

It is our hope that this Pro JavaFX early access eBook will help you learn JavaFX from the basic concepts all the way up to the advanced, professionally-oriented, topics.

Regards,
Jim Weaver

 

Answering Reader Mail about the JavaFX Reflection API

Sarah H comments on a blog post:

Hi again, you said "Also, JavaFX has reflection." sorry,but i didn't understand very well..can u make it a little bit more clear ? besides is there something similar to "Class.forName(str).getInstance();" but in JavaFX ? and who can also handle the properties like for example in the case of a SwingButton(text,action..) Thanks

Sarah (and anyone else that is curious about reflection in JavaFX),

That's a very good question, and there is very little documentation on this subject so far.  Here's a quick example of using the reflection API in JavaFX.  First a screenshot:

When you first invoke the program, only the button appears.  Each time you click the button, an instance of a TextBox is created using classes in the javafx.reflect package.  Each instance is added to the content sequence of a VBox layout container which causes each new TextBox to appear below the previous one.  Take a look at the code below while browsing the javafx.reflect package in the JavaFX API docs to see what's going on in this program.  Here's the code:

/*
 * ReflectExample1Main.fx
 *
 * Developed 2009 by James L. Weaver as a very simple example of
 * using the javafx.reflect package in JavaFX
 */

package javafxpert.reflectexample.ui;

import java.util.Date;
import java.util.Iterator;
import javafx.reflect.*;
import javafx.stage.Stage;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.ext.swing.SwingButton;

Stage {
  var sceneRef: Scene;
  title: "Reflection"
  scene:
  sceneRef = Scene {
    var vBoxRef:VBox;
    width: 500
    height: 500
    content: [
      SwingButton {
        translateX: 10
        translateY: 10
        text: "Create TextBox"
        action: function():Void {
          // Now use reflection to create a TextBox object
          // First, get the local context
          var ctx:FXLocal.Context = FXLocal.getContext();

          // Then, get an object that represents the class type
          var cls:FXLocal.ClassType = ctx.findClass("javafx.scene.control.TextBox");

          // Just for grins, print the variable names of the TextBox class
          var varIter:Iterator = cls.getVariables(true).iterator();
          while (varIter.hasNext()) {
            println(varIter.next());
          }

          // Now, create an object that represents the TextBox object
          var objVal:FXObjectValue =  cls.allocate();

          // Initialize variables of the object
          var now:String = new Date().toString();
          objVal.initVar("text", ctx.mirrorOf(now));
          objVal.initVar("columns", ctx.mirrorOf(20.0));

          // Initialize the TextBox object
          objVal = objVal.initialize();

          // Get the JavaFX reference to the TextBox
          var node: Node = ((objVal as FXLocal.ObjectValue).asObject()) as Node;

          // Insert this TextBox node into the VBox by appending it to
          // the content sequence
          insert node into vBoxRef.content;
        }
      },
      vBoxRef = VBox {
        translateX: 200
        translateY: 10
        spacing: 5
      }
    ]
  }
}

As you can see, the reflection API enables capabilities such as dynamic generation of forms based upon data structures known only at runtime.  There will be more information about the JavaFX reflection API next week in the Pro JavaFX Platform book (which is available in eBook form through the Apress Alpha program).

Regards,
Jim Weaver

Pro JavaFX Released in Apress Alpha (Early Access) Program

As many of you know, Weiqi Gao, Stephen Chin, Dean Iverson and I have been writing a book entitled  Pro JavaFX that is targeted at serious developers who want to use JavaFX.  In addition to the book being available in printed form by JavaOne 2009, we made the decision last week to allow the book to be offered as an Apress Alpha (early access) eBook.  This enables you to see the chapters of the book as drafts are submitted and revised, which gives you access to the content as soon as it is created (typos and all).  This also enables us to fine-tune the material based upon your feedback.

Here's the list of the chapters for the book:

1. Getting a Jump Start in JavaFX
2. Taking a Closer look at the JavaFX Language
3. Creating a User Interface in JavaFX
4. Using Functions, Classes and Other Advanced Features
5. Creating Custom UI Components in JavaFX
6. Using the Media Classes
7. Dynamically Laying out Nodes in the User Interface
8. Extending JavaFX with Third-Party Libraries
9. Building a Professional JavaFX Application
10. Developing JavaFX Mobile Applications

Currently, seven chapters (1, 2, 3, 4, 6, 7, 8) are available for download, and each of these is in first or second draft.  Chapters 5, 9 and 10 will be available soon as first drafts.  Here is a screenshot from Chapter 8 in which a drawing program built in JavaFX (in Chapter 5) is used to draw the shapes available in the JFXtras project:

Weiqi, Stephen, Dean and I welcome you to join us in this journey as we complete the development of what is becoming a definitive treatment of JavaFX for professional developers.

For therapeutic purposes I'm sure, Stephen Chin wrote a quick blog post that gives an "exclusive, behind-the-scenes look into the making of the Pro JavaFX™ Platform book" :-)

Regards,
Jim Weaver
JavaFXpert.com

JFXtras 0.3 Released with MigLayout and JavaFX 1.1 Support

The JFXtras 0.3 release is out with full support for JavaFX 1.1, as well as JavaFX MigLayout support.

See Stephen Chin's blog post for some details on the JFXtras 0.3 release.  Also, thanks to Keith Combs who is helping to manage the JFXtras project while Stephen is furiously finishing his chapters of the upcoming Pro JavaFX book.

Regards,
Jim Weaver

Notes from Stephen Chin on Migrating to the JavaFX 1.1 Release

As a result of JavaFX SDK 1.1 being released last week, Stephen Chin created an article that highlights the changes from JavaFX SDK 1.0. 

According to Stephen, "...the amount of change in the JavaFX 1.1 Release is minuscule in comparison [to the amount of change from the Technical Preview to JavaFX 1.0]. However, you may still run into a few language and API changes that will affect any moderately complicated application."

Thanks for this, Stephen!

Regards,
Jim Weaver

JavaFX 1.1 Mobile Example: Using Binding and Key Events

Now that JavaFX SDK 1.1 has been released, which includes JavaFX Mobile, I wanted to show you a couple of code examples along with Java Web Start links to run them.  Note: This is an update to a pre-JavaFX 1.1 article posted earlier.

The screenshot above is a simple example of binding, running in the JavaFX Mobile emulator, that uses UI capabilities that exist on the JavaFX Mobile platform.  It also demonstrates handling mouse and key events.  Click on the screenshot or Launch button above to run this example via Web Start.  A little later in this post I'll expand the example to create a UI that behaves somewhat like graphic equalizer controls. Take a look at the code for this example:

/*
 * MobileBindingMain.fx
 *
 * Developed 2009 by James L. Weaver to demonstrate binding in JavaFX
 * with UI classes in the JavaFX Mobile profile, and keyboard input.
 */

package projavafx.mobilebinding.ui;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;

var level:Number = 30;
def MAX_LEVEL:Number = 230;
def MIN_LEVEL:Number = 10;
var rectRef:Rectangle;

Stage {
  title: "Binding Example"
  scene: Scene {
    fill: Color.BLACK
    width: 240
    height: 320
    content: [
      Text {
        translateX: 20
        translateY: 20
        textOrigin: TextOrigin.TOP
        font: Font {
          name: "Sans serif"
          size: 18
        }
        content: "Binding / KeyEvent 1"
        fill: Color.WHITE
      },
      rectRef = Rectangle {
        x: 0
        y: 60
        width: bind level
        height: 20
        fill: LinearGradient {
          startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
          stops: [ Stop { offset: 0.0 color: Color.LIGHTBLUE },
               Stop { offset: 1.0 color: Color.DARKBLUE } ]
        }
        onMouseDragged: function(me:MouseEvent):Void {
          if (me.x >= MIN_LEVEL and me.x <= MAX_LEVEL) {
            level = me.x;
          }
        }
        onKeyPressed: function(ke:KeyEvent):Void {
          if (ke.code == KeyCode.VK_RIGHT and level <= MAX_LEVEL - 10) {
            level += 10;
          }
          else if (ke.code == KeyCode.VK_LEFT and level >= MIN_LEVEL + 10) {
            level -= 10;
          }
        }
      },
      Text {
        translateX: 20
        translateY: 100
        textOrigin: TextOrigin.TOP
        font: Font {
          name: "Sans serif"
          size: 18
        }
        content: bind "Level: {level}"
        fill: Color.WHITE
      }
    ]
  }
}
rectRef.requestFocus();

The length of the bar can be adjusted by clicking in the bar and dragging the mouse.  It can also be adjusted by pressing the left and right arrow keys, either on the computer keyboard or on the mobile emulator.  As shown in the listing above, the width of the rectangle is bound to the value of the level variable.

The next example uses a sequence of values to which the bars in the graphic equalizer are bound.  Like the previous example, the length of a bar can be controlled by dragging it or pressing the right and left arrow buttons.  In addition, the bar to be adjusted can be selected by pressing the up and down arrow keys, as well as clicking it with the mouse.  Here's a screenshot of the UI running in the JavaFX Mobile emulator:

Click on the screenshot or Launch button above to run this example via Web Start.  Then take a look at the code below, noticing the levels sequence to which the Rectangle widths are bound.  The fact that five rectangles are created is courtesy of the for expression, which evaluates to a sequence of Rectangle instances:

/*
 * MobileEqualizerMain.fx
 *
 * Developed 2009 by James L. Weaver to demonstrate binding in JavaFX
 * with UI classes in the JavaFX Mobile profile, and keyboard input.
 */

package projavafx.mobilebinding.ui;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;

var levels: Number[] = [30, 40, 50, 45, 35];
var selectedBarIndex: Integer = 0;
def MAX_LEVEL: Number = 230;
def MIN_LEVEL:Number = 10;
var groupRef: Group;

Stage {
  title: "Binding Example"
  scene: Scene {
    fill: Color.BLACK
    width: 240
    height: 320
    content: [
      Text {
        translateX: 25
        translateY: 20
        textOrigin: TextOrigin.TOP
        font: Font {
          name: "Sans serif"
          size: 18
        }
        content: "Binding / KeyEvent 2"
        fill: Color.WHITE
      },
      groupRef = Group {
        content: bind for (level in levels)
          Rectangle {
            x: 0
            y: 60 + (indexof level * 30)
            width: level
            height: 20
            fill: LinearGradient {
              startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
              stops: [ Stop { offset: 0.0 color: Color.LIGHTBLUE },
                   Stop { offset: 1.0 color: Color.DARKBLUE } ]
            }
            opacity: if (indexof level == selectedBarIndex) 1 else 0.7
            onMousePressed: function(me:MouseEvent):Void {
              selectedBarIndex = indexof level;
            }
            onMouseDragged: function(me:MouseEvent):Void {
              if (me.x >= MIN_LEVEL and me.x <= MAX_LEVEL) {
                levels[indexof level] = me.x;
              }
            }
          }
        onKeyPressed: function(ke:KeyEvent):Void {
          if (ke.code == KeyCode.VK_RIGHT and levels[selectedBarIndex] <= MAX_LEVEL - 10) {
            levels[selectedBarIndex] += 10;
          }
          else if (ke.code == KeyCode.VK_LEFT and levels[selectedBarIndex] > MIN_LEVEL + 10) {
            levels[selectedBarIndex] -= 10;
          }
          else if (ke.code == KeyCode.VK_DOWN) {
            selectedBarIndex = (selectedBarIndex + 1) mod sizeof levels;
          }
          else if (ke.code == KeyCode.VK_UP) {
            selectedBarIndex = (sizeof levels + selectedBarIndex - 1) mod sizeof levels;
          }
        }
      },
      Text {
        translateX: 25
        translateY: 220
        textOrigin: TextOrigin.TOP
        font: Font {
          name: "Sans serif"
          size: 18
        }
        content: bind "Bar:{selectedBarIndex + 1}, Level: {levels[selectedBarIndex]}"
        fill: Color.WHITE
      }
    ]
  }
}
groupRef.requestFocus();

Most of the UI components currently in JavaFX are Swing components in the Desktop Profile, which don't work on JavaFX Mobile.  The next JavaFX release after the upcoming JavaFX SDK 1.1 version is slated to have lots of UI controls that will be in the Common profile, and will therefore work on JavaFX Mobile.  My crystal ball is still in the repair shop, but I anticipate this release to be available before JavaOne 2009. Also, phones that support JavaFX Mobile are due to arrive by JavaOne 2009.

Please leave a comment if you have any questions.

Regards,
Jim Weaver
JavaFXpert.com

Yakov Fain Creates Pet Store Demo UI in JavaFX

As I mentioned in the Can JavaFX be used to Develop Real-World Applications post, Yakov Fain indicated that he has started looking into JavaFX and plans to publish a couple of articles (in Java Developer's Journal) going through development of an application that real-world software developers can relate to.

Today, Yakov released an excellent article entitled Pet Store with JavaFX 1.0.- Part I which includes a quick video (6 minutes) of the Pet Store Demo UI in JavaFX.  In this version, the JavaFX program is integrated with Sun's Pet Store Demo application services and database.  For example, the screenshot above shows the information about one of the available cats.  The screenshot below demonstrates the ability to use the wrap() function of the SwingComponent class to wrap Swing components, in this case to add data about a new pet.

 

Be sure to take a look at this article and video, which features Sylvester Stallone (just kidding, the screenshot below shows Yakov Fain being added as a pet and uploading his picture).

Congratulations, Yakov, and thanks for this great example of using JavaFX for the UI in an enterprise application!

Regards,
Jim Weaver
http://JavaFXpert.com (Learn JavaFX blog)

Binding and KeyEvent Examples in JavaFX Mobile

Note: Now that JavaFX SDK 1.1 has been released, which includes JavaFX Mobile, this post has been superseded by the post entitled JavaFX 1.1 Mobile Example: Using Binding and Key Events

This post is in response to a Sun article entitled Three Reasons Why Your Next Java ME Mobile Application Should Include JavaFX Mobile.  Reason #3, Data Binding With the Bind Keyword, was presented using an example that won't work on JavaFX Mobile profile.  The author's note was: "Since this application uses the SwingSlider component, it won't work on JavaFX Mobile profile, but it's a good example of how to use the bind keyword."

The screenshot above is a simple example of binding, running in the JavaFX Mobile emulator, that uses UI capabilities that exist on the JavaFX Mobile platform.  It also demonstrates handling mouse and key events.  A little later in this post I'll expand the example to create a UI that behaves somewhat like graphic equalizer controls. Take a look at the code for this example:

/*
 * MobileBindingMain.fx
 *
 * Developed 2009 by James L. Weaver to demonstrate binding in JavaFX
 * with UI classes in the JavaFX Mobile profile, and keyboard input.
 */

package projavafx.mobilebinding.ui;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;

var level:Number = 30;
def MAX_LEVEL:Number = 230;
def MIN_LEVEL:Number = 10;
var rectRef:Rectangle;

Stage {
  title: "Binding Example"
  scene: Scene {
    fill: Color.BLACK
    width: 240
    height: 320
    content: [
      Text {
        translateX: 20
        translateY: 20
        textOrigin: TextOrigin.TOP
        font: Font {
          name: "Sans serif"
          size: 18
        }
        content: "Binding / KeyEvent 1"
        fill: Color.WHITE
      },
      rectRef = Rectangle {
        x: 0
        y: 60
        width: bind level
        height: 20
        fill: LinearGradient {
          startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
          stops: [ Stop { offset: 0.0 color: Color.LIGHTBLUE },
               Stop { offset: 1.0 color: Color.DARKBLUE } ]
        }
        onMouseDragged: function(me:MouseEvent):Void {
          if (me.x >= MIN_LEVEL and me.x <= MAX_LEVEL) {
            level = me.x;
          }
        }
        onKeyPressed: function(ke:KeyEvent):Void {
          if (ke.code == KeyCode.VK_RIGHT and level <= MAX_LEVEL - 10) {
            level += 10;
          }
          else if (ke.code == KeyCode.VK_LEFT and level >= MIN_LEVEL + 10) {
            level -= 10;
          }
        }
      },
      Text {
        translateX: 20
        translateY: 100
        textOrigin: TextOrigin.TOP
        font: Font {
          name: "Sans serif"
          size: 18
        }
        content: bind "Level: {level}"
        fill: Color.WHITE
      }
    ]
  }
}
rectRef.requestFocus();

The length of the bar can be adjusted by clicking in the bar and dragging the mouse.  It can also be adjusted by pressing the left and right arrow keys, either on the computer keyboard or on the mobile emulator.  As shown in the listing above, the width of the rectangle is bound to the value of the level variable.

The next example uses a sequence of values to which the bars in the graphic equalizer are bound.  Like the previous example, the length of a bar can be controlled by dragging it or pressing the right and left arrow buttons.  In addition, the bar to be adjusted can be selected by pressing the up and down arrow keys, as well as clicking it with the mouse.  Here's a screenshot of the UI running in the JavaFX Mobile emulator:

Take a look at the code below, noticing the levels sequence to which the Rectangle widths are bound.  The fact that five rectangles are created is courtesy of the for expression, which evaluates to a sequence of Rectangle instances:

/*
 * MobileEqualizerMain.fx
 *
 * Developed 2009 by James L. Weaver to demonstrate binding in JavaFX
 * with UI classes in the JavaFX Mobile profile, and keyboard input.
 */

package projavafx.mobilebinding.ui;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;

var levels: Number[] = [30, 40, 50, 45, 35];
var selectedBarIndex: Integer = 0;
def MAX_LEVEL: Number = 230;
def MIN_LEVEL:Number = 10;
var groupRef: Group;

Stage {
  title: "Binding Example"
  scene: Scene {
    fill: Color.BLACK
    width: 240
    height: 320
    content: [
      Text {
        translateX: 25
        translateY: 20
        textOrigin: TextOrigin.TOP
        font: Font {
          name: "Sans serif"
          size: 18
        }
        content: "Binding / KeyEvent 2"
        fill: Color.WHITE
      },
      groupRef = Group {
        content: bind for (level in levels)
          Rectangle {
            x: 0
            y: 60 + (indexof level * 30)
            width: level
            height: 20
            fill: LinearGradient {
              startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
              stops: [ Stop { offset: 0.0 color: Color.LIGHTBLUE },
                   Stop { offset: 1.0 color: Color.DARKBLUE } ]
            }
            opacity: if (indexof level == selectedBarIndex) 1 else 0.7
            onMousePressed: function(me:MouseEvent):Void {
              selectedBarIndex = indexof level;
            }
            onMouseDragged: function(me:MouseEvent):Void {
              if (me.x >= MIN_LEVEL and me.x <= MAX_LEVEL) {
                levels[indexof level] = me.x;
              }
            }
          }
        onKeyPressed: function(ke:KeyEvent):Void {
          if (ke.code == KeyCode.VK_RIGHT and levels[selectedBarIndex] <= MAX_LEVEL - 10) {
            levels[selectedBarIndex] += 10;
          }
          else if (ke.code == KeyCode.VK_LEFT and levels[selectedBarIndex] > MIN_LEVEL + 10) {
            levels[selectedBarIndex] -= 10;
          }
          else if (ke.code == KeyCode.VK_DOWN) {
            selectedBarIndex = (selectedBarIndex + 1) mod sizeof levels;
          }
          else if (ke.code == KeyCode.VK_UP) {
            selectedBarIndex = (sizeof levels + selectedBarIndex - 1) mod sizeof levels;
          }
        }
      },
      Text {
        translateX: 25
        translateY: 220
        textOrigin: TextOrigin.TOP
        font: Font {
          name: "Sans serif"
          size: 18
        }
        content: bind "Bar:{selectedBarIndex + 1}, Level: {levels[selectedBarIndex]}"
        fill: Color.WHITE
      }
    ]
  }
}
groupRef.requestFocus();

Most of the UI components currently in JavaFX are Swing components in the Desktop Profile, which don't work on JavaFX Mobile.  The next JavaFX release after the upcoming JavaFX SDK 1.1 version is slated to have lots of UI controls that will be in the Common profile, and will therefore work on JavaFX Mobile.  My crystal ball is still in the repair shop, but I anticipate this release to be available before JavaOne 2009.  Also, phones that support JavaFX Mobile are due to arrive by JavaOne 2009.

Please leave a comment if you have any questions.

Regards,
Jim Weaver
JavaFXpert.com