This discussion is archived
10 Replies Latest reply: Jun 22, 2011 5:15 AM by jojorabbit RSS

Transition between VBox

861530 Newbie
Currently Being Moderated
I have a stack container consists of 2 VBox like var form1: VBox, var form2:VBox

scene{
content:[
Stack{    content:[ form1,form2] }]}

using timeline ,tween interpolator i want to make a transition from the form1 to form2 while clicking a button at a duration

am figuring out the exact VBox values assigned to the Timeline values inorder to take effect
  • 1. Re: Transition between VBox
    jojorabbit Explorer
    Currently Being Moderated
    Hi,
    see this http://jojorabbitjavafxblog.wordpress.com/2011/06/17/deck-pane-control/ maybe it will help you, if it is javaFX 1.3 see link (inspired by) in blog it worked for me in 1.3 long time ago.
    Deck Pane Control has same behavior as you need with some additions.
    Hope it helps.
  • 2. Re: Transition between VBox
    861530 Newbie
    Currently Being Moderated
    The deck-pane was an very good example but to make it simple how about this for example
    var slideForm = Timeline {
    
    keyFrames: KeyFrame {
    
    time: 5s;
    values: form1."translateX or something fit for change" => form2.<fit to scene> tween Interpolator EaseBoth
    }
    }
    slideForm.play()
    But am not sure about calling the exact variable after the "dot" and thats what am figuring out to be simple

    Edited by: userJBS on Jun 20, 2011 1:29 AM
  • 3. Re: Transition between VBox
    jojorabbit Explorer
    Currently Being Moderated
    Hi,
    to make it simple just take timeline and keyframes from deckpane or use fade transition.
  • 4. Re: Transition between VBox
    861530 Newbie
    Currently Being Moderated
    But i need to slide the VBox like from right to left let have a look at the code
    var form1: VBox;
    var form2: VBox;
    
    form1 = VBox {
     Label,
    TextBox and image
    
    }
    
    form2 = VBox {
    Label,
    TextBox and image
    }
    
    Stage {
    scene: Scene {
    content: [ Stack{form1, form2}]
    }}
    
    Var slideform = Timeline {
    keyFrames: [
    at (5s) { form1.width&height => form2.width.height}
    ]
    }
    The thing is i want to slide it from RIGHT to LEFT (form1 to form2) at 5s am still figuring out the variable to take effect on both VBox
  • 5. Re: Transition between VBox
    jojorabbit Explorer
    Currently Being Moderated
    Hi,
    you did not said left-to-right in opening post.
    Can you be more specific for me left-to-right would mean node1 goes to right and loses opacity from 1.0->0-0 while in same time node2 comes from left and changes opacity from 0.0->1.0.
    The simplest way for me is to interpolate layoutX of node1(in center on app start) to Double.MAX and node2 from double.MIN to center of scene.
    Try to use at keyframes/keyvalues layoutX for left to right or right to left, and layoutY from up to down and down-up. Both at same time would mean moving nodes diagonal.
    Hope it helps.
  • 6. Re: Transition between VBox
    861530 Newbie
    Currently Being Moderated
    Actually sliding it from right to the left as you know just like android sets to change views we just thumb-slide over either sides. Can you show me an sample code so i get some idea of it.
  • 7. Re: Transition between VBox
    jojorabbit Explorer
    Currently Being Moderated
    Hi,
    am a little late for this post, so busy these days.
    Yes i can show you example now when i know what you need. Next time post something like "I want to accomplish this, this, this and this, to be like Android change views, and like....." it is easier to answer and help you then with "How to make transition between 2 vboxes?" just add more details to question so people can fast and easy answer. In begging first thing that came to me was Deck.

    Here is simple example for translating Left to Right you can change it to suit your needs.

    SlidingList.java
    package playground;
    
    import javafx.animation.Animation.Status;
    import javafx.animation.Interpolator;
    import javafx.animation.KeyFrame;
    import javafx.animation.KeyValue;
    import javafx.animation.Timeline;
    import javafx.beans.property.DoubleProperty;
    import javafx.beans.property.IntegerProperty;
    import javafx.beans.property.ObjectProperty;
    import javafx.beans.value.ChangeListener;
    import javafx.beans.value.ObservableValue;
    import javafx.collections.FXCollections;
    import javafx.collections.ObservableList;
    import javafx.scene.Group;
    import javafx.scene.Node;
    import javafx.scene.Parent;
    import javafx.scene.layout.HBox;
    import javafx.scene.layout.Pane;
    import javafx.util.Duration;
    
    /**
     *
     * @author jojorabbit
     */
    public class SlidingList extends Parent {
    
        private ObservableList<Node> items = FXCollections.<Node>observableArrayList();
        private HBox container;
        private Timeline timeline;
        private Node clipNode; // node for clip for example rectangle, Circle etc.
        // properties
        private ObjectProperty<Node> visibleItem = new ObjectProperty<Node>();
        private IntegerProperty visibleIndex = new IntegerProperty();    
        private DoubleProperty listX = new DoubleProperty(0.0);
        
    
        public SlidingList(Node clip, ObservableList<Node> items) {
            this.clipNode = clip;
            this.items.addAll(items);
            init();
            initListeners();
            if (!items.isEmpty()) {
                visibleIndex.set(0); // set initial visible to 0;
            }
        }
    
        private void init() {
            container = new HBox();
            container.getChildren().addAll(items);
            container.layoutXProperty().bind(listX);
            Group group = new Group(container);
            group.setClip(clipNode);
            getChildren().add(group);
        }
    
        public Node getVisibleItem() {
            return visibleItem.get();
        }
    
        public int getVisibleIndex() {
            return visibleIndex.get();
        }
    
        public void slideLeft() {
            visibleIndex.set(visibleIndex.get() - 1);
        }
    
        public void slideRight() {
            visibleIndex.set(visibleIndex.get() + 1);
        }
    
    //    public void slideToItem() {
    //    }
        private void printInfo(Pane pane) {
            System.out.println("pane tx: " + pane.getTranslateX() + " ty: " + pane.getTranslateY());
            System.out.println("pane lx: " + pane.getLayoutX() + " ly: " + pane.getLayoutY());
        }
    
        private void doAnimation() {
            if (timeline != null) {
                if (timeline.getStatus() == Status.RUNNING) {
                    timeline.stop();
                }
            }
            timeline = new Timeline();
            timeline.setCycleCount(1);
            timeline.getKeyFrames().setAll(
                    // keyframe1                
                    new KeyFrame(Duration.valueOf(350.0d),
                    new KeyValue(listX, -visibleItem.get().getLayoutX(), Interpolator.LINEAR)));
    
            timeline.playFromStart();
        }
    
        private void initListeners() {
            visibleIndex.addListener(new ChangeListener<Number>() {
    
                @Override
                public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                    int indexValue = newValue.intValue();
                    if (indexValue < 0) {
                        indexValue = 0;
                        visibleIndex.set(indexValue);
                    } else if (indexValue >= items.size()) {
                        indexValue = items.size() - 1;
                        visibleIndex.set(indexValue);
                    }
                    visibleItem.set(container.getChildren().get(indexValue));
                }
            });
            visibleItem.addListener(new ChangeListener<Node>() {
    
                @Override
                public void changed(ObservableValue<? extends Node> observable, Node oldValue, Node newValue) {
                    doAnimation();
                }
            });
        }
    }
    SlidingListTest.java
    package playground;
    
    import java.util.Random;
    import javafx.application.Application;
    import javafx.collections.FXCollections;
    import javafx.collections.ObservableList;
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.scene.Group;
    import javafx.scene.Node;
    
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.HBox;
    import javafx.stage.Stage;
    import javafx.scene.layout.VBox;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Rectangle;
    import javafx.scene.shape.Shape;
    
    public class SlidingListTest extends Application {
    
        ObservableList<Node> items = FXCollections.<Node>observableArrayList();
        int itemCount = 10;
        SlidingList list;
    
        @Override
        public void start(Stage stage) {
            stage.setTitle("SlidingListTest");
    
            createItems();
            // creating clip and list
            Shape clipShape = new Rectangle(150, 150);
            list = new SlidingList(clipShape, items);
            //
            HBox controls = new HBox(10);
            // buttons
            Button slideLeftButton = new Button("SlideLeft");
            slideLeftButton.setOnAction(new EventHandler<ActionEvent>() {
    
                @Override
                public void handle(ActionEvent event) {
                    System.out.println("left clicked.");
                    list.slideLeft();
                }
            });
    
            Button slideRightButton = new Button("SlideRight");
            slideRightButton.setOnAction(new EventHandler<ActionEvent>() {
    
                @Override
                public void handle(ActionEvent event) {
                    System.out.println("right clicked.");
                    list.slideRight();
                }
            });
    
            controls.getChildren().addAll(slideLeftButton, slideRightButton);
            VBox vb = new VBox(10);
            vb.getChildren().addAll(controls, list);
    
            Group root = new Group();
            root.getChildren().add(vb);
    
            Scene scene = new Scene(root, 500, 500);
            stage.setScene(scene);
            stage.centerOnScreen();
            stage.setVisible(true);
    
        }
    
        public static void main(String[] args) {
            Application.launch(SlidingListTest.class, args);
        }
    
        private void createItems() {
            Random colorRandomizer = new Random();
            for (int i = 0; i < itemCount; i++) {
    
                Rectangle rect = new Rectangle(250, 250,
                        Color.color(
                        colorRandomizer.nextDouble(),
                        colorRandomizer.nextDouble(),
                        colorRandomizer.nextDouble()));
                System.out.println("item " + i + ":" + rect.getFill());
                items.add(rect);
            }
        }
    }
    In your case make clip same size as both vboxes so that all content in vbox is shown.

    Hope it helps.
  • 8. Re: Transition between VBox
    861530 Newbie
    Currently Being Moderated
    Hi jojo its very stunning and by the way it seems to be the code is build upon javafx2 but i have right done my apps in 1.3 only the remaining thing left is the sliding effect however i try to observe some key points like timeline in your code so that i can modify in mine to take effect.Is it the layoutX make change the position of the VBox?
  • 9. Re: Transition between VBox
    861530 Newbie
    Currently Being Moderated
    I found one but its based on MVC pattern check out this link http://carlfx.wordpress.com/2009/08/20/javafx-forms-framework-part-3/ and it seems to me as complex well have a look on it and is it possible to place label on right-hand side
  • 10. Re: Transition between VBox
    jojorabbit Explorer
    Currently Being Moderated
    Hi,
    yes it is javaFX 2.0 just follow code and try to transfer it to javaFX 1.3 it is not so complicated, i don't have 1.3 on this cpu so i can't write it as 1.3.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points