Binding a Group ?

Question

Hi All,
what I'm trying to do is a simple Group binding. I.e. I start my application with nothing and then add a group to the Scene. Later, I'll want to destroy/remove this Group and add another Group.
If you imagine from a very simplistic point of view, I want a Group to appear after a few seconds, then remove this Group and add another dynamically (using opacity and keyframes to fade out and in each Group - which will require each Group to have an opacity of 0 to start with).
All the examples I've seen only change values inside a node (such as the URL for an image etc...), but what if I want to completely remove that ImageView Node, or on a greater scale, a whole Group?
Is this possible, or even better, am I not thinking of it the right way and is there a better way of doing it?
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.animation.Timeline;
import javafx.scene.Group;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.Cursor;
import javafx.animation.KeyFrame;
var groupA = Group {
               content: [
                  Rectangle {
                     width: 800
                     height: 50
                     fill: Color.BLUE
                     cursor: Cursor.HAND
var t1= Timeline {
     //repeatCount: Timeline.INDEFINITE
     keyFrames : [
            KeyFrame { time: 0s action: function(){ println("Hello at 0s") } },
            KeyFrame { time: 2s action: function():Void{ setMainNode(groupA) } },
            KeyFrame { time: 4s action: function() { println("Hello at 4s") } },
t1.play();
var mainGroup:Group;// = bind groupA;
function setMainNode(settingGroup:Group):Void{
   println("Setting mainGroup");
   mainGroup = settingGroup;
Stage {
    title: "Testies"
    scene: Scene {
        width: 800
        height: 600
        content: [
              mainGroup
}

Answer 1

Yep! the FadeTransition Basics was me too, that led me to where I am now... slightly even more confused! =)
I see what you're doing there and at first glance it looks really good. However, I still see a flicker of the second image at the very start (no doubt due to the 1ms fade out time), which leads me to wonder if the images were not directly on top of each other, would you notice this even more? I guess so.
I think there is no real way to "fade in" anything from 0 without that flicker using a fadeTransition (I notice you're using Windows, I'm using Linux, so maybe there is a difference between the display in that 1ms?), unless you explicitly set the opacity to 0 at the start?
To get around the flicker, I went this way (using the opacity and keyframes as I mentioned before. It's not nice as there are a lot of extra stuff you have to do like setting each Group to be opacity: 0.0 (or at least binding to the opacityState and being careful when you use it). Your way is definitely more elegant, but I just can't seem to get rid of that flicker (1ms?) :/
* Main.fx
* Created on 25-May-2010, 16:37:00
package testfading;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.animation.Timeline;
import javafx.scene.Group;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.Cursor;
var opacityStateTop = 0.0;
var opacityStateMiddle = 0.0;
//var groupAInstance = GroupA{opacityState: bind opacityStateTop}
//var groupA = groupAInstance.getGroupA();
//var groupBInstance = GroupB{opacityState: bind opacityStateTop}
//var groupB = groupBInstance.getGroupB();
//var groupCInstance = GroupC{opacityState: bind opacityStateMiddle}
//var groupC = groupCInstance.getGroupC();
var groupA = Group {
               content: [
                  Rectangle {
                     width: 800
                     height: 50
                     fill: Color.GREEN
                     cursor: Cursor.HAND
               opacity: bind opacityStateTop
   var groupB = Group {
               content: [
                  Rectangle {
                     width: 800
                     height: 50
                     fill: Color.RED
                     cursor: Cursor.HAND
               opacity: bind opacityStateTop
   var groupC = Group {
               content: [
                  Rectangle {
                     y: 50
                     width: 800
                     height: 50
                     fill: Color.BLUE
                     cursor: Cursor.HAND
               opacity: bind opacityStateMiddle
var groupNULL = Group {
               content: []
var t1= Timeline {
     //repeatCount: Timeline.INDEFINITE
     keyFrames : [
            // Set the top part
            KeyFrame { time: 0s action: function():Void{ setMainTop(groupA) } },
            // Fade in the top part after 2 seconds of nothing
            KeyFrame { time: 2s action: function():Void{ fadeInTop.playFromStart(); } },
            // Fade out top part after leaving fully visible for 2s
            KeyFrame { time: 6s action: function():Void{ fadeOutTop.playFromStart(); } },
            // Set the top and middle parts after full fade out of top
            KeyFrame { time: 8s action: function():Void{ setMainTop(groupB); setMainMiddle(groupC) } },
            // Fade in both top and middle parts
            KeyFrame { time: 8s action: function():Void{ fadeInTop.playFromStart(); fadeInMiddle.playFromStart();} },
t1.play();
var fadeInTop= Timeline {
     keyFrames : [
            KeyFrame {
               time: 1s
               values: [opacityStateTop => 1.0 tween Interpolator.LINEAR]
var fadeOutTop= Timeline {
     keyFrames : [
            KeyFrame {
               time: 1s
               values: [opacityStateTop => 0.0 tween Interpolator.LINEAR]
var fadeInMiddle= Timeline {
     keyFrames : [
            KeyFrame {
               time: 2s
               values: [opacityStateMiddle => 1.0 tween Interpolator.LINEAR]
var mainTop:Group;
var mainMiddle:Group;
function setMainMiddle(settingGroup:Group):Void{
   println("Setting mainMiddle.");
   mainMiddle = settingGroup;
function setMainTop(settingGroup:Group):Void{
   println("Setting mainTop.");
   mainTop = settingGroup;
Stage {
    title: "Testies"
    scene: Scene {
        width: 800
        height: 300
        content: bind [mainTop,mainMiddle]
}