Planet JFX
Register
(→‎Summary: add full code snippets)
m (Protected "Sweet Boxes": Excessive spamming: This is for a very old version of JFX; starting to retire the wiki. ([edit=sysop] (indefinite) [move=sysop] (indefinite)) [cascading])
 
(8 intermediate revisions by 4 users not shown)
Line 6: Line 6:
   
 
{| border="1"
 
{| border="1"
  +
|-
  +
! Code !! Preview
 
|-
 
|-
 
| <code><pre>
 
| <code><pre>
Line 39: Line 41:
 
== Code ==
 
== Code ==
   
  +
  +
  +
To work in JavaFXPad, add the following:
 
<code><pre>
 
<code><pre>
  +
Canvas {
import javafx.ui.*;
 
  +
content: SweetBox {
import javafx.ui.canvas.*;
 
  +
color: red
import javafx.ui.filter.*;
 
  +
roundness: 1
  +
x: 10
  +
y: 10
  +
w: 200
  +
h: 40
  +
}
  +
}
  +
</pre></code>
   
  +
CustomNode
function lighter(c: Color, k: Number) =
 
  +
<code><pre>
Color
 
  +
//new API
{
 
  +
import javafx.application.Frame;
red: (1 - (1 - c.red) * k)
 
  +
import javafx.application.Stage;
green: (1 - (1 - c.green) * k)
 
  +
import javafx.scene.CustomNode;
blue: (1 - (1 - c.blue) * k)
 
  +
import javafx.scene.Node;
opacity: c.opacity
 
  +
import javafx.scene.Group;
};
 
  +
import javafx.scene.paint.LinearGradient;
  +
import javafx.scene.paint.RadialGradient;
  +
import javafx.scene.geometry.Rectangle;
  +
import javafx.scene.paint.Stop;
  +
import javafx.scene.paint.Color;
  +
import javafx.scene.effect.GaussianBlur;
   
function darker(c: Color, k: Number) =
 
Color
 
{
 
red: c.red * k
 
green: c.green * k
 
blue: c.blue * k
 
opacity: c.opacity
 
};
 
   
   
  +
function lighter(c: Color, k: Number)
class SweetBox extends CompositeNode
 
 
{
 
{
attribute color: Color;
+
Color
  +
{
attribute roundness: Number;
 
  +
red: bind (1 - (1 - c.red) * k)
  +
green: bind (1 - (1 - c.green) * k)
  +
blue: bind (1 - (1 - c.blue) * k)
  +
opacity: bind c.opacity
  +
};
  +
}
   
  +
function darker(c: Color, k: Number)
attribute inset: Number;
 
  +
{
  +
Color
  +
{
  +
red: bind c.red * k
  +
green: bind c.green * k
  +
blue: bind c.blue * k
  +
opacity: bind c.opacity
  +
};
  +
}
  +
public class SweetBox extends CustomNode
  +
{
  +
attribute color: Color;
  +
attribute roundness: Number;
  +
attribute inset: Number = 1;
  +
attribute x: Number;
  +
attribute y: Number;
  +
attribute w: Number;
  +
attribute h: Number;
   
attribute x: Number;
+
function frame(x:Number, y: Number, w:Number, h:Number)
  +
{
attribute y: Number;
 
attribute w: Number;
+
this.x = x;
attribute h: Number;
+
this.y = y;
  +
this.w = w;
 
  +
this.h = h;
operation frame(x:Number, y: Number, w:Number, h:Number);
 
  +
}
  +
  +
public function create(): Node
  +
{
  +
Group
  +
{
  +
effect:GaussianBlur {radius: 2}
  +
content:
  +
[
  +
Rectangle
  +
{
  +
x: bind x
  +
y: bind y
  +
width: bind w
  +
height: bind h
  +
arcHeight: bind roundness * h
  +
arcWidth: bind roundness * h
  +
fill: bind LinearGradient
  +
{
  +
startX: x,
  +
startY: y,
  +
endX: x,
  +
endY: y + h
  +
proportional: false;
  +
stops:
  +
[
  +
Stop {offset: 0.0 color: darker(color, 0.5)},
  +
Stop {offset: 1.0 color: color}
  +
]
  +
//spreadMethod: SpreadMethod.PAD
  +
}
  +
  +
  +
  +
},
  +
Rectangle
  +
{
  +
x: bind x+inset
  +
y: bind y+inset
  +
width: bind w-2*inset
  +
height: bind h-2*inset
  +
arcHeight: bind roundness * h
  +
arcWidth: bind roundness * h
  +
opacity: 0.8
  +
fill: bind LinearGradient
  +
{
  +
  +
//startX: 0, startY: 0, endX: 0, endY: 0.5
  +
startX:x
  +
startY:y
  +
endX:x
  +
endY:y + h
  +
proportional: false;
  +
stops:
  +
[
  +
Stop {offset: 0.0 color: Color.WHITE},
  +
Stop {offset: 1.0 color: lighter(color, 0.8)}
  +
]
  +
//spreadMethod: SpreadMethod.PAD
  +
}
  +
clip: Rectangle
  +
{
  +
x: bind x+inset
  +
y: bind y+inset
  +
width: bind w-2*inset
  +
height: bind (h-2*inset) /2
  +
arcHeight: bind roundness * h /3
  +
arcWidth: bind roundness * h /3
  +
}
  +
  +
}
  +
  +
]
  +
  +
};
  +
}
  +
 
}
 
}
   
attribute SweetBox.inset = 1;
 
   
  +
operation SweetBox.frame(x:Number, y: Number, w:Number, h:Number)
 
  +
  +
  +
  +
public class Model
 
{
 
{
this.x = x;
+
public attribute boxColor:Color;
this.y = y;
 
this.w = w;
 
this.h = h;
 
 
}
 
}
   
  +
var model1 = Model{};
function SweetBox.composeNode() =
 
  +
model1.boxColor = Color.LIME;
Group
 
{
+
  +
filter: [GaussianBlur {radius: 2}]
 
  +
Frame {
content:
 
[
+
visible: true
Rect
+
stage:
{
+
Stage
x: bind x
+
{
y: bind y
+
content:[SweetBox {
width: bind w
+
color: bind model1.boxColor
height: bind h
+
roundness: 1
arcHeight: bind roundness * h
+
x: 10
arcWidth: bind roundness * h
+
y: 10
fill: bind LinearGradient
+
w: 200
{
+
h: 40
x1: 0, y1: 0, x2: 0, y2: 1
+
}
stops:
+
]
[
+
}
  +
Stop {offset: 0.0 color: darker(color, 0.5)},
 
  +
}
Stop {offset: 1.0 color: color}
 
]
 
spreadMethod: PAD
 
}
 
},
 
Clip
 
{
 
shape: Rect
 
{
 
x: bind x+inset
 
y: bind y+inset
 
width: bind w-2*inset
 
height: bind (h-2*inset) /2
 
arcHeight: bind roundness * h /3
 
arcWidth: bind roundness * h /3
 
}
 
content: Rect
 
{
 
x: bind x+inset
 
y: bind y+inset
 
width: bind w-2*inset
 
height: bind h-2*inset
 
arcHeight: bind roundness * h
 
arcWidth: bind roundness * h
 
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: lighter(color, 0.8)}
 
]
 
spreadMethod: PAD
 
}
 
}
 
}
 
]
 
};
 
 
</pre></code>
 
</pre></code>
   
  +
To work in JavaFXPad, add the following:
 
  +
Rewritted with New syntax and binding.
 
<code><pre>
 
<code><pre>
  +
package javafxapplication1;
Canvas {
 
  +
content: SweetBox {
 
  +
import javafx.ui.*;
color: red
 
  +
import javafx.ui.canvas.*;
  +
import javafx.ui.filter.*;
  +
  +
//updated by devantor
  +
function lighter(c: Color, k: Number)
  +
{
  +
Color
  +
{
  +
red: bind (1 - (1 - c.red) * k)
  +
green: bind (1 - (1 - c.green) * k)
  +
blue: bind (1 - (1 - c.blue) * k)
  +
opacity: bind c.opacity
  +
};
  +
}
  +
  +
function darker(c: Color, k: Number)
  +
{
  +
Color
  +
{
  +
red: bind c.red * k
  +
green: bind c.green * k
  +
blue: bind c.blue * k
  +
opacity: bind c.opacity
  +
};
  +
}
  +
public class SweetBox extends CompositeNode
  +
{
  +
attribute color: Color;
  +
attribute roundness: Number;
  +
attribute inset: Number = 1;
  +
attribute x: Number;
  +
attribute y: Number;
  +
attribute w: Number;
  +
attribute h: Number;
  +
  +
function frame(x:Number, y: Number, w:Number, h:Number)
  +
{
  +
this.x = x;
  +
this.y = y;
  +
this.w = w;
  +
this.h = h;
  +
}
  +
  +
function composeNode()
  +
{
  +
Group
  +
{
  +
filter: GaussianBlur {radius: 2}
  +
content:
  +
[
  +
Rect
  +
{
  +
x: bind x
  +
y: bind y
  +
width: bind w
  +
height: bind h
  +
arcHeight: bind roundness * h
  +
arcWidth: bind roundness * h
  +
fill: bind LinearGradient
  +
{
  +
startX: x,
  +
startY: y,
  +
endX: x,
  +
endY: y + h
  +
stops:
  +
[
  +
Stop {offset: 0.0 color: darker(color, 0.5)},
  +
Stop {offset: 1.0 color: color}
  +
]
  +
spreadMethod: SpreadMethod.PAD
  +
}
  +
},
  +
Clip
  +
{
  +
shape: Rect
  +
{
  +
x: bind x+inset
  +
y: bind y+inset
  +
width: bind w-2*inset
  +
height: bind (h-2*inset) /2
  +
arcHeight: bind roundness * h /3
  +
arcWidth: bind roundness * h /3
  +
}
  +
content: Rect
  +
{
  +
x: bind x+inset
  +
y: bind y+inset
  +
width: bind w-2*inset
  +
height: bind h-2*inset
  +
arcHeight: bind roundness * h
  +
arcWidth: bind roundness * h
  +
opacity: 0.8
  +
fill: bind LinearGradient
  +
{
  +
  +
//startX: 0, startY: 0, endX: 0, endY: 0.5
  +
startX:x
  +
startY:y
  +
endX:x
  +
endY:y + h
  +
stops:
  +
[
  +
Stop {offset: 0.0 color: Color.WHITE},
  +
Stop {offset: 1.0 color: lighter(color, 0.8)}
  +
]
  +
spreadMethod: SpreadMethod.PAD
  +
}
  +
}
  +
}
  +
]
  +
};
  +
}
  +
  +
}
  +
  +
public class Model
  +
{
  +
public attribute boxColor:Color;
  +
}
  +
  +
var model1 = Model{};
  +
  +
Canvas {
  +
content: [SweetBox {
  +
color: bind model1.boxColor
 
roundness: 1
 
roundness: 1
 
x: 10
 
x: 10
Line 159: Line 359:
 
w: 200
 
w: 200
 
h: 40
 
h: 40
}
+
},
  +
View{ content: Button {
  +
text: "Press Me"
  +
action: function() {
  +
model1.boxColor = Color.LIME;
  +
}
  +
}
  +
},
  +
  +
]
 
}
 
}
  +
 
</pre></code>
 
</pre></code>
   
  +
Old version
[[Category:Code Example]] [[Category:Widget]]
 
  +
<code><pre>
  +
import javafx.ui.*;
  +
import javafx.ui.canvas.*;
  +
import javafx.ui.filter.*;
  +
  +
function lighter(c: Color, k: Number) =
  +
Color
  +
{
  +
red: (1 - (1 - c.red) * k)
  +
green: (1 - (1 - c.green) * k)
  +
blue: (1 - (1 - c.blue) * k)
  +
opacity: c.opacity
  +
};
  +
  +
function darker(c: Color, k: Number) =
  +
Color
  +
{
  +
red: c.red * k
  +
green: c.green * k
  +
blue: c.blue * k
  +
opacity: c.opacity
  +
};
  +
  +
class SweetBox extends CompositeNode
  +
{
  +
attribute color: Color;
  +
attribute roundness: Number;
  +
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;
  +
  +
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
  +
{
  +
filter: [GaussianBlur {radius: 2}]
  +
content:
  +
[
  +
Rect
  +
{
  +
x: bind x
  +
y: bind y
  +
width: bind w
  +
height: bind h
  +
arcHeight: bind roundness * h
  +
arcWidth: bind roundness * h
  +
fill: bind LinearGradient
  +
{
  +
x1: 0, y1: 0, x2: 0, y2: 1
  +
stops:
  +
[
  +
Stop {offset: 0.0 color: darker(color, 0.5)},
  +
Stop {offset: 1.0 color: color}
  +
]
  +
spreadMethod: PAD
  +
}
  +
},
  +
Clip
  +
{
  +
shape: Rect
  +
{
  +
x: bind x+inset
  +
y: bind y+inset
  +
width: bind w-2*inset
  +
height: bind (h-2*inset) /2
  +
arcHeight: bind roundness * h /3
  +
arcWidth: bind roundness * h /3
  +
}
  +
content: Rect
  +
{
  +
x: bind x+inset
  +
y: bind y+inset
  +
width: bind w-2*inset
  +
height: bind h-2*inset
  +
arcHeight: bind roundness * h
  +
arcWidth: bind roundness * h
  +
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: lighter(color, 0.8)}
  +
]
  +
spreadMethod: PAD
  +
}
  +
}
  +
}
  +
]
  +
};
  +
</pre></code>
  +
[[Category:Code Example]]
  +
[[Category:Widget]]

Latest revision as of 15:39, 16 August 2011

Summary

See this thread in the mailing lists.

Here is a pretty box widget. Adjust the color attribute of a SweetBox when you add it for different results.

Code Preview
Canvas {
    content: SweetBox {
        color: red
        roundness: 1
        x: 10
        y: 10
        w: 200
        h: 40
    }
}
Preview
Canvas {
    content: SweetBox {
        color: gray
        roundness: 1
        x: 10
        y: 10
        w: 200
        h: 40
    }
}

note: width and height are a bit off

Preview

Code

To work in JavaFXPad, add the following:

Canvas {
    content: SweetBox {
        color: red
        roundness: 1
        x: 10
        y: 10
        w: 200
        h: 40
    }
}

CustomNode

//new API
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.RadialGradient;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;



function lighter(c: Color, k: Number)
{
    Color
    {
        red: bind (1 - (1 - c.red) * k)
        green: bind (1 - (1 - c.green) * k)
        blue: bind (1 - (1 - c.blue) * k)
        opacity: bind c.opacity
    };
}

function darker(c: Color, k: Number) 
{
    Color
    {
        red: bind c.red * k
        green: bind c.green * k
        blue: bind c.blue * k
        opacity: bind c.opacity
    };
}
public class SweetBox extends CustomNode
{
    attribute color: Color;
    attribute roundness: Number;
    attribute inset: Number = 1;
    attribute x: Number;
    attribute y: Number;
    attribute w: Number;
    attribute h: Number;

    function frame(x:Number, y: Number, w:Number, h:Number)
    {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }
    
    public function create(): Node
    {
        Group
        {
            effect:GaussianBlur {radius: 2}
            content:
            [
                Rectangle
                {
                    x: bind x
                    y: bind y
                    width: bind w
                    height: bind h
                    arcHeight: bind roundness * h
                    arcWidth: bind roundness * h
                    fill: bind LinearGradient
                    {
                        startX: x, 
                        startY: y, 
                        endX: x, 
                        endY: y + h
                        proportional: false;
                        stops:
                        [
                            Stop {offset: 0.0 color: darker(color, 0.5)},
                            Stop {offset: 1.0 color: color}
                        ]
                        //spreadMethod: SpreadMethod.PAD
                    }
                    
                   
                        
                },
                Rectangle
                    {
                        x: bind x+inset
                        y: bind y+inset
                        width: bind w-2*inset
                        height: bind h-2*inset
                        arcHeight: bind roundness * h
                        arcWidth: bind roundness * h
                        opacity: 0.8
                        fill: bind LinearGradient
                        {
                            
                            //startX: 0, startY: 0, endX: 0, endY: 0.5
                            startX:x
                            startY:y
                            endX:x
                            endY:y + h
                            proportional: false;
                            stops:
                            [
                                Stop {offset: 0.0 color: Color.WHITE},
                                Stop {offset: 1.0 color: lighter(color, 0.8)}
                            ]
                            //spreadMethod: SpreadMethod.PAD
                        }
                         clip: Rectangle
                         {
                            x: bind x+inset
                            y: bind y+inset
                            width: bind w-2*inset
                            height: bind (h-2*inset) /2
                            arcHeight: bind roundness * h /3
                            arcWidth: bind roundness * h /3
                         }
                        
                       }
                
            ]
                    
        };
    }
    
}





    
public class Model
{
     public attribute boxColor:Color;
}

var model1 = Model{};
model1.boxColor = Color.LIME;
    
    
    Frame {
        visible: true
        stage:
            Stage
            {
                content:[SweetBox {
                    color: bind model1.boxColor
                    roundness: 1
                    x: 10
                    y: 10
                    w: 200
                    h: 40
                    }
                    ]
            }
    
    }


Rewritted with New syntax and binding.

package javafxapplication1;

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

//updated by devantor
function lighter(c: Color, k: Number)
{
    Color
    {
        red: bind (1 - (1 - c.red) * k)
        green: bind (1 - (1 - c.green) * k)
        blue: bind (1 - (1 - c.blue) * k)
        opacity: bind c.opacity
    };
}

function darker(c: Color, k: Number) 
{
    Color
    {
        red: bind c.red * k
        green: bind c.green * k
        blue: bind c.blue * k
        opacity: bind c.opacity
    };
}
public class SweetBox extends CompositeNode
{
    attribute color: Color;
    attribute roundness: Number;
    attribute inset: Number = 1;
    attribute x: Number;
    attribute y: Number;
    attribute w: Number;
    attribute h: Number;

    function frame(x:Number, y: Number, w:Number, h:Number)
    {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }
    
    function composeNode() 
    {
        Group
        {
            filter: GaussianBlur {radius: 2}
            content:
            [
                Rect
                {
                    x: bind x
                    y: bind y
                    width: bind w
                    height: bind h
                    arcHeight: bind roundness * h
                    arcWidth: bind roundness * h
                    fill: bind LinearGradient
                    {
                        startX: x, 
                        startY: y, 
                        endX: x, 
                        endY: y + h
                        stops:
                        [
                            Stop {offset: 0.0 color: darker(color, 0.5)},
                            Stop {offset: 1.0 color: color}
                        ]
                        spreadMethod: SpreadMethod.PAD
                    }
                },
                Clip
                {
                    shape: Rect
                    {
                        x: bind x+inset
                        y: bind y+inset
                        width: bind w-2*inset
                        height: bind (h-2*inset) /2
                        arcHeight: bind roundness * h /3
                        arcWidth: bind roundness * h /3
                    }
                    content: Rect
                    {
                        x: bind x+inset
                        y: bind y+inset
                        width: bind w-2*inset
                        height: bind h-2*inset
                        arcHeight: bind roundness * h
                        arcWidth: bind roundness * h
                        opacity: 0.8
                        fill: bind LinearGradient
                        {
                            
                            //startX: 0, startY: 0, endX: 0, endY: 0.5
                            startX:x
                            startY:y
                            endX:x
                            endY:y + h
                            stops:
                            [
                                Stop {offset: 0.0 color: Color.WHITE},
                                Stop {offset: 1.0 color: lighter(color, 0.8)}
                            ]
                            spreadMethod: SpreadMethod.PAD
                        }
                    }
                }
            ]
        };
    }
    
}
    
public class Model
{
     public attribute boxColor:Color;
}

var model1 = Model{};
    
    Canvas {
    content: [SweetBox {
        color: bind model1.boxColor
        roundness: 1
        x: 10
        y: 10
        w: 200
        h: 40
        },
        View{ content: Button {
                   text: "Press Me"
                   action: function() {
                     model1.boxColor = Color.LIME;
                   }
                 }
            },
        
    ]
}

Old version

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

function lighter(c: Color, k: Number) =
    Color
    {
        red: (1 - (1 - c.red) * k)
        green: (1 - (1 - c.green) * k)
        blue: (1 - (1 - c.blue) * k)
        opacity: c.opacity
    };

function darker(c: Color, k: Number) =
    Color
    {
        red: c.red * k
        green: c.green * k
        blue: c.blue * k
        opacity: c.opacity
    };

class SweetBox extends CompositeNode
{
    attribute color: Color;
    attribute roundness: Number;
    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;

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
    {
        filter: [GaussianBlur {radius: 2}]
        content:
        [
            Rect
            {
                x: bind x
                y: bind y
                width: bind w
                height: bind h
                arcHeight: bind roundness * h
                arcWidth: bind roundness * h
                fill: bind LinearGradient
                {
                    x1: 0, y1: 0, x2: 0, y2: 1
                    stops:
                    [
                        Stop {offset: 0.0 color: darker(color, 0.5)},
                        Stop {offset: 1.0 color: color}
                    ]
                    spreadMethod: PAD
                }
            },
            Clip
            {
                shape: Rect
                {
                    x: bind x+inset
                    y: bind y+inset
                    width: bind w-2*inset
                    height: bind (h-2*inset) /2
                    arcHeight: bind roundness * h /3
                    arcWidth: bind roundness * h /3
                }
                content: Rect
                {
                    x: bind x+inset
                    y: bind y+inset
                    width: bind w-2*inset
                    height: bind h-2*inset
                    arcHeight: bind roundness * h
                    arcWidth: bind roundness * h
                    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: lighter(color, 0.8)}
                        ]
                        spreadMethod: PAD
                    }
                }
            }
        ]
    };