Summary[]
See this thread in the mailing lists.
RolloverGrid is a grid of black squares that glow red when you move the cursor over them. As you scrub the cursor they will slowly fade back to black, creating an interesting effect.
Code (Preview SDK)[]
package javafxapplication1;
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
class CellModel
{
attribute opacity:Number = 0.0;
attribute color:Color;
attribute anim =
Timeline {
repeatCount: 1
// Key Frames
var begin = at (0s) {
opacity => 1.0 tween Interpolator.LINEAR;
color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity};
}
var mid = at (0.5s) {
opacity => 0.5 tween Interpolator.LINEAR;
color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity};
}
var end = at (1s) {
opacity => 0.0 tween Interpolator.LINEAR;
color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity};
}
keyFrames: [begin,mid,end]
}//Timeline;*/
}
class Cell extends Rect {
attribute cellModel:CellModel;
override attribute fill = bind cellModel.color;
override attribute onMouseEntered = function (e: CanvasMouseEvent){
cellModel.anim.start();
System.out.println("Test {cellModel.opacity}");
}
}
class RolloverGrid extends CompositeNode {
function composeNode() {
var cells: Cell[];
for(j in [0..10]) {
for(i in [0..30]) {
var cellModel = CellModel {}
insert Cell { x: i * 21, y: j * 21, width:20, height:20, cellModel: bind cellModel} into cells;
}
}
return Group{ content: [Rect { x: 0, y: 0, width: 31 * 21, height: 11 * 21, fill: Color.BLACK},cells] };
}
}
Frame {
content:
Canvas { content: RolloverGrid { } }
visible: true
}
==
Headline text[]
==