Summary Edit

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 Edit

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
    [Rect {
        width: bind width
        height: bind height + 10
        stroke: green
        strokeWidth: 3
        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 {
            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

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.