NavMenu

Summary

See this thread in the mailing lists.

NavMenu is a simple website style navigation menu. It has four buttons that hang off the top of your screen. They change color and move down slightly when you move over them. I can't figure out how to center the text, though. Text seems to auto-size itself.

Code

import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;

class NavItem extends Group {
    attribute x : Number;
    attribute y : Number;
    attribute bg : Paint;
}

attribute NavItem.y = -10;
attribute NavItem.x = 0;
attribute NavItem.transform = bind [translate(x, y)];
attribute NavItem.bg = Color{red:0.5};

attribute NavItem.content = [
        Rect {x: 0, y: 0, width: 50, height: 50, arcWidth: 5, arcHeight: 5, fill: bind bg,
            onMouseEntered : operation(e) {
                y = [y .. -2] dur 250;
                bg = Color{red:0.8,green:0.6};
            }
            onMouseExited : operation(e) {
                y = [y .. -10] dur 250;
                bg = Color{red:0.5};
            }
        },
        Text { var: me, content: "Java", x: 10, y: 25, fill: white, font: new Font("Tahoma", "BOLD", 15)}
    ];

var m1 = new NavItem { x: 5};
var m2 = new NavItem { x:60};
var m3 = new NavItem { x:115};
var m4 = new NavItem { x:170};


Frame {
    onClose: operation() {System.exit(0);}
    title: "Four Squares"
    width: 300
    height: 300
    content: RootPane {
        background: white
        content: Canvas {
            content: Group {
                content: [m1,m2,m3,m4,
                    Rect {width: 230, height: 20, fill: Color{red: 0.3},
                        arcWidth: 20, arcHeight: 20, y: -10 }
                ]
                transform : [ translate(50,0)]
            }
        }
    }
    visible: true
}