TitledPanes and animated Treeviews

[Sebastian Rheinnecker]

Hello,

I wanted to achive a Navigation for my application that looks like a 
TreeView but is animated like a TitledPane. That is, a Transition when 
expanding/collapsing an item for its content.

What I did so far is to nest multiple Accordions like this:

     - TopAccordion
     ---- TitledPane
     ------- Accordion
     ----------TitledPane
     ----------TitledPane
     ----------TitledPane
     ---- TitledPane
     ------- Accordion
     ----------TitledPane
     ----------TitledPane
     ----------TitledPane

etc.

However, this approach results in ugly states in the transition when 
expanding/collapsing inner TitledPanes. For an example, I followed the 
example code on TitledPanes on the Oracle website and added my approach 
to it. In the attached image "nestedaccordions.png" (made of 
AccordionsTest.java) you can see that there is a gap between the end of 
the inner Accordion and the next TitledPane. This effect increases when 
the Accordions are deeper nested and another branch is expanded. I also 
noticed that this does not only happen to nested Accordions but other 
controls as well, for example, I followed the code provided in this 
thread: https://forums.oracle.com/forums/thread.jspa?threadID=2339215 
and the result is depictured in the attached "accordionwithtreeview.png".

I noticed that there is a hardcoded EASE_IN and EASE_OUT interpolator 
used for the animation of the TitledPane.  I believe that this does some 
nasty stuff when those are nested. The issue persists in JavaFX 8.0.

On another note, to workaround this, I searched for ways to implement a 
custom TreeCell that is animated when collapsing/expanding a branch in a 
TreeView. I couldn't find API for this or even an example anywhere, is 
this not possible?

Kind regards,
Sebastian

-- 
Sebastian Rheinnecker
phone: +49 7071 9709050
fax: +49 7071 9709051

yWorks GmbH
Vor dem Kreuzberg 28
72070 Tuebingen
Germany
http://www.yworks.com
Managing Directors: Sebastian Müller, Michael Pfahler
Commercial Registry: Stuttgart, Germany, HRB 382340

-------------- next part --------------
package test;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.TitledPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class AccordionTest extends Application {

  final String[] imageNames = new String[]{"Apples", "Flowers", "Leaves"};
  final Image[] images = new Image[imageNames.length];
  final ImageView[] pics = new ImageView[imageNames.length];
  final TitledPane[] tps = new TitledPane[imageNames.length];

  public static void main(String[] args) {
    launch(args);
  }

  @Override public void start(Stage stage) {
    stage.setTitle("TitledPane");
    Scene scene = new Scene(new Group(), 80, 180);
    scene.setFill(Color.GHOSTWHITE);

    final Accordion accordion1 = new Accordion ();

    for (int i = 0; i < imageNames.length; i++) {
      images[i] = new
              Image(getClass().getResourceAsStream(imageNames[i] + ".jpg"));
      pics[i] = new ImageView(images[i]);
      tps[i] = new TitledPane(imageNames[i],pics[i]);
    }
    accordion1.getPanes().addAll(tps);

    final Accordion accordion2 = new Accordion ();

    for (int i = 0; i < imageNames.length; i++) {
      images[i] = new
              Image(getClass().getResourceAsStream(imageNames[i] + ".jpg"));
      pics[i] = new ImageView(images[i]);
      tps[i] = new TitledPane(imageNames[i],pics[i]);
    }
    accordion2.getPanes().addAll(tps);

    final Accordion accordion3 = new Accordion ();

    for (int i = 0; i < imageNames.length; i++) {
      images[i] = new
              Image(getClass().getResourceAsStream(imageNames[i] + ".jpg"));
      pics[i] = new ImageView(images[i]);
      tps[i] = new TitledPane(imageNames[i],pics[i]);
    }
    accordion3.getPanes().addAll(tps);

    final Accordion rootAccordion = new Accordion ();

    TitledPane first = new TitledPane("First", accordion1);
    TitledPane second = new TitledPane("Second", null);
    second.setGraphic(null);
    second.setCollapsible(false);
    TitledPane third = new TitledPane("Third", accordion3);
    rootAccordion.getPanes().add(first);
    rootAccordion.getPanes().add(second);
    rootAccordion.getPanes().add(third);

    Group root = (Group)scene.getRoot();
    root.getChildren().add(rootAccordion);
    stage.setScene(scene);
    stage.show();
  }
}