Fandom

Planet JFX

Netbeans-style Frames

118pages on
this wiki
Add New Page
Talk4 Share

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.

Summary Edit

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.



Filechooser
Code
Edit

import javafx.ui.*;

import javafx.ui.canvas.*;

import javafx.ui.filter.*;
8764743-fotos-caballos-g

Regist



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
    }
    ]
}

Also on Fandom

Random Wiki