Problem with adding a Node in a Scene from a Node initialization

Question

Hi all! I am trying to create a custom Button, then I create a class that extends Rectangle, then this class add a Text on the button... but the Text is never shown!
import javafx.scene.Cursor;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.effect.DropShadow;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.input.MouseEvent;
public class Button extends Rectangle {
    public var text: String;
    postinit {
        cursor = Cursor.HAND;
        width = 90;
        height = 25;
        arcWidth = 15;
        arcHeight = 15;
        effect = DropShadow {radius: 6};
        fill = LinearGradient {
            startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
            stops: [
                Stop {offset: 0.0, color: Color.WHITE}
                Stop {offset: 1.0, color: Color.LIGHTGRAY}
        insert Text {
            x: this.x + 5, y: this.y + 5
            content: text
            font: Font {size: 13}
        } into scene.content;
        onMouseEntered = function(e: MouseEvent): Void {
            fill = LinearGradient {
                startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
                stops: [
                    Stop {offset: 0.2, color: Color.WHITE}
                    Stop {offset: 1.0, color: Color.LIGHTGRAY}
        onMouseExited = function(e: MouseEvent): Void {
            fill = LinearGradient {
                startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
                stops: [
                    Stop {offset: 0.0, color: Color.WHITE}
                    Stop {offset: 1.0, color: Color.LIGHTGRAY}
        onMousePressed = function(e: MouseEvent): Void {
            fill = LinearGradient {
                startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
                stops: [
                    Stop {offset: 0.0, color: Color.LIGHTGRAY}
                    Stop {offset: 1.0, color: Color.WHITE}
        onMouseReleased = function(e: MouseEvent): Void {
            fill = LinearGradient {
                startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
                stops: [
                    Stop {offset: 0.0, color: Color.WHITE}
                    Stop {offset: 1.0, color: Color.LIGHTGRAY}
}If I print scene.content from this class, there is no nodes in the scene! If I print content from the scene, the output show only the button, but not the Text...
Can somebody tell me why this doesn't works?

Answer 1

Based on your code, do you even need to extend or create a CustomNode? I believe you can accomplish your desired result by adding a stylesheet to your scene and then specify a styleClass for a basic button.
Here are a few snippets:
The scene:
scene: Scene {
                stylesheets: uiCSS
                content: [ //your button ]               ]
            }The button:
Button{ styleClass: "myButton"}The css:
.myButton:hover{
   -fx-text-fill: linear (0%,0%) to (0%,100%)
        stops (0%, rgb(220, 220, 220)) (25%, rgb(190, 190, 190))(50%, rgb(190, 190, 190))(100%, rgb(220, 220, 220));
.myButton:pressed{
  -fx-text-fill: linear (0%,0%) to (0%,100%)
        stops (0%, rgb(100, 100, 100)) (25%, rgb(100, 100, 100))(50%, rgb(100, 100, 100))(100%, rgb(100,100, 100));
}You can modify the look and feel of any JavaFX control in this manner. An important resource to access is the caspian.css which can be found in the JDK library in the javafx-ui-controls.jar under the com.sun.javafx.scene.control.skin.caspian. You can essentially copy and paste any of the controls css into your css file and modify as desired. This allows you to skin your components without having to change any of the behavior which becomes a big hassle.
Hope this helps.