Creating JavaFX Applications - JavaFX 1.2 Application Development - page 68

Getting ready
Before you can create customized nodes, you must be familiar with the basic shapes and
text nodes presented in previous recipes. If you are not familiar with the materials, review the
recipes Drawing simple shapes and Drawing letter shapes using the Text class . Also, take a
look at recipe Handling user input in this chapter to review how to handle user interactivity.
A custom node works just like any other JavaFX node and can be added to a scene graph. To
create customized nodes, you will need to import the classes Node and CustomNode found
in the package javafx.scene . You will also find it helpful to use the Group class (from the
same package) to aggregate nodes that make up your custom node.
How to do it...
The code presented here shows you how to extend the CustomNode class to create a new
node. In this case, the node is a simple button in the shape of a circle with mouse interactivity
behaviors. You can see the full code listing in ch02/source-code/src/custom/
CustomNodeDemo.fx .
class MessageButton extends CustomNode {
public-init var message:String = "Hello!";
public var xloc = 10;
public var yloc = 10;
public var size = 30;
public var font:Font = Font{name:"Arial" size:12}
override protected function create () : Node {
def circle = Circle {
centerX: bind xloc;
centerY: bind yloc;
radius: bind size/2;
}
def text:Text = Text{
font:font
content:message
textOrigin:TextOrigin.TOP
wrappingWidth: bind size;
fill:Color.WHITE
};
text.x = xloc - (text.boundsInLocal.width/2);
text.y = yloc - (text.boundsInLocal.height/2);
Group {
content:[circle,text]
onMouseEntered:function(e:MouseEvent){
circle.scaleX = 1.25;