Changes: Netbeans-style Frames

Revision as of 16:08, 6 July 2010

Summary

See this thread in the mailing lists.

This example builds on the Sweet Boxes example to make them look like internal frames. It also makes use of mouse events to change the frame titles as the mouse enters and exits them.

Code

import javafx.ui.*;

import javafx.ui.canvas.*;

import javafx.ui.filter.*;

operation brighter( c: Color ) {

var newColor = c.getColor().brighter();

return rgba:Color(newColor.getRed(), newColor.getGreen(), newColor.getBlue(), newColor.getAlpha());

}

operation darker( c: Color ) {

var newColor = c.getColor().darker();

return rgba:Color(newColor.getRed(), newColor.getGreen(), newColor.getBlue(), newColor.getAlpha());

}

class SweetBox extends CompositeNode

{

attribute color: Color;

attribute roundness: Number;

attribute title: String;

attribute inset: Number;

attribute x: Number;

attribute y: Number;

attribute w: Number;

attribute h: Number;

operation frame(x:Number, y: Number, w:Number, h:Number);

}

attribute SweetBox.inset = 1;

attribute SweetBox.roundness = 1.0;

attribute SweetBox.title = "Unknown";

operation SweetBox.frame(x:Number, y: Number, w:Number, h:Number)

{

this.x = x;

this.y = y;

this.w = w;

this.h = h;

}

function SweetBox.composeNode() =

Group

{

var arcSize = 30

var titleBarHeight = 20

content:

[ Rect {

x: bind x

y: bind y

width: bind w

height: bind h

arcHeight: bind roundness * arcSize

arcWidth: bind roundness * arcSize

fill: white

stroke: black

onMouseEntered: operation( e ) {

color = brighter( color );

onMouseExited: operation( e ) {

color = darker( color );

},

Add {

shape1: Rect {

x: bind x

y: bind y

width: bind w

height: titleBarHeight

arcHeight: bind roundness * arcSize

arcWidth: bind roundness * arcSize

shape2: Rect {

x: bind x

y: bind y + titleBarHeight/2

width: bind w

height: titleBarHeight/2

fill: bind LinearGradient

x1: 0, y1: 0, x2: 0, y2: 1

stops:

Stop {offset: 0.0 color: bind darker( darker( darker

(color) ) )},

Stop {offset: 1.0 color: bind brighter( brighter( brighter

(color) ) )}

stroke: bind darker( color )

strokeWidth: 1

},

Clip

shape: Rect

x: bind x+inset

y: bind y+inset

width: bind w-2*inset

height: (titleBarHeight - 2*inset) / 2

arcHeight: bind roundness * arcSize

arcWidth: bind roundness * arcSize

content: Rect

x: bind x+inset

y: bind y+inset

width: bind w-2*inset

height: titleBarHeight - 2*inset

arcHeight: bind roundness * arcSize

arcWidth: bind roundness * arcSize

opacity: 0.8

fill: bind LinearGradient

x1: 0, y1: 0, x2: 0, y2: 0.5

stops:

Stop {offset: 0.0 color: white},

Stop {offset: 1.0 color: bind brighter( color )}

},

Text { content: bind title, x: bind x + 10, y: bind y + 5, fill:

white } ]

};

Canvas {

content: [

Rect {

x: 0

y: 0

width: 1000

height: 400

fill: rgb(105, 133, 170)

},

SweetBox {

color: rgb(48, 68, 105)

title: "Kalender"

x: 10

y: 10

w: 280

h: 180

},

SweetBox {

color: rgb(48, 68, 105)

title: "Nachrichten"

x: 340

y: 10

w: 280

h: 180

},

SweetBox {

color: rgb(48, 68, 105)

title: "Schreibfeld"

x: 10

y: 200

w: 620

h: 180

}

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

operation brighter( c: Color ) {
    var newColor = c.getColor().brighter();
    return rgba:Color(newColor.getRed(), newColor.getGreen(), newColor.getBlue(), newColor.getAlpha());
}

operation darker( c: Color ) {
    var newColor = c.getColor().darker();
    return rgba:Color(newColor.getRed(), newColor.getGreen(), newColor.getBlue(), newColor.getAlpha());
}

class SweetBox extends CompositeNode
{
    attribute color: Color;
    attribute roundness: Number;
    attribute title: String;
    
    attribute inset: Number;
    
    attribute x: Number;
    attribute y: Number;
    attribute w: Number;
    attribute h: Number;
    
    operation frame(x:Number, y: Number, w:Number, h:Number);
}

attribute SweetBox.inset = 1;
attribute SweetBox.roundness = 1.0;
attribute SweetBox.title = "Unknown";

operation SweetBox.frame(x:Number, y: Number, w:Number, h:Number)
{
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}

function SweetBox.composeNode() =
Group
{
    var arcSize = 30
    var titleBarHeight = 20
    content:
    [ Rect {
        x: bind x
        y: bind y
        width: bind w
        height: bind h
        arcHeight: bind roundness * arcSize
        arcWidth: bind roundness * arcSize
        fill: white
        stroke: black
        onMouseEntered: operation( e ) {
            color = brighter( color );
        }
        onMouseExited: operation( e ) {
            color = darker( color );
        }
    },
    Add {
        shape1: Rect {
            x: bind x
            y: bind y
            width: bind w
            height: titleBarHeight
            arcHeight: bind roundness * arcSize
            arcWidth: bind roundness * arcSize
        }
        shape2: Rect {
            x: bind x
            y: bind y + titleBarHeight/2
            width: bind w
            height: titleBarHeight/2
        }
        fill: bind LinearGradient
        {
            x1: 0, y1: 0, x2: 0, y2: 1
            stops:
            [
            Stop {offset: 0.0 color: bind darker( darker( darker
                (color) ) )},
            Stop {offset: 1.0 color: bind brighter( brighter( brighter
                (color) ) )}
            ]
        }
        stroke: bind darker( color )
        strokeWidth: 1
    },
    Clip
    {
        shape: Rect
        {
            x: bind x+inset
            y: bind y+inset
            width: bind w-2*inset
            height: (titleBarHeight - 2*inset) / 2
            arcHeight: bind roundness * arcSize
            arcWidth: bind roundness * arcSize
        }
        content: Rect
        {
            x: bind x+inset
            y: bind y+inset
            width: bind w-2*inset
            height: titleBarHeight - 2*inset
            arcHeight: bind roundness * arcSize
            arcWidth: bind roundness * arcSize
            opacity: 0.8
            fill: bind LinearGradient
            {
                x1: 0, y1: 0, x2: 0, y2: 0.5
                stops:
                [
                Stop {offset: 0.0 color: white},
                Stop {offset: 1.0 color: bind brighter( color )}
                ]
            }
        }
    },
    Text { content: bind title, x: bind x + 10, y: bind y + 5, fill:
        white } ]
};

Canvas {
    content: [
    Rect {
        x: 0
        y: 0
        width: 1000
        height: 400
        fill: rgb(105, 133, 170)
    },
    SweetBox {
        color: rgb(48, 68, 105)
        title: "Kalender"
        x: 10
        y: 10
        w: 280
        h: 180
    },
    SweetBox {
        color: rgb(48, 68, 105)
        title: "Nachrichten"
        x: 340
        y: 10
        w: 280
        h: 180
    },
    SweetBox {
        color: rgb(48, 68, 105)
        title: "Schreibfeld"
        x: 10
        y: 200
        w: 620
        h: 180
    }
    ]
}