Jim Weaver’s Rich-Client Java Blog

JavaFX with Passion! Puzzler #2: Animation

This puzzler is mainly directed at the students of the free JavaFX with Passion! course, and it contains concepts that have been covered in the course so far, including animation.  The first student in that course who submits a correct solution will be awarded a free token for the Pro JavaFX early access eBook.  If you're not enrolled in that course, feel free to submit a solution to this puzzler as well, because I'll give a free eBook for the first correct solution from a non-JavaFX-with-Passion student as well.

Here are the requirements for this second puzzler:

1. As shown in the screenshot above, the JavaFX program must have a Path that resembles a "figure 8" race track.
2. A blue ellipse representing the race car will follow the track when the program begins, with each lap taking 10 seconds.
3. The car will loop infinitely around the track, and will remain perpendicular to the center point of the circle around which it is currently traveling.
4. When the user presses the mouse on the race car (ellipse), the car will pause.
5. When the user presses the mouse on a paused race car, the car will resume moving from its current location.

To enter your solution, submit a comment to this blog post that contains the source code pasted into it.  To validate that the code meets the requirements, I will compile and run it with JavaFX SDK 1.1.1. It must run without any code editing, and must meet the above requirements.

I will feature the two winners and their solutions in an upcoming blog post.  Have fun with this one!

Regards,
Jim Weaver
JavaFXpert.com

memefx: A Set of Rich - Freely Evolving - JavaFX Components

Mauricio Aguilar has been busy creating some excellent JavaFX components in the context of the memefx open source project.  For example, here's a screenshot that contains some instances of the Gauge control and the Knob control:

Instructions for using these UI controls are documented well, and there are Web Start links on the site to try them out.

Congratulations, and thanks, Mauricio!

Jim Weaver
JavaFXpert.com

Creating a UFP (Ultimate Fighting Pigs) Game using JavaFX Production Suite :-)

At least it looks like a fighting game, with buttons labeled Kick and Punch.  Upon closer inspection, we find that it's a JavaFX version of the classic Pigs dice game, co-created by a JavaFX developer and a graphics designer.

Graphics designer Jonathan Wei used Adobe Illustrator to create the artwork.  The JavaFX Production Suite was employed to make it very easy for developer Jim Connell to use that artwork from JavaFX.  To help you learn this process, Jim has created an excellent tutorial that shows you how this game was created, walking through the [small amount of] JavaFX code contained in the program.

Regarding the Kick and Punch buttons:  They don't seem to be operable, and I suspect that they reflect the aforementioned guys' twisted sense of humor :-)

Thanks for this excellent resource, Jonathan and Jim!

Regards,

Jim Weaver
JavaFXpert.com (Learn JavaFX blog)

Developer Perspective on Creating a JavaFX UI for the Pet Store Demo

As mentioned in an earlier post, Farata Systems has created a JavaFX UI for the classic Pet Store demo.  For Yakov Fain's perspective on JavaFX (written in early February 2009) after developing this Pet Store UI in JavaFX, check out his article on the Farata Systems website.

Regards,

Jim Weaver
JavaFXpert.com (Learn JavaFX blog)

And the "Major Award" goes to... (JavaFX Puzzler #1)

Yesterday I challenged the readers of this blog with JavaFX Puzzler #1.  Please take a look at that post for the requirements, as well as the selection criteria for the winners (first correct solution from a JavaFX with Passion! student and first correct solution from someone that isn't enrolled in that course).

I am pleased to announce that the winners of this "Major Award" are Jonathan Share and "acw1668 from HK", and that they each will receive a coupon with which they can get the Pro JavaFX early access eBook for free.  Also, the screenshot of the "Major Award" from the comedy movie "A Christmas Story" has been included above.

Here is the screenshot and code for the example solution:

package javafxpassionpuzzler1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.text.*;
import javafx.ext.swing.SwingSlider;

Stage {
  var angle:Integer = 0;
  title: "Rotate Puzzler"
  scene: Scene {
    width: 300
    height: 200
    content: [
      Text {
        translateX: 90
        translateY: 90
        rotate: bind angle
        textOrigin: TextOrigin.TOP
        fill: Color.BLUE
        content: bind "Angle: {angle}"
        font: Font.font("sans serif", FontWeight.BOLD, 24)
      },
      SwingSlider {
        translateX: 50
        maximum: 360
        value: bind angle with inverse
      }

    ]
  }
}

Note that the rotate instance variable inherited by the Text class causes the node to be rotated around the center of the node.  Another approach used in reader solutions was to place a Transform.rotate() function in the transforms instance variable.  A downside of the latter approach is that the code must calculate the center of the node.

Please leave a comment if you have any questions about this solution. Congratulations to Jonathan Share and  "acw1668 from HK"!

Regards,
Jim Weaver
JavaFXpert.com

JavaFX with Passion! Puzzler #1

This puzzler is mainly directed at the students of the free JavaFX with Passion! course, and it contains concepts that have been covered in the course so far.  The first student in that course who submits a correct solution will be awarded a free token for the Pro JavaFX early access eBook.  If you're not enrolled in that course, feel free to submit a solution to this puzzler as well, because I'll give a free eBook for the first correct solution from a non-JavaFX-with-Passion student as well.

This first puzzler is pretty simple, but future puzzlers will be increasingly difficult.  Here are the requirements:

1. As shown in the screenshot above, the JavaFX program must have a slider and some text that rotates when the slider is adjusted.
2. The rotation will be from 0 to 360 degrees, depending on the position of the slider.
3. The text will consist of the string "Angle: " followed by the angle of rotation.
4. The text must have a bold font weight, and be blue in color.
5. The point at which the text rotates must be at the center point (both horizontally and vertically) of the text.

To enter your solution, submit a comment to this blog post that contains the source code pasted into it.  To validate that the code meets the requirements, I will compile and run it with JavaFX SDK 1.1. It must run without any code editing, and must meet the above requirements.

I will feature the two winners and their solutions in an upcoming blog post.  Let the games begin!

Regards,
Jim Weaver
JavaFXpert.com

Java 3D meets JavaFX - Thanks to InteractiveMesh.org

At the end of the day Friday, a couple of colleagues invited me to brainstorm with them about a 3D data visualization tool.  I have heard that JavaFX will have 3D capabilities, perhaps yet this year, but I needed something sooner than that.  After the session I searched for the latest developments in the intersection of JavaFX and Java 3D.  I was pleasantly surprised by the great work that a German organization named InteractiveMesh.org has done in the 3D space relative to JavaFX.

As you may know, you can wrap a Java 3D canvas in a JavaFX component, but there are a couple of issues with this: 

• The 3D canvas is a heavyweight component, so a JavaFX node placed on top gets obscured.
• Interfaces between the JavaFX scenegraph and the Java 3D universe would be required in order to provide a great user experience. 

The screenshot above shows a Java 3D universe placed in a JavaFX program, and thanks to the libraries created by InteractiveMesh.org the 3D universe is rendered into a lightweight component.  Also, their libraries provide for integration between the JavaFX scenegraph and the 3D universe (such as redirecting mouse events to the underlying heavyweight Canvas3D object).

Their site has a couple of JavaFX/Java 3D demos, the screenshot above showing one of them.  When running the demos, be sure to discover the various interactions that the mouse provides.  For example, you can scale the cube above with a mouse wheel, and can drag the cube while holding mouse button #2 down.  Congratulations and thanks to InteractiveMesh.org, and to August Lammersdorf whose name is in the source code.  

Thanks,
Jim Weaver
JavaFXpert.com

What do you want? (in future JavaFX posts :-)

Now that our Pro JavaFX book is available as an Apress Alpha (early access) eBook, and while we're waiting for JavaFX 1.5, I have a question for you: "What kinds of JavaFX posts would you like to see on this blog"?

JavaFX has gained a lot of momentum, and there are now lots of resources available (e.g. javafx.com, JavaFX books, and bloggers' posts).  Please leave a comment on the kinds of posts that you'd like to see.  For example, I asked the same question on Twitter.  Here are a couple of example replies:

"As we get closer to javafx tv and a third consumer of javafx common profile, perhaps articles pointed in the direction of using profiles.  Customers all the time ask me about fine tuning for mobile vs. fine tuning for desktop, graphic assets, and so on..."

"Tutorials, how-to's for building web based mashups, component posts, oh and 1 Java is dead post every month"

By the way, my reply to that one was "Neither Java, nor Paul, is dead :-)"

Here are some additional ideas that I've had, but would really like your feedback so that this blog provides value to you in the area of JavaFX development:

• JavaFX puzzlers.  These could range from simple questions to short coding exercises.  Now that the Pro JavaFX book is available as an Alpha eBook, I could give a free download token to the winner of a given puzzler (as I did with the earlier JavaFX Script book).
• JavaFX tips and tricks.  These would be focused at JavaFX developers who would like to gain exposure to lesser known, but valuable, JavaFX techniques.  Often, a "tips and tricks" post would be an intro and link to another blogger''s post.  For example, I saw a very cool post today from Rakesh Menon about using custom fonts in JavaFX.
• Progressive development of small examples that teach particular JavaFX concepts.
• Juicy JavaFX rumors :-)

So, what Ideas do you have?  Please leave a comment.

Regards,

Jim Weaver
JavaFXpert.com

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