10 Replies Latest reply on Jun 22, 2011 12:15 PM by jojorabbit

    Transition between VBox

      I have a stack container consists of 2 VBox like var form1: VBox, var form2:VBox

      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
          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.
          1 person found this helpful
          • 2. Re: Transition between VBox
            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
            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
              to make it simple just take timeline and keyframes from deckpane or use fade transition.
              • 4. Re: Transition between VBox
                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 {
                TextBox and image
                form2 = VBox {
                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
                  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
                    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
                      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.

                      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;
                              if (!items.isEmpty()) {
                                  visibleIndex.set(0); // set initial visible to 0;
                          private void init() {
                              container = new HBox();
                              Group group = new Group(container);
                          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 = new Timeline();
                                      // keyframe1                
                                      new KeyFrame(Duration.valueOf(350.0d),
                                      new KeyValue(listX, -visibleItem.get().getLayoutX(), Interpolator.LINEAR)));
                          private void initListeners() {
                              visibleIndex.addListener(new ChangeListener<Number>() {
                                  public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                                      int indexValue = newValue.intValue();
                                      if (indexValue < 0) {
                                          indexValue = 0;
                                      } else if (indexValue >= items.size()) {
                                          indexValue = items.size() - 1;
                              visibleItem.addListener(new ChangeListener<Node>() {
                                  public void changed(ObservableValue<? extends Node> observable, Node oldValue, Node newValue) {
                      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;
                          public void start(Stage stage) {
                              // 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>() {
                                  public void handle(ActionEvent event) {
                                      System.out.println("left clicked.");
                              Button slideRightButton = new Button("SlideRight");
                              slideRightButton.setOnAction(new EventHandler<ActionEvent>() {
                                  public void handle(ActionEvent event) {
                                      System.out.println("right clicked.");
                              controls.getChildren().addAll(slideLeftButton, slideRightButton);
                              VBox vb = new VBox(10);
                              vb.getChildren().addAll(controls, list);
                              Group root = new Group();
                              Scene scene = new Scene(root, 500, 500);
                          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,
                                  System.out.println("item " + i + ":" + rect.getFill());
                      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
                        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
                          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
                            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.