Planet JFX
Register
Line 9: Line 9:
 
== Code ==
 
== Code ==
   
  +
import javafx.ui.*;
<code><pre>
 
  +
  +
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
  +
  +
}
  +
  +
]
  +
  +
<code>}<pre>
 
import javafx.ui.*;
 
import javafx.ui.*;
 
import javafx.ui.canvas.*;
 
import javafx.ui.canvas.*;

Revision as of 18:05, 25 May 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.

Preview

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