JavaFX 1.3: Template for custom controls
Here is a small template that helps you to create your own custom control without any problem:
Just paste this code into your fx file and rename the classes using the IDE you prefer…
[cc lang="c"]
public class MyOwnControl extends Control {
init {
if ( skin == null ) {
skin = MyOwnControlSkin {};
}
}
}
public class MyOwnControlSkin extends Skin {
def myBehavior = bind behavior as MyOwnBehaviour;
def myControl = bind control as MyOwnControl;
init {
behavior = MyOwnBehaviour{};
node = Rectangle {
width: bind control.width
height: bind control.height
}
}
override function getPrefWidth( number ) {
//return your pref width – hard coded values are ok for most cases
}
override function getPrefHeight( number ) {
//return your pref height – hard coded values are ok for most cases
}
/*
//It is not absolutly necessary to override those methods, but strongly recommended.
override function getMaxWidth() {
//Return the max width
}
override function getMaxHeight() {
//Return the max height
}
override function getMinWidth() {
//Return the min width
}
override function getMinHeight() {
//Return the min height
}*/
override function contains( localX: Number, localY: Number ): Boolean {
node.contains( localX, localY );
}
override function intersects( localX: Number, localY: Number, localWidth: Number, localHeight: Number ): Boolean {
node.intersects( localX, localY, localWidth, localHeight );
}
}
public class MyOwnBehaviour extends Behavior {
def myControl = bind skin.control as MyOwnControl;
}
[/cc]
April 27th, 2010 at 15:42
[...] This template is made for JavaFX 1.2! For 1.3 use the template posted here [...]
May 1st, 2010 at 15:31
[...] There is a post containing a template for CustomControls here. [...]
August 16th, 2010 at 14:50
The problem with this template is that Skin class doesn’t support CSS for your component.
In order to have it you’ll need a SkinBase class. In JavaFx 1.3 all components-skin are Region-Based skins.
class YourSkin extends SkinBase{}
and then in the control
override var styleClass = “your-control”;
override var skin = SkinAdapter {
rootregion: YourSkin{}
}
After that you are able to add CSS for your custom contol
.your-control {
-fx-background-color:red;
}