Bordered Wrapping Label

Summary

See this thread in the mailing lists for the evolution of this widget.

This example takes advantage of binding in order to get a rectangle that borders a label. It also makes use of some of the currentXX fields available on Nodes to change information.

Code

import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;

class MyLabel extends CompositeNode
{
    attribute width: Number;
    attribute height: Number;
    attribute text: String;
}

function MyLabel.composeNode() = Group
{
    content:
    [Rect {
        width: bind width
        height: bind height + 10
        stroke: green
        strokeWidth: 3
    },
    View
    {
        size: bind select {width: w-10} from w in width
        transform: translate(5, 5)
        content: Label
        {
            text: bind text
            font: Font {face: VERDANA, style: [ITALIC, BOLD], size: 30}
            foreground: red
        }
        currentHeight: bind height // as currentHeight changes,
        //height will be updated
        }]
};

var label = MyLabel { text: "Hola Mundo", width: 100 };

return Frame {
    visible: true
    content: Canvas {
        content: Group {
            content:
            [label,
            View {
                transform: translate(200, 50)
                
                content: Button {
                    text: "Click Me!"
                    action: operation() {
                        label.text = "Globe trotter";
                    }
                }
            },
            View {
                transform: translate(200, 80)
                
                content: Slider {
                    min: 0
                    max: 200
                    value: bind label.width
                    
                }
            },
            ]
        }
    }
};