Components and Skinning - JavaFX 1.2 Application Development - page 128

See also
F Chapter 2—Building animation with the KeyFrame API
F Introduction
F Creating a form with JavaFX controls
Creating a custom JavaFX control
In previous recipes in this chapter, we have used the standard JavaFX controls to create
application GUIs. Inevitably, you will have an idea for a component with specific behaviors and
usage not offered by the standard set of controls. What do you do? Fortunately, creating your
own control is as easy as creating a new class. In this recipe, you will learn how to create your
own reusable GUI control.
Getting ready
As mentioned in the introduction for this recipe, creating a custom control is as easy as
creating a new class. If you are not familiar with the topic of class creation and issues with
accessibility and visibility of class members, review the recipes Declaring and using JavaFX
classes from Chapter 1 , Creating your own custom node from Chapter 2, and Making your
scripts modular, also from Chapter 2. If you are not familiar with the JavaFX Control API,
review the recipe Creating a form with JavaFX controls from this chapter.
How to do it...
The abbreviated version of the code for this custom control is shown next. It creates a class
called Deck that stacks its content (a collection of nodes) from back to front. The control
lets you shuffle the the content by shifting objects from the top to the bottom of the stack
(or vice-versa). You can access the full listing of the code from ch04/source-code/
custom/DeckControl.fx .
Let's explore how the code works:
1. First, let's define the Deck class by extending the Control class:
class Deck extends Control {
// properties
override public var width = 200;
override public var height = 100;
public var roundCornerSize:Integer = 0;
public var borderSize:Integer = 2;
public var borderColor:Color = Color.BLACK;
public var slideOffset:Integer=20;
public var duration:Duration = 300ms;