Custom Node or Parent Node

Question

Hello,
I want to have a centered Text within a Rectangle.
What is the simplest way in JavaFX to do such thing?
Is the following code really to only solution for that kind?
public class Title extends CustomNode {
public var content:String;
public var width:Number = 400;
public var height: Number = 80;
var text:Text = Text{
    translateX: bind (width/2.0 - text.layoutBounds.width/2.0)
    translateY: bind (height - text.layoutBounds.height)/2.0 - text.layoutBounds.minY
    font: Font.font("Arial", FontWeight.BOLD, 24)
    textAlignment: TextAlignment.LEFT
    content: bind content
    fill: Color.WHITESMOKE
    effect: DropShadow {offsetX: 3 offsetY: 3 color: Color.WHITE radius: 10}
var rectangle:Rectangle = Rectangle{
    width: bind width
    height: bind height
    fill: Color.BLACK
override function create(): Node {
Group {
content: [
    rectangle,
    text
}Is the solution above best practice?
Is there any way to put the Text into a Rectangle as a subNode and position the text with "textAlignment: TextAlignment.CENTER" instead of using translateX,translateY ?
Or maybe I should make use of "javafx.geometry.BoundingBox" ? Is this the way to go?

Answer 1

That's, more or less, the most used way to do it. Which isn't hard, but a bit tedious to do, as you might have many variations on this theme...
Now, thinking twice about it, it is a job a good layout should do.
So I experimented a bit and here is my variation on your code:
class Title extends CustomNode
  public var title: String;
  public var back: Paint = Color.web('#223344');
  public var fore: Paint = Color.web('#88BBFF');
  public var width: Number;
  public var height: Number;
  public var marginX: Number = 20;
  public var marginY: Number = 10;
  def rect: Rectangle = Rectangle
    fill: back;
    width: bind width
    height: bind height
  def text: Text = Text
    font: Font.font("Arial", FontWeight.BOLD, 36)
    content: title
    fill: fore
  init
    if (not isInitialized(width))
      width = text.boundsInLocal.width + 2 * marginX;
    if (not isInitialized(height))
      height = text.boundsInLocal.height + 2 * marginY;
  override protected function create(): Node
    Stack
      content: [ rect, text ]
}By default, Stack centers its nodes, so finally it is a good choice. Perhaps it have even been made specifically for this usage, actually, since don't see many other practical usages for it...
Problem: if you add an effect (drop shadow as you did, reflection or other), Stack takes this effect in account when centering the node. :-(